From 65b9eed6dc0f72c0aef239b7aa573eee2fedcfcd Mon Sep 17 00:00:00 2001 From: AISSI-JUDE-CHRIST Date: Sun, 14 Jun 2026 20:45:13 +0200 Subject: [PATCH] Amelioration de linterface et corrections bugs --- my-library/src/context/LoanContext.js | 4 +- my-library/src/pages/Books.jsx | 22 +-- my-library/src/pages/Home.jsx | 23 ++- my-library/src/pages/Loans.jsx | 4 +- my-library/src/pages/Profile.jsx | 46 +++++- my-library/src/pages/Reservations.jsx | 12 +- my-library/src/styles/global.css | 196 ++++++++++++++++++++++++++ my-library/src/styles/navbar.css | 56 ++++++++ 8 files changed, 340 insertions(+), 23 deletions(-) diff --git a/my-library/src/context/LoanContext.js b/my-library/src/context/LoanContext.js index 08b8bb2..85e688b 100644 --- a/my-library/src/context/LoanContext.js +++ b/my-library/src/context/LoanContext.js @@ -8,13 +8,13 @@ export function LoanProvider({ children }) { return saved ? JSON.parse(saved) : []; }); - function addLoan(book, borrowerPhone, dueDate) { + function addLoan(book, borrowerUsername, dueDate) { const loan = { loanId: crypto.randomUUID(), bookId: book.isbn, bookTitle: book.title, bookAuthor: book.author, - borrowerPhone, + borrowerUsername, dueDate, status: 'ACTIVE', loanedAt: new Date().toISOString(), diff --git a/my-library/src/pages/Books.jsx b/my-library/src/pages/Books.jsx index e4d4115..43a2cfd 100644 --- a/my-library/src/pages/Books.jsx +++ b/my-library/src/pages/Books.jsx @@ -29,17 +29,21 @@ export default function Books() { return (
-

Catalogue

- {user?.role === 'admin' && + Ajouter un livre} - +
); } \ No newline at end of file diff --git a/my-library/src/pages/Home.jsx b/my-library/src/pages/Home.jsx index 09ca41a..3eff349 100644 --- a/my-library/src/pages/Home.jsx +++ b/my-library/src/pages/Home.jsx @@ -1,9 +1,28 @@ import { Link } from 'react-router-dom'; -import '../styles/home.css'; +import { useAuth } from '../context/AuthContext'; export default function Home() { + const { user } = useAuth(); + return (
+

Bienvenue sur Biblio

+

Gérez vos livres, réservations et abonnements depuis une seule interface.

+ +
+

Accès rapide

+
    +
  • 📚 Parcourir le catalogue
    • + {user?.role === 'user' &&
  • 🔖 Mes réservations
    • } + {user?.role === 'user' &&
  • 📖 Mes prêts
    • } + {user?.role === 'user' &&
  • ⭐ Mon abonnement
    • } + {user &&
  • 🛒 Passer une commande
    • } + {user &&
  • 👥 Commandes groupées
    • } + {user?.role === 'admin' &&
  • 👤 Gestion des clients
    • } + {user?.role === 'admin' &&
  • ↩️ Retours de livres
    • } + {!user &&
  • Connexion
    • } +
+
); -} \ No newline at end of file +} diff --git a/my-library/src/pages/Loans.jsx b/my-library/src/pages/Loans.jsx index 473d048..999ef87 100644 --- a/my-library/src/pages/Loans.jsx +++ b/my-library/src/pages/Loans.jsx @@ -20,7 +20,7 @@ export default function Loans() {
  • {l.bookTitle} — {l.bookAuthor}
    - Prêté à : {l.borrowerPhone} + Emprunteur : {l.borrowerUsername}
    À rendre avant le : {new Date(l.dueDate).toLocaleDateString('fr-FR')}
    @@ -41,7 +41,7 @@ export default function Loans() {
  • {l.bookTitle} — {l.bookAuthor}
    - Prêté à : {l.borrowerPhone} + Emprunteur : {l.borrowerUsername}
    Rendu ✓
    • diff --git a/my-library/src/pages/Profile.jsx b/my-library/src/pages/Profile.jsx index 581f560..42e77b6 100644 --- a/my-library/src/pages/Profile.jsx +++ b/my-library/src/pages/Profile.jsx @@ -1,3 +1,45 @@ +import { useAuth } from '../context/AuthContext'; +import { useReservations } from '../context/ReservationContext'; +import { useLoans } from '../context/LoanContext'; +import { useSubscription } from '../context/SubscriptionContext'; + export default function Profile() { - return

    Mon compte

    ; -} \ No newline at end of file + 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 ( +
    +

    Mon compte

    + +
    +

    Informations

    +

    Nom d'utilisateur : {user?.username}

    +

    Rôle : {user?.role === 'admin' ? 'Administrateur' : 'Utilisateur'}

    +
    + + {user?.role === 'user' && ( + <> +
    +

    Abonnement

    + {subscription ? ( +

    Plan actif : {subscription.planName}

    + ) : ( +

    Aucun abonnement actif.

    + )} +
    + +
    +

    Activité

    +

    Réservations en cours : {activeReservations.length}

    +

    Prêts en cours : {activeLoans.length}

    +
    + + )} +
    + ); +} diff --git a/my-library/src/pages/Reservations.jsx b/my-library/src/pages/Reservations.jsx index b66f0f0..a8d3bca 100644 --- a/my-library/src/pages/Reservations.jsx +++ b/my-library/src/pages/Reservations.jsx @@ -21,7 +21,7 @@ export default function Reservations() { const form = loanForms[reservation.reservationId] || {}; addLoan( { isbn: reservation.bookId, title: reservation.bookTitle, author: reservation.bookAuthor }, - form.borrowerPhone, + form.borrowerUsername, form.dueDate ); setLoanStatuses(prev => ({ ...prev, [reservation.reservationId]: 'Prêt enregistré avec succès !' })); @@ -58,12 +58,12 @@ export default function Reservations() { Prêter ce livre à un autre lecteur
    handleLoan(e, r)}> diff --git a/my-library/src/styles/global.css b/my-library/src/styles/global.css index e69de29..e1a7c34 100644 --- a/my-library/src/styles/global.css +++ b/my-library/src/styles/global.css @@ -0,0 +1,196 @@ +*, *::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; +} diff --git a/my-library/src/styles/navbar.css b/my-library/src/styles/navbar.css index e69de29..36eebec 100644 --- a/my-library/src/styles/navbar.css +++ b/my-library/src/styles/navbar.css @@ -0,0 +1,56 @@ +.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; +}