Commandes groupées

my-library/src/App.jsx

@@ -11,6 +11,9 @@ 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 GroupOrders from './pages/GroupOrders';
 import { useAuth } from './context/AuthContext';
 
 function RequireAuth({ children }) {
@@ -39,6 +42,9 @@ export default function App() {
         <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="group-orders" element={<RequireAuth><GroupOrders /></RequireAuth>} />
         <Route path="*" element={<NotFound />} />
       </Route>
     </Routes>

my-library/src/components/Navbar.jsx

@@ -20,6 +20,9 @@ export default function Navbar() {
         <li><Link to="/books">Catalogue</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="/group-orders">Commandes groupées</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>}

my-library/src/context/GroupOrderContext.js

@@ -0,0 +1,59 @@
+import { createContext, useContext, useState } from 'react';
+
+const GroupOrderContext = createContext(null);
+
+export function GroupOrderProvider({ children }) {
+  const [groups, setGroups] = useState(() => {
+    const saved = localStorage.getItem('groupOrders');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  function createGroup(creatorPhone) {
+    const group = {
+      id: crypto.randomUUID(),
+      creatorPhone,
+      orders: [],
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+    };
+    const updated = [...groups, group];
+    setGroups(updated);
+    localStorage.setItem('groupOrders', JSON.stringify(updated));
+    return group;
+  }
+
+  function addOrderToGroup(groupId, phoneNumber, bookId, bookTitle, quantity) {
+    const updated = groups.map(g => {
+      if (g.id !== groupId) return g;
+      const order = {
+        orderId: crypto.randomUUID(),
+        phoneNumber,
+        bookId,
+        bookTitle,
+        quantity: Number(quantity),
+        addedAt: new Date().toISOString(),
+      };
+      return { ...g, orders: [...g.orders, order] };
+    });
+    setGroups(updated);
+    localStorage.setItem('groupOrders', JSON.stringify(updated));
+  }
+
+  function closeGroup(groupId) {
+    const updated = groups.map(g =>
+      g.id === groupId ? { ...g, status: 'CLOSED' } : g
+    );
+    setGroups(updated);
+    localStorage.setItem('groupOrders', JSON.stringify(updated));
+  }
+
+  return (
+    <GroupOrderContext.Provider value={{ groups, createGroup, addOrderToGroup, closeGroup }}>
+      {children}
+    </GroupOrderContext.Provider>
+  );
+}
+
+export function useGroupOrders() {
+  return useContext(GroupOrderContext);
+}

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/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

@@ -5,6 +5,9 @@ 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 { GroupOrderProvider } from './context/GroupOrderContext';
 import App from './App';
 import './styles/global.css';
 
@@ -16,7 +19,13 @@ root.render(
         <ReservationProvider>
           <ReviewProvider>
             <ReturnProvider>
+              <SubscriptionProvider>
+                <LoanProvider>
+                  <GroupOrderProvider>
                     <App />
+                  </GroupOrderProvider>
+                </LoanProvider>
+              </SubscriptionProvider>
             </ReturnProvider>
           </ReviewProvider>
         </ReservationProvider>

my-library/src/pages/BookDetail.jsx

@@ -4,10 +4,12 @@ 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 { addReservation } = useReservations();
+  const { subscription } = useSubscription();
+  const { addReservation, reservations } = useReservations();
   const { addReview, getReviewsByBook } = useReviews();
   const [rating, setRating] = useState(5);
   const [comment, setComment] = useState('');
@@ -97,8 +99,37 @@ export default function BookDetail() {
         )}
       </section>
 
-      {user?.role === 'user' && <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 :
@@ -117,7 +148,11 @@ export default function BookDetail() {
                     {reservationStatus.message}
                   </p>
                 )}
-      </section>}
+              </>
+            );
+          })()}
+        </section>
+      )}
     </main>
   );
 }

