Gérer les retours de livres par l'admin

my-library/src/App.jsx

@@ -10,6 +10,7 @@ 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 { useAuth } from './context/AuthContext';
 
 function RequireAuth({ children }) {
@@ -37,6 +38,7 @@ export default function App() {
         <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="*" element={<NotFound />} />
       </Route>
     </Routes>

my-library/src/components/Navbar.jsx

@@ -22,6 +22,7 @@ export default function Navbar() {
         {user?.role === 'user' && <li><Link to="/reservations">Mes réservations</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">

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/index.js

@@ -3,6 +3,8 @@ 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 App from './App';
 import './styles/global.css';
 
@@ -12,7 +14,11 @@ root.render(
     <BrowserRouter>
       <AuthProvider>
         <ReservationProvider>
+          <ReviewProvider>
+            <ReturnProvider>
               <App />
+            </ReturnProvider>
+          </ReviewProvider>
         </ReservationProvider>
       </AuthProvider>
     </BrowserRouter>

my-library/src/pages/BookDetail.jsx

@@ -3,10 +3,15 @@ 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';
 
 export default function BookDetail() {
   const { user } = useAuth();
   const { addReservation } = 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);
@@ -23,6 +28,14 @@ export default function BookDetail() {
     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>;
 
@@ -40,6 +53,50 @@ export default function BookDetail() {
       <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>
         <form onSubmit={handleReservation}>

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>
+  );
+}