prets entre utilisateurs

Reviewed-on: #8

my-library/src/App.jsx

@@ -1,19 +1,48 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
 import Home from './pages/Home';
 import Books from './pages/Books';
 import Orders from './pages/Orders';
 import Profile from './pages/Profile';
 import NotFound from './pages/NotFound';
+import AddBook from './pages/AddBook';
+import BookDetail from './pages/BookDetail';
+import Customers from './pages/Customers';
+import Login from './pages/Login';
+import Reservations from './pages/Reservations';
+import Returns from './pages/Returns';
+import Subscription from './pages/Subscription';
+import Loans from './pages/Loans';
+import { useAuth } from './context/AuthContext';
+
+function RequireAuth({ children }) {
+  const { user } = useAuth();
+  return user ? children : <Navigate to="/login" replace />;
+}
+
+function RequireAdmin({ children }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  if (user.role !== 'admin') return <Navigate to="/" replace />;
+  return children;
+}
 
 export default function App() {
   return (
     <Routes>
+      <Route path="/login" element={<Login />} />
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
         <Route path="books" element={<Books />} />
-        <Route path="orders" element={<Orders />} />
-        <Route path="profile" element={<Profile />} />
+        <Route path="books/:bookId" element={<RequireAuth><BookDetail /></RequireAuth>} />
+        <Route path="books/new" element={<RequireAdmin><AddBook /></RequireAdmin>} />
+        <Route path="orders" element={<RequireAuth><Orders /></RequireAuth>} />
+        <Route path="reservations" element={<RequireAuth><Reservations /></RequireAuth>} />
+        <Route path="profile" element={<RequireAuth><Profile /></RequireAuth>} />
+        <Route path="customers" element={<RequireAdmin><Customers /></RequireAdmin>} />
+        <Route path="returns" element={<RequireAdmin><Returns /></RequireAdmin>} />
+        <Route path="subscription" element={<RequireAuth><Subscription /></RequireAuth>} />
+        <Route path="loans" element={<RequireAuth><Loans /></RequireAuth>} />
         <Route path="*" element={<NotFound />} />
       </Route>
     </Routes>

my-library/src/api/books.js

@@ -0,0 +1,17 @@
+import client from './client';
+
+export function getBooks(page = 0, size = 20) {
+  return client.get('/api/books', { params: { page, size } });
+}
+
+export function registerBook(book) {
+  return client.post('/api/books', book);
+}
+
+export function getBookById(id) {
+  return client.get(`/api/books/${id}`);
+}
+
+export function reserveBook(bookId, reservation) {
+  return client.post(`/api/books/${bookId}/reservations`, reservation);
+}

my-library/src/api/books.jsx

@@ -1,5 +0,0 @@
-import client from './client';
-
-export function getBooks(page = 0, size = 20) {
-  return client.get('/api/books', { params: { page, size } });
-}

my-library/src/api/customers.js

@@ -0,0 +1,17 @@
+import client from './client';
+
+export function registerCustomer(customer) {
+  return client.post('/api/customers', customer);
+}
+
+export function findCustomerByPhone(phoneNumber) {
+  return client.get(`/api/customers/phone/${encodeURIComponent(phoneNumber)}`);
+}
+
+export function addLoyaltyPoints(customerId, points) {
+  return client.post(`/api/customers/${customerId}/loyalty/add`, null, { params: { points } });
+}
+
+export function subtractLoyaltyPoints(customerId, points) {
+  return client.post(`/api/customers/${customerId}/loyalty/subtract`, null, { params: { points } });
+}

my-library/src/api/orders.js

@@ -0,0 +1,5 @@
+import client from './client';
+
+export function createOrder(order) {
+  return client.post('/api/orders', order);
+}

my-library/src/components/Navbar.jsx

@@ -1,7 +1,16 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 import '../styles/navbar.css';
 
 export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate('/login');
+  }
+
   return (
     <nav className="navbar">
       <Link to="/" className="navbar__logo">Biblio</Link>
@@ -9,13 +18,24 @@ export default function Navbar() {
       <ul className="navbar__links">
         <li><Link to="/">Accueil</Link></li>
         <li><Link to="/books">Catalogue</Link></li>
-        <li><Link to="/orders">Commandes</Link></li>
-        <li><Link to="/profile">Mon compte</Link></li>
+        {user && <li><Link to="/orders">Commandes</Link></li>}
+        {user?.role === 'user' && <li><Link to="/reservations">Mes réservations</Link></li>}
+        {user?.role === 'user' && <li><Link to="/subscription">Mon abonnement</Link></li>}
+        {user?.role === 'user' && <li><Link to="/loans">Mes prêts</Link></li>}
+        {user && <li><Link to="/profile">Mon compte</Link></li>}
+        {user?.role === 'admin' && <li><Link to="/customers">Clients</Link></li>}
+        {user?.role === 'admin' && <li><Link to="/returns">Retours</Link></li>}
       </ul>
 
       <div className="navbar__actions">
-        <button className="btn-ghost">Connexion</button>
-        <button className="btn-cta">S'inscrire</button>
+        {user ? (
+          <>
+            <span>{user.username} ({user.role})</span>
+            <button onClick={handleLogout}>Déconnexion</button>
+          </>
+        ) : (
+          <Link to="/login"><button>Connexion</button></Link>
+        )}
       </div>
     </nav>
   );

my-library/src/context/AuthContext.js

@@ -0,0 +1,39 @@
+import { createContext, useContext, useState } from 'react';
+
+const USERS = [
+  { username: 'admin', password: 'admin', role: 'admin' },
+  { username: 'alice', password: 'bob', role: 'user' },
+];
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(() => {
+    const saved = localStorage.getItem('auth');
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  function login(username, password) {
+    const found = USERS.find(u => u.username === username && u.password === password);
+    if (!found) return false;
+    const { password: _, ...safe } = found;
+    setUser(safe);
+    localStorage.setItem('auth', JSON.stringify(safe));
+    return true;
+  }
+
+  function logout() {
+    setUser(null);
+    localStorage.removeItem('auth');
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

my-library/src/context/LoanContext.js

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState } from 'react';
+
+const LoanContext = createContext(null);
+
+export function LoanProvider({ children }) {
+  const [loans, setLoans] = useState(() => {
+    const saved = localStorage.getItem('loans');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addLoan(book, borrowerPhone, dueDate) {
+    const loan = {
+      loanId: crypto.randomUUID(),
+      bookId: book.isbn,
+      bookTitle: book.title,
+      bookAuthor: book.author,
+      borrowerPhone,
+      dueDate,
+      status: 'ACTIVE',
+      loanedAt: new Date().toISOString(),
+    };
+    const updated = [...loans, loan];
+    setLoans(updated);
+    localStorage.setItem('loans', JSON.stringify(updated));
+    return loan;
+  }
+
+  function returnLoan(loanId) {
+    const updated = loans.map(l =>
+      l.loanId === loanId ? { ...l, status: 'RETURNED' } : l
+    );
+    setLoans(updated);
+    localStorage.setItem('loans', JSON.stringify(updated));
+  }
+
+  return (
+    <LoanContext.Provider value={{ loans, addLoan, returnLoan }}>
+      {children}
+    </LoanContext.Provider>
+  );
+}
+
+export function useLoans() {
+  return useContext(LoanContext);
+}

my-library/src/context/ReservationContext.js

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState } from 'react';
+
+const ReservationContext = createContext(null);
+
+export function ReservationProvider({ children }) {
+  const [reservations, setReservations] = useState(() => {
+    const saved = localStorage.getItem('reservations');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addReservation(book, phoneNumber) {
+    const reservation = {
+      reservationId: crypto.randomUUID(),
+      bookId: book.isbn,
+      bookTitle: book.title,
+      bookAuthor: book.author,
+      phoneNumber,
+      status: 'CONFIRMED',
+      reservedAt: new Date().toISOString(),
+    };
+    const updated = [...reservations, reservation];
+    setReservations(updated);
+    localStorage.setItem('reservations', JSON.stringify(updated));
+    return reservation;
+  }
+
+  function cancelReservation(reservationId) {
+    const updated = reservations.filter(r => r.reservationId !== reservationId);
+    setReservations(updated);
+    localStorage.setItem('reservations', JSON.stringify(updated));
+  }
+
+  return (
+    <ReservationContext.Provider value={{ reservations, addReservation, cancelReservation }}>
+      {children}
+    </ReservationContext.Provider>
+  );
+}
+
+export function useReservations() {
+  return useContext(ReservationContext);
+}

my-library/src/context/ReturnContext.js

@@ -0,0 +1,36 @@
+import { createContext, useContext, useState } from 'react';
+
+const ReturnContext = createContext(null);
+
+export function ReturnProvider({ children }) {
+  const [returns, setReturns] = useState(() => {
+    const saved = localStorage.getItem('returns');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addReturn(bookId, bookTitle, customerPhone, reason) {
+    const bookReturn = {
+      returnId: crypto.randomUUID(),
+      bookId,
+      bookTitle,
+      customerPhone,
+      reason,
+      status: 'PROCESSED',
+      returnedAt: new Date().toISOString(),
+    };
+    const updated = [...returns, bookReturn];
+    setReturns(updated);
+    localStorage.setItem('returns', JSON.stringify(updated));
+    return bookReturn;
+  }
+
+  return (
+    <ReturnContext.Provider value={{ returns, addReturn }}>
+      {children}
+    </ReturnContext.Provider>
+  );
+}
+
+export function useReturns() {
+  return useContext(ReturnContext);
+}

my-library/src/context/ReviewContext.js

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState } from 'react';
+
+const ReviewContext = createContext(null);
+
+export function ReviewProvider({ children }) {
+  const [reviews, setReviews] = useState(() => {
+    const saved = localStorage.getItem('reviews');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function addReview(bookId, bookTitle, username, rating, comment) {
+    const review = {
+      reviewId: crypto.randomUUID(),
+      bookId,
+      bookTitle,
+      username,
+      rating,
+      comment,
+      createdAt: new Date().toISOString(),
+    };
+    const updated = [...reviews, review];
+    setReviews(updated);
+    localStorage.setItem('reviews', JSON.stringify(updated));
+    return review;
+  }
+
+  function getReviewsByBook(bookId) {
+    return reviews.filter(r => String(r.bookId) === String(bookId));
+  }
+
+  return (
+    <ReviewContext.Provider value={{ reviews, addReview, getReviewsByBook }}>
+      {children}
+    </ReviewContext.Provider>
+  );
+}
+
+export function useReviews() {
+  return useContext(ReviewContext);
+}

my-library/src/context/SubscriptionContext.js

@@ -0,0 +1,50 @@
+import { createContext, useContext, useState } from 'react';
+
+const SubscriptionContext = createContext(null);
+
+const PLANS = [
+  { id: 'basic', name: 'Basic', price: 9.99, description: '2 livres par mois' },
+  { id: 'standard', name: 'Standard', price: 14.99, description: '5 livres par mois' },
+  { id: 'premium', name: 'Premium', price: 24.99, description: 'Livres illimités par mois' },
+];
+
+export { PLANS };
+
+export function SubscriptionProvider({ children }) {
+  const [subscription, setSubscription] = useState(() => {
+    const saved = localStorage.getItem('subscription');
+    return saved ? JSON.parse(saved) : null;
+  });
+
+  function subscribe(planId, phoneNumber) {
+    const plan = PLANS.find(p => p.id === planId);
+    const newSubscription = {
+      subscriptionId: crypto.randomUUID(),
+      planId,
+      planName: plan.name,
+      price: plan.price,
+      phoneNumber,
+      status: 'ACTIVE',
+      startDate: new Date().toISOString(),
+    };
+    setSubscription(newSubscription);
+    localStorage.setItem('subscription', JSON.stringify(newSubscription));
+    return newSubscription;
+  }
+
+  function cancelSubscription() {
+    const updated = { ...subscription, status: 'CANCELLED' };
+    setSubscription(updated);
+    localStorage.setItem('subscription', JSON.stringify(updated));
+  }
+
+  return (
+    <SubscriptionContext.Provider value={{ subscription, subscribe, cancelSubscription, PLANS }}>
+      {children}
+    </SubscriptionContext.Provider>
+  );
+}
+
+export function useSubscription() {
+  return useContext(SubscriptionContext);
+}

my-library/src/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from './context/AuthContext';
+import { ReservationProvider } from './context/ReservationContext';
+import { ReviewProvider } from './context/ReviewContext';
+import { ReturnProvider } from './context/ReturnContext';
+import { SubscriptionProvider } from './context/SubscriptionContext';
+import { LoanProvider } from './context/LoanContext';
 import App from './App';
 import './styles/global.css';
 
@@ -8,7 +14,19 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <AuthProvider>
+        <ReservationProvider>
+          <ReviewProvider>
+            <ReturnProvider>
+              <SubscriptionProvider>
+                <LoanProvider>
+                  <App />
+                </LoanProvider>
+              </SubscriptionProvider>
+            </ReturnProvider>
+          </ReviewProvider>
+        </ReservationProvider>
+      </AuthProvider>
     </BrowserRouter>
   </React.StrictMode>
 );

my-library/src/pages/AddBook.jsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { registerBook } from '../api/books';
+
+const CATEGORIES = ['FICTION', 'NON_FICTION', 'SCIENCE_FICTION', 'FANTASY', 'MYSTERY', 'THRILLER', 'ROMANCE', 'BIOGRAPHY', 'HISTORY', 'POETRY', 'CHILDRENS', 'YOUNG_ADULT', 'SCIENCE', 'PHILOSOPHY', 'SELF_HELP', 'TRAVEL', 'COOKING', 'ART', 'RELIGION', 'REFERENCE'];
+
+const initialForm = {
+  isbn: '', title: '', author: '', publisher: '', publicationDate: '', price: '', quantity: '', categories: [], description: '', language: '',
+};
+
+export default function AddBook() {
+  const [form, setForm] = useState(initialForm);
+  const [message, setMessage] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleCategoryChange(e) {
+    setForm((prev) => ({ ...prev, categories: e.target.value ? [e.target.value] : [] }));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setMessage(null);
+
+    const payload = {
+      ...form,
+      isbn: Number(form.isbn),
+      price: Number(form.price),
+      quantity: Number(form.quantity),
+    };
+
+    registerBook(payload)
+      .then((response) => {
+        setMessage({ type: 'success', text: `Livre créé (id : ${response.data})` });
+        setForm(initialForm);  
+      })
+      .catch((error) => {
+        console.error(error);
+        const status = error.response?.status;
+        if (status === 406) setMessage({ type: 'error', text: 'Ce livre existe déjà.' });
+        else if (status === 400) setMessage({ type: 'error', text: 'Données invalides, vérifie les champs.' });
+        else setMessage({ type: 'error', text: 'Erreur lors de la création.' });
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  return (
+    <main>
+      <h1>Ajouter un livre</h1>
+      <form onSubmit={handleSubmit}>
+        <table>
+            <tr>
+                <td>ISBN</td>
+                <td><input name="isbn" type="number" value={form.isbn} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Titre</td>
+                <td><input name="title" value={form.title} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Auteur</td>
+                <td><input name="author" value={form.author} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Éditeur</td>
+                <td><input name="publisher" value={form.publisher} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Date de publication</td>
+                <td><input name="publicationDate" type="date" value={form.publicationDate} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Prix</td>
+                <td><input name="price" type="number" step="0.01" value={form.price} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Quantité</td>
+                <td><input name="quantity" type="number" value={form.quantity} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Langue</td>
+                <td><input name="language" value={form.language} onChange={handleChange} required /></td>
+            </tr>
+            <tr>
+                <td>Catégorie</td>
+                <td><select value={form.categories[0] || ''} onChange={handleCategoryChange} required><option value=""> choisir </option>{CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}</select></td>
+            </tr>
+            <tr>
+                <td>Description</td>
+                <td><textarea name="description" value={form.description} onChange={handleChange} /></td>
+            </tr>
+        </table>
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'Envoi…' : 'Ajouter le livre'}
+        </button>
+      </form>
+
+      {message && <p>{message.text}</p>}
+    </main>
+  );
+}

my-library/src/pages/BookDetail.jsx

@@ -0,0 +1,158 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { getBookById } from '../api/books';
+import { useAuth } from '../context/AuthContext';
+import { useReservations } from '../context/ReservationContext';
+import { useReviews } from '../context/ReviewContext';
+import { useSubscription } from '../context/SubscriptionContext';
+
+export default function BookDetail() {
+  const { user } = useAuth();
+  const { subscription } = useSubscription();
+  const { addReservation, reservations } = useReservations();
+  const { addReview, getReviewsByBook } = useReviews();
+  const [rating, setRating] = useState(5);
+  const [comment, setComment] = useState('');
+  const [reviewStatus, setReviewStatus] = useState(null);
+  const { bookId } = useParams();
+  const [book, setBook] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [reservationStatus, setReservationStatus] = useState(null);
+
+  useEffect(() => { getBookById(bookId).then((response) => setBook(response.data)).catch((err) => { console.error(err); setError('Livre introuvable.'); }).finally(() => setLoading(false)); }, [bookId]);
+
+  function handleReservation(e) {
+    e.preventDefault();
+    addReservation(book, phoneNumber);
+    setReservationStatus({ success: true, message: 'Réservation effectuée avec succès !' });
+    setPhoneNumber('');
+  }
+
+  function handleReview(e) {
+    e.preventDefault();
+    addReview(book.isbn, book.title, user.username, Number(rating), comment);
+    setReviewStatus({ success: true, message: 'Avis publié avec succès !' });
+    setComment('');
+    setRating(5);
+  }
+
+  if (loading) return <main><p>Chargement…</p></main>;
+  if (error) return <main><p>{error}</p><Link to="/books">← Retour au catalogue</Link></main>;
+
+  return (
+    <main>
+      <Link to="/books">← Retour au catalogue</Link>
+      <h1>{book.title}</h1>
+      <p>Auteur : {book.author}</p>
+      <p>ISBN : {book.isbn}</p>
+      <p>Éditeur : {book.publisher}</p>
+      <p>Publié le : {book.publicationDate}</p>
+      <p>Prix : {book.price} €</p>
+      <p>Stock : {book.quantity}</p>
+      <p>Langue : {book.language}</p>
+      <p>Catégories : {book.categories?.join(', ')}</p>
+      {book.description && <p>{book.description}</p>}
+
+      <section>
+        <h2>Avis des lecteurs</h2>
+        {getReviewsByBook(book.isbn).length === 0 ? (
+          <p>Aucun avis pour le moment.</p>
+        ) : (
+          <ul>
+            {getReviewsByBook(book.isbn).map(r => (
+              <li key={r.reviewId}>
+                <strong>{r.username}</strong> — {'*'.repeat(r.rating)}
+                <br />
+                {r.comment}
+                <br />
+                <small>{new Date(r.createdAt).toLocaleDateString('fr-FR')}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+        {user?.role === 'user' && (
+          <form onSubmit={handleReview}>
+            <h3>Laisser un avis</h3>
+            <label>
+              Note :
+              <select value={rating} onChange={e => setRating(e.target.value)}>
+                <option value={1}>*</option>
+                <option value={2}>**</option>
+                <option value={3}>***</option>
+                <option value={4}>****</option>
+                <option value={5}>*****</option>
+              </select>
+            </label>
+            <label>
+              Commentaire :
+              <textarea value={comment} onChange={e => setComment(e.target.value)} required />
+            </label>
+            <button type="submit">Publier l'avis</button>
+          </form>
+        )}
+        {reviewStatus && (
+          <p style={{ color: reviewStatus.success ? 'green' : 'red' }}>
+            {reviewStatus.message}
+          </p>
+        )}
+      </section>
+
+      {user?.role === 'user' && (
+        <section>
+          <h2>Réserver ce livre</h2>
+          {!subscription || subscription.status !== 'ACTIVE' ? (
+            <p>
+              Vous devez avoir un abonnement actif pour réserver un livre.{' '}
+              <Link to="/subscription">S'abonner</Link>
+            </p>
+          ) : (() => {
+            const QUOTAS = { basic: 2, standard: 5, premium: Infinity };
+            const quota = QUOTAS[subscription.planId];
+            const thisMonthStart = new Date();
+            thisMonthStart.setDate(1);
+            thisMonthStart.setHours(0, 0, 0, 0);
+            const usedThisMonth = reservations.filter(r =>
+              new Date(r.reservedAt) >= thisMonthStart
+            ).length;
+            const remaining = quota - usedThisMonth;
+
+            if (remaining <= 0) {
+              return (
+                <p style={{ color: 'orange' }}>
+                  Vous avez atteint votre quota de {quota} réservation(s) ce mois-ci.
+                  <Link to="/subscription"> Passer au plan supérieur</Link>
+                </p>
+              );
+            }
+
+            return (
+              <>
+                <p>Réservations restantes ce mois : <strong>{remaining === Infinity ? 'illimitées' : remaining}</strong></p>
+                <form onSubmit={handleReservation}>
+                  <label>
+                    Numéro de téléphone :
+                    <input
+                      type="tel"
+                      value={phoneNumber}
+                      onChange={(e) => setPhoneNumber(e.target.value)}
+                      placeholder="0612345678"
+                      required
+                    />
+                  </label>
+                  <button type="submit">Réserver</button>
+                </form>
+                {reservationStatus && (
+                  <p style={{ color: reservationStatus.success ? 'green' : 'red' }}>
+                    {reservationStatus.message}
+                  </p>
+                )}
+              </>
+            );
+          })()}
+        </section>
+      )}
+    </main>
+  );
+}

my-library/src/pages/Books.jsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
 import { getBooks } from '../api/books';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
 
 export default function Books() {
+  const { user } = useAuth();
   const [books, setBooks] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -27,10 +30,13 @@ export default function Books() {
   return (
     <main>
       <h1>Catalogue</h1>
+      {user?.role === 'admin' && <Link to="/books/new">+ Ajouter un livre</Link>}
       <ul>
         {books.map((book) => (
           <li key={book.isbn}>
-            <strong>{book.title}</strong> - {book.author}
+            <Link to={`/books/${book.isbn}`}>
+              <strong>{book.title}</strong> - {book.author}
+            </Link>
           </li>
         ))}
       </ul>

my-library/src/pages/Customers.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { registerCustomer, findCustomerByPhone, addLoyaltyPoints, subtractLoyaltyPoints } from '../api/customers';
+
+const initialForm = { firstName: '', lastName: '', phoneNumber: '' };
+
+export default function Customers() {
+  const [form, setForm] = useState(initialForm);
+  const [registerMsg, setRegisterMsg] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [pointsInput, setPointsInput] = useState('');
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleRegister(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setRegisterMsg(null);
+    registerCustomer(form)
+      .then((response) => {
+        setRegisterMsg(`Client créé (id : ${response.data})`);
+        setForm(initialForm);
+      })
+      .catch((error) => {
+        console.error(error);
+        setRegisterMsg('Erreur lors de la création du client.');
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  const [phone, setPhone] = useState('');
+  const [customer, setCustomer] = useState(null);
+  const [searchError, setSearchError] = useState(null);
+
+  function handleSearch(e) {
+    e.preventDefault();
+    setSearchError(null);
+    setCustomer(null);
+    findCustomerByPhone(phone)
+      .then((response) => setCustomer(response.data))
+      .catch((error) => {
+        console.error(error);
+        setSearchError('Aucun client trouvé avec ce numéro.');
+      });
+  }
+  function applyLoyalty(operation) {
+  const points = Number(pointsInput);
+  const action = operation === 'add' ? addLoyaltyPoints : subtractLoyaltyPoints;
+
+  action(customer.id, points)
+    .then((response) => {
+      setCustomer((prev) => ({ ...prev, loyaltyPoints: response.data }));
+      setPointsInput('');
+    })
+    .catch((error) => {
+      console.error(error);
+      if (error.response?.status === 400) setSearchError('Pas assez de points pour ce retrait.');
+      else setSearchError('Erreur lors de la mise à jour des points.');
+    });
+  }
+
+  return (
+    <main>
+      <h1>Gestion des clients</h1>
+
+      <section>
+        <h2>Enregistrer un client</h2>
+        <form onSubmit={handleRegister}>
+          <label>Prénom
+            <input name="firstName" value={form.firstName} onChange={handleChange} required />
+          </label>
+          <label>Nom
+            <input name="lastName" value={form.lastName} onChange={handleChange} required />
+          </label>
+          <label>Téléphone
+            <input name="phoneNumber" value={form.phoneNumber} onChange={handleChange} required />
+          </label>
+          <button type="submit" disabled={submitting}>
+            {submitting ? 'Envoi…' : 'Créer le client'}
+          </button>
+        </form>
+        {registerMsg && <p>{registerMsg}</p>}
+      </section>
+
+      <section>
+        <h2>Rechercher un client</h2>
+        <form onSubmit={handleSearch}>
+          <label>Téléphone
+            <input value={phone} onChange={(e) => setPhone(e.target.value)} required />
+          </label>
+          <button type="submit">Rechercher</button>
+        </form>
+        {searchError && <p>{searchError}</p>}
+        {customer && (
+          <div>
+            <p>{customer.firstName} {customer.lastName}</p>
+            <p>Téléphone : {customer.phoneNumber}</p>
+            <p><strong>Points de fidélité : {customer.loyaltyPoints}</strong></p>
+            <input type="number"value={pointsInput}onChange={(e) => setPointsInput(e.target.value)}placeholder="Nombre de points"/>
+            <button type="button" onClick={() => applyLoyalty('add')}>Ajouter</button>
+            <button type="button" onClick={() => applyLoyalty('subtract')}>Retirer</button>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}

my-library/src/pages/Loans.jsx

@@ -0,0 +1,54 @@
+import { useLoans } from '../context/LoanContext';
+
+export default function Loans() {
+  const { loans, returnLoan } = useLoans();
+
+  const activeLoans = loans.filter(l => l.status === 'ACTIVE');
+  const returnedLoans = loans.filter(l => l.status === 'RETURNED');
+
+  return (
+    <main>
+      <h1>Mes prêts</h1>
+
+      <section>
+        <h2>Prêts en cours ({activeLoans.length})</h2>
+        {activeLoans.length === 0 ? (
+          <p>Aucun prêt en cours.</p>
+        ) : (
+          <ul>
+            {activeLoans.map(l => (
+              <li key={l.loanId}>
+                <strong>{l.bookTitle}</strong> — {l.bookAuthor}
+                <br />
+                Prêté à : {l.borrowerPhone}
+                <br />
+                À rendre avant le : {new Date(l.dueDate).toLocaleDateString('fr-FR')}
+                <br />
+                Prêté le : {new Date(l.loanedAt).toLocaleDateString('fr-FR')}
+                <br />
+                <button onClick={() => returnLoan(l.loanId)}>Marquer comme rendu</button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {returnedLoans.length > 0 && (
+        <section>
+          <h2>Prêts terminés ({returnedLoans.length})</h2>
+          <ul>
+            {returnedLoans.map(l => (
+              <li key={l.loanId}>
+                <strong>{l.bookTitle}</strong> — {l.bookAuthor}
+                <br />
+                Prêté à : {l.borrowerPhone}
+                <br />
+                <small>Rendu ✓</small>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </main>
+  );
+}

my-library/src/pages/Login.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ username: '', password: '' });
+  const [error, setError] = useState(null);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const ok = login(form.username, form.password);
+    if (ok) {
+      navigate('/');
+    } else {
+      setError('Identifiants incorrects.');
+    }
+  }
+
+  return (
+    <main>
+      <h1>Connexion</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>
+            Nom d'utilisateur :
+            <input
+              type="text"
+              value={form.username}
+              onChange={e => setForm(f => ({ ...f, username: e.target.value }))}
+              required
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Mot de passe :
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+              required
+            />
+          </label>
+        </div>
+        <button type="submit">Se connecter</button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
+      </form>
+      <p>Comptes disponibles :</p>
+      <ul>
+        <li><strong>admin</strong> / admin (administrateur)</li>
+        <li><strong>alice (utilisateur)</strong> / bob (utilisateur)</li>
+      </ul>
+    </main>
+  );
+}

my-library/src/pages/Orders.jsx

@@ -1,3 +1,91 @@
+import { useState } from 'react';
+import { createOrder } from '../api/orders';
+
 export default function Orders() {
-  return <main><h1>Mes commandes</h1></main>;
+  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 [message, setMessage] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function handleAddressChange(e) {
+    const { name, value } = e.target;
+    setAddress((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleLineChange(index, field, value) {
+    setLines((prev) => prev.map((line, i) => (i === index ? { ...line, [field]: value } : line)));
+  }
+  function addLine() {
+    setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
+  }
+  function removeLine(index) {
+    setLines((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSubmitting(true);
+    setMessage(null);
+
+    const payload = {
+      customerId,
+      paymentMethod,
+      address,
+      orderLineDtos: lines.map((line) => ({
+        bookId: Number(line.bookId),
+        quantity: Number(line.quantity),
+      })),
+    };
+
+    createOrder(payload)
+      .then((response) => setMessage('Commande créée'))
+      .catch((error) => {
+        console.error(error);
+        setMessage(error.response?.data?.message || 'Erreur lors de la commande.');
+      })
+      .finally(() => setSubmitting(false));
+  }
+
+  return (
+    <main>
+      <h1>Passer une commande</h1>
+      <form onSubmit={handleSubmit}>
+        <label>ID client
+          <input value={customerId} onChange={(e) => setCustomerId(e.target.value)} required />
+        </label>
+
+        <h2>Livres</h2>
+        {lines.map((line, index) => (
+          <div key={index}>
+            <input type="number" placeholder="ISBN du livre" value={line.bookId}
+              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 />
+            {lines.length > 1 && (
+              <button type="button" onClick={() => removeLine(index)}>Retirer</button>
+            )}
+          </div>
+        ))}
+        <button type="button" onClick={addLine}>+ Ajouter un livre</button>
+
+        <h2>Adresse de livraison</h2>
+        <input name="street" placeholder="Rue" value={address.street} onChange={handleAddressChange} required />
+        <input name="city" placeholder="Ville" value={address.city} onChange={handleAddressChange} required />
+        <input name="postalCode" placeholder="Code postal" value={address.postalCode} onChange={handleAddressChange} required />
+        <input name="country" placeholder="Pays" value={address.country} onChange={handleAddressChange} required />
+
+        <h2>Paiement</h2>
+        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
+          <option value="CREDIT_CARD">Carte bancaire</option>
+        </select>
+
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'Envoi…' : 'Valider la commande'}
+        </button>
+      </form>
+      {message && <p>{message}</p>}
+    </main>
+  );
 }

my-library/src/pages/Reservations.jsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { useReservations } from '../context/ReservationContext';
+import { useLoans } from '../context/LoanContext';
+import { Link } from 'react-router-dom';
+
+export default function Reservations() {
+  const { reservations, cancelReservation } = useReservations();
+  const { addLoan } = useLoans();
+  const [loanForms, setLoanForms] = useState({});
+  const [loanStatuses, setLoanStatuses] = useState({});
+
+  function handleLoanChange(reservationId, field, value) {
+    setLoanForms(prev => ({
+      ...prev,
+      [reservationId]: { ...prev[reservationId], [field]: value }
+    }));
+  }
+
+  function handleLoan(e, reservation) {
+    e.preventDefault();
+    const form = loanForms[reservation.reservationId] || {};
+    addLoan(
+      { isbn: reservation.bookId, title: reservation.bookTitle, author: reservation.bookAuthor },
+      form.borrowerPhone,
+      form.dueDate
+    );
+    setLoanStatuses(prev => ({ ...prev, [reservation.reservationId]: 'Prêt enregistré avec succès !' }));
+    setLoanForms(prev => ({ ...prev, [reservation.reservationId]: {} }));
+  }
+
+  if (reservations.length === 0) {
+    return (
+      <main>
+        <h1>Mes réservations</h1>
+        <p>Aucune réservation pour le moment.</p>
+        <Link to="/books">← Retour au catalogue</Link>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <h1>Mes réservations</h1>
+      <ul>
+        {reservations.map(r => (
+          <li key={r.reservationId}>
+            <strong>{r.bookTitle}</strong> — {r.bookAuthor}
+            <br />
+            Téléphone : {r.phoneNumber}
+            <br />
+            Réservé le : {new Date(r.reservedAt).toLocaleDateString('fr-FR')}
+            <br />
+            Statut : {r.status}
+            <br />
+            <button onClick={() => cancelReservation(r.reservationId)}>Annuler</button>
+
+            <details>
+              <summary>Prêter ce livre à un autre lecteur</summary>
+              <form onSubmit={e => handleLoan(e, r)}>
+                <label>
+                  Téléphone de l'emprunteur :
+                  <input
+                    type="tel"
+                    value={loanForms[r.reservationId]?.borrowerPhone || ''}
+                    onChange={e => handleLoanChange(r.reservationId, 'borrowerPhone', e.target.value)}
+                    placeholder="0612345678"
+                    required
+                  />
+                </label>
+                <label>
+                  Date de retour prévue :
+                  <input
+                    type="date"
+                    value={loanForms[r.reservationId]?.dueDate || ''}
+                    onChange={e => handleLoanChange(r.reservationId, 'dueDate', e.target.value)}
+                    min={new Date().toISOString().split('T')[0]}
+                    required
+                  />
+                </label>
+                <button type="submit">Prêter</button>
+              </form>
+              {loanStatuses[r.reservationId] && (
+                <p style={{ color: 'green' }}>{loanStatuses[r.reservationId]}</p>
+              )}
+            </details>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

my-library/src/pages/Returns.jsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { useReturns } from '../context/ReturnContext';
+import { getBooks } from '../api/books';
+import { useEffect } from 'react';
+
+export default function Returns() {
+  const { returns, addReturn } = useReturns();
+  const [books, setBooks] = useState([]);
+  const [form, setForm] = useState({ bookId: '', customerPhone: '', reason: '' });
+  const [message, setMessage] = useState(null);
+
+  useEffect(() => {
+    getBooks(0, 100).then(res => setBooks(res.data.content)).catch(console.error);
+  }, []);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm(f => ({ ...f, [name]: value }));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const book = books.find(b => String(b.isbn) === String(form.bookId));
+    const bookTitle = book ? book.title : form.bookId;
+    addReturn(form.bookId, bookTitle, form.customerPhone, form.reason);
+    setMessage({ success: true, text: 'Retour enregistré avec succès !' });
+    setForm({ bookId: '', customerPhone: '', reason: '' });
+  }
+
+  return (
+    <main>
+      <h1>Gestion des retours</h1>
+
+      <section>
+        <h2>Enregistrer un retour</h2>
+        <form onSubmit={handleSubmit}>
+          <label>
+            Livre :
+            <select name="bookId" value={form.bookId} onChange={handleChange} required>
+              <option value="">-- Choisir un livre --</option>
+              {books.map(b => (
+                <option key={b.isbn} value={b.isbn}>{b.title} — {b.author}</option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Téléphone du client :
+            <input
+              name="customerPhone"
+              type="tel"
+              value={form.customerPhone}
+              onChange={handleChange}
+              placeholder="0612345678"
+              required
+            />
+          </label>
+          <label>
+            Motif :
+            <textarea
+              name="reason"
+              value={form.reason}
+              onChange={handleChange}
+              placeholder="Motif du retour..."
+              required
+            />
+          </label>
+          <button type="submit">Enregistrer le retour</button>
+        </form>
+        {message && <p style={{ color: message.success ? 'green' : 'red' }}>{message.text}</p>}
+      </section>
+
+      <section>
+        <h2>Historique des retours</h2>
+        {returns.length === 0 ? (
+          <p>Aucun retour enregistré.</p>
+        ) : (
+          <ul>
+            {returns.map(r => (
+              <li key={r.returnId}>
+                <strong>{r.bookTitle}</strong>
+                <br />
+                Client : {r.customerPhone}
+                <br />
+                Motif : {r.reason}
+                <br />
+                Statut : {r.status}
+                <br />
+                <small>{new Date(r.returnedAt).toLocaleDateString('fr-FR')}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </main>
+  );
+}

my-library/src/pages/Subscription.jsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { useSubscription } from '../context/SubscriptionContext';
+
+export default function Subscription() {
+  const { subscription, subscribe, cancelSubscription, PLANS } = useSubscription();
+  const [selectedPlan, setSelectedPlan] = useState('basic');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [message, setMessage] = useState(null);
+
+  function handleSubscribe(e) {
+    e.preventDefault();
+    subscribe(selectedPlan, phoneNumber);
+    setMessage({ success: true, text: 'Abonnement créé avec succès !' });
+    setPhoneNumber('');
+  }
+
+  function handleCancel() {
+    cancelSubscription();
+    setMessage({ success: false, text: 'Abonnement annulé.' });
+  }
+
+  return (
+    <main>
+      <h1>Mon abonnement</h1>
+
+      {subscription && subscription.status === 'ACTIVE' ? (
+        <section>
+          <h2>Abonnement actif</h2>
+          <p>Plan : <strong>{subscription.planName}</strong></p>
+          <p>Prix : <strong>{subscription.price} € / mois</strong></p>
+          <p>Téléphone : {subscription.phoneNumber}</p>
+          <p>Depuis le : {new Date(subscription.startDate).toLocaleDateString('fr-FR')}</p>
+          <p>Statut : <strong style={{ color: 'green' }}>{subscription.status}</strong></p>
+          <button onClick={handleCancel}>Annuler l'abonnement</button>
+        </section>
+      ) : (
+        <section>
+          <h2>Choisir un abonnement</h2>
+          <form onSubmit={handleSubscribe}>
+            <div>
+              {PLANS.map(plan => (
+                <label key={plan.id} style={{ display: 'block', marginBottom: '8px' }}>
+                  <input
+                    type="radio"
+                    name="plan"
+                    value={plan.id}
+                    checked={selectedPlan === plan.id}
+                    onChange={() => setSelectedPlan(plan.id)}
+                  />
+                  {' '}<strong>{plan.name}</strong> , {plan.price} € / mois , {plan.description}
+                </label>
+              ))}
+            </div>
+            <label>
+              Numéro de téléphone :
+              <input
+                type="tel"
+                value={phoneNumber}
+                onChange={e => setPhoneNumber(e.target.value)}
+                placeholder="0612345678"
+                required
+              />
+            </label>
+            <button type="submit">S'abonner</button>
+          </form>
+        </section>
+      )}
+
+      {message && (
+        <p style={{ color: message.success ? 'green' : 'red' }}>{message.text}</p>
+      )}
+    </main>
+  );
+}