my-library/src/pages/GroupOrders.jsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { useGroupOrders } from '../context/GroupOrderContext';
+import { useAuth } from '../context/AuthContext';
+
+export default function GroupOrders() {
+  const { groups, createGroup, addOrderToGroup, closeGroup } = useGroupOrders();
+  const { user } = useAuth();
+
+  const [creatorPhone, setCreatorPhone] = useState('');
+  const [joinGroupId, setJoinGroupId] = useState('');
+  const [joinForm, setJoinForm] = useState({ phoneNumber: '', bookId: '', bookTitle: '', quantity: 1 });
+  const [joinStatus, setJoinStatus] = useState({});
+  const [createStatus, setCreateStatus] = useState(null);
+
+  function handleCreateGroup(e) {
+    e.preventDefault();
+    const group = createGroup(creatorPhone);
+    setCreateStatus(`Groupe créé ! ID : ${group.id}`);
+    setCreatorPhone('');
+  }
+
+  function handleJoinGroup(e) {
+    e.preventDefault();
+    const group = groups.find(g => g.id === joinGroupId);
+    if (!group) {
+      setJoinStatus(prev => ({ ...prev, [joinGroupId]: 'Groupe introuvable.' }));
+      return;
+    }
+    if (group.status === 'CLOSED') {
+      setJoinStatus(prev => ({ ...prev, [joinGroupId]: 'Ce groupe est fermé.' }));
+      return;
+    }
+    addOrderToGroup(joinGroupId, joinForm.phoneNumber, joinForm.bookId, joinForm.bookTitle, joinForm.quantity);
+    setJoinStatus(prev => ({ ...prev, [joinGroupId]: 'Commande ajoutée au groupe !' }));
+    setJoinForm({ phoneNumber: '', bookId: '', bookTitle: '', quantity: 1 });
+  }
+
+  const openGroups = groups.filter(g => g.status === 'OPEN');
+  const closedGroups = groups.filter(g => g.status === 'CLOSED');
+
+  return (
+    <main>
+      <h1>Commandes groupées</h1>
+
+      <section>
+        <h2>Créer un groupe</h2>
+        <form onSubmit={handleCreateGroup}>
+          <label>
+            Votre téléphone :
+            <input
+              type="tel"
+              value={creatorPhone}
+              onChange={e => setCreatorPhone(e.target.value)}
+              placeholder="0612345678"
+              required
+            />
+          </label>
+          <button type="submit">Créer un groupe</button>
+        </form>
+        {createStatus && <p style={{ color: 'green' }}>{createStatus}</p>}
+      </section>
+
+      <section>
+        <h2>Rejoindre un groupe</h2>
+        <form onSubmit={handleJoinGroup}>
+          <label>
+            ID du groupe :
+            <input
+              value={joinGroupId}
+              onChange={e => setJoinGroupId(e.target.value)}
+              placeholder="Collez l'ID du groupe ici"
+              required
+            />
+          </label>
+          <label>
+            Votre téléphone :
+            <input
+              type="tel"
+              value={joinForm.phoneNumber}
+              onChange={e => setJoinForm(prev => ({ ...prev, phoneNumber: e.target.value }))}
+              placeholder="0612345678"
+              required
+            />
+          </label>
+          <label>
+            ISBN du livre :
+            <input
+              value={joinForm.bookId}
+              onChange={e => setJoinForm(prev => ({ ...prev, bookId: e.target.value }))}
+              placeholder="9782070361038"
+              required
+            />
+          </label>
+          <label>
+            Titre du livre :
+            <input
+              value={joinForm.bookTitle}
+              onChange={e => setJoinForm(prev => ({ ...prev, bookTitle: e.target.value }))}
+              placeholder="Nom du livre"
+              required
+            />
+          </label>
+          <label>
+            Quantité :
+            <input
+              type="number"
+              min="1"
+              value={joinForm.quantity}
+              onChange={e => setJoinForm(prev => ({ ...prev, quantity: e.target.value }))}
+              required
+            />
+          </label>
+          <button type="submit">Rejoindre</button>
+        </form>
+        {joinStatus[joinGroupId] && (
+          <p style={{ color: joinStatus[joinGroupId].includes('introuvable') || joinStatus[joinGroupId].includes('fermé') ? 'red' : 'green' }}>
+            {joinStatus[joinGroupId]}
+          </p>
+        )}
+      </section>
+
+      <section>
+        <h2>Groupes ouverts ({openGroups.length})</h2>
+        {openGroups.length === 0 ? (
+          <p>Aucun groupe ouvert.</p>
+        ) : (
+          <ul>
+            {openGroups.map(g => (
+              <li key={g.id}>
+                <strong>Groupe {g.id.slice(0, 8)}…</strong>
+                <br />
+                Créé par : {g.creatorPhone}
+                <br />
+                Créé le : {new Date(g.createdAt).toLocaleDateString('fr-FR')}
+                <br />
+                Participants : {g.orders.length}
+                {g.orders.length > 0 && (
+                  <ul>
+                    {g.orders.map(o => (
+                      <li key={o.orderId}>
+                        {o.phoneNumber} , {o.bookTitle} (x{o.quantity})
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                <button onClick={() => closeGroup(g.id)}>Fermer le groupe</button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {closedGroups.length > 0 && (
+        <section>
+          <h2>Groupes fermés ({closedGroups.length})</h2>
+          <ul>
+            {closedGroups.map(g => (
+              <li key={g.id}>
+                <strong>Groupe {g.id.slice(0, 8)}…</strong> , {g.orders.length} commande(s) , <small>Fermé ✓</small>
+              </li>
+            ))}
+          </ul>
+        </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/Reservations.jsx

@@ -1,8 +1,32 @@
+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 (
@@ -29,6 +53,36 @@ export default function Reservations() {
             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>

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