Gérer les retours de livres par l'admin

2026-06-13 01:11:27 +02:00
parent 8359f21e07
commit 587e81816c
5 changed files with 139 additions and 1 deletions
@@ -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>
+  );
+}