feat(front): promoCode validation + estimation du total via API

my-library/src/App.jsx

@@ -12,8 +12,6 @@ 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 }) {
@@ -43,8 +41,6 @@ export default function App() {
         <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

@@ -21,8 +21,6 @@ export default function Navbar() {
         {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

@@ -1,59 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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, borrowerUsername, dueDate) {
-    const loan = {
-      loanId: crypto.randomUUID(),
-      bookId: book.isbn,
-      bookTitle: book.title,
-      bookAuthor: book.author,
-      borrowerUsername,
-      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/index.js

@@ -6,8 +6,6 @@ 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';
 
@@ -20,11 +18,7 @@ root.render(
           <ReviewProvider>
             <ReturnProvider>
               <SubscriptionProvider>
-                <LoanProvider>
-                  <GroupOrderProvider>
                 <App />
-                  </GroupOrderProvider>
-                </LoanProvider>
               </SubscriptionProvider>
             </ReturnProvider>
           </ReviewProvider>

my-library/src/pages/Books.jsx

@@ -29,21 +29,17 @@ export default function Books() {
 
   return (
     <main>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }}>
-        <h1 style={{ margin: 0 }}>Catalogue</h1>
+      <h1>Catalogue</h1>
       {user?.role === 'admin' && <Link to="/books/new">+ Ajouter un livre</Link>}
-      </div>
-      <div className="card-grid">
+      <ul>
         {books.map((book) => (
-          <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>
+          <li key={book.isbn}>
+            <Link to={`/books/${book.isbn}`}>
+              <strong>{book.title}</strong> - {book.author}
             </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </main>
   );
 }

my-library/src/pages/GroupOrders.jsx

@@ -1,167 +0,0 @@
-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/Home.jsx

@@ -1,28 +1,9 @@
 import { Link } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import '../styles/home.css';
 
 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

@@ -1,54 +0,0 @@
-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 />
-                Emprunteur : {l.borrowerUsername}
-                <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 />
-                Emprunteur : {l.borrowerUsername}
-                <br />
-                <small>Rendu ✓</small>
-              </li>
-            ))}
-          </ul>
-        </section>
-      )}
-    </main>
-  );
-}

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,45 +1,3 @@
-import { useAuth } from '../context/AuthContext';
-import { useReservations } from '../context/ReservationContext';
-import { useLoans } from '../context/LoanContext';
-import { useSubscription } from '../context/SubscriptionContext';
-
 export default function Profile() {
-  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>
-  );
+  return <main><h1>Mon compte</h1></main>;
 }

my-library/src/pages/Reservations.jsx

@@ -1,32 +1,8 @@
-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.borrowerUsername,
-      form.dueDate
-    );
-    setLoanStatuses(prev => ({ ...prev, [reservation.reservationId]: 'Prêt enregistré avec succès !' }));
-    setLoanForms(prev => ({ ...prev, [reservation.reservationId]: {} }));
-  }
 
   if (reservations.length === 0) {
     return (
@@ -53,36 +29,6 @@ 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>
-                  Identifiant de l'emprunteur :
-                  <input
-                    type="text"
-                    value={loanForms[r.reservationId]?.borrowerUsername || ''}
-                    onChange={e => handleLoanChange(r.reservationId, 'borrowerUsername', e.target.value)}
-                    placeholder="ex: alice"
-                    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/styles/global.css

@@ -1,196 +0,0 @@
-*, *::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

@@ -1,56 +0,0 @@
-.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;
-}