/* ========================================================================== Aurelia Books - Shared UI Components (Light Mode Standard E-Commerce) Header, Footer, Pagination, BookCard, CartDrawer, AuthModal, DemoModal, Toast, StatusBadge ========================================================================== */ (function () { const { useState, useEffect, useCallback, useRef, useContext, useMemo } = React; /* ══════════════════════════════════════════════════════════════════════ LOADING SPINNER ══════════════════════════════════════════════════════════════════════ */ function LoadingSpinner({ size = 'md', text }) { const sizeMap = { sm: 'w-5 h-5', md: 'w-8 h-8', lg: 'w-12 h-12' }; return (
{text && {text}}
); } /* ══════════════════════════════════════════════════════════════════════ GENERIC MODAL ══════════════════════════════════════════════════════════════════════ */ function Modal({ isOpen, onClose, title, maxWidth = 'max-w-md', children }) { if (!isOpen) return null; return (
{ if (e.target === e.currentTarget) onClose(); }}>
{title && (

{title}

)} {children}
); } /* ══════════════════════════════════════════════════════════════════════ DEMO ACCOUNTS PORTFOLIO MODAL & FLOATING BADGE ══════════════════════════════════════════════════════════════════════ */ function DemoAccountModal({ isOpen, onClose }) { const { setUser, showToast, fetchCart } = window.useApp(); const [loadingRole, setLoadingRole] = useState(null); if (!isOpen) return null; const handleOneClickLogin = async (email, password, roleName) => { setLoadingRole(roleName); try { const res = await ApiClient.login(email, password); setUser(res.data.user); showToast(`Signed in successfully as ${res.data.user.fullName} (${roleName})!`, 'success'); fetchCart(); onClose(); } catch (err) { showToast(err.message || 'Login failed', 'error'); } finally { setLoadingRole(null); } }; return (
{ if (e.target === e.currentTarget) onClose(); }}>
{/* Header */}
Portfolio & Demo Preview Mode

Explore Aurelia Books Demo Accounts

Welcome to the portfolio live demo! Click below to automatically sign in as an Administrator or Customer to test full functionality.

{/* Accounts Cards */}
{/* Admin Account Card */}
Admin Role

System Administrator

admin@bookstore.com

Password: Admin@123456

Access full Admin Portal, Revenue Charts, Books CRUD & Orders.

{/* Customer Account Card */}
Customer Role

John Alexander

customer@example.com

Password: Password@123

Test Cart, Checkout, Address Selector, Coupons & Order History.

{/* Swagger API Docs Banner */}

OpenAPI 3.0 / Swagger Interactive API Docs

REST API

Inspect 30+ backend endpoints for Spring Security JWT, Book Filtering, Orders, & Admin Dashboard.

Explore Swagger UI
); } function DemoFloatingBadge({ onOpenDemoModal }) { const { user } = window.useApp(); return (
); } /* ══════════════════════════════════════════════════════════════════════ CONFIRM DIALOG ══════════════════════════════════════════════════════════════════════ */ function ConfirmDialog({ isOpen, onClose, onConfirm, title, message }) { if (!isOpen) return null; return (
{ if (e.target === e.currentTarget) onClose(); }}>

{title || 'Confirm Action'}

{message || 'Are you sure you want to proceed with this action?'}

); } /* ══════════════════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════════════════ */ function Pagination({ currentPage, totalPages, totalElements, onPageChange }) { if (!totalPages || totalPages <= 1) return null; const pages = []; const maxVisible = 5; let start = Math.max(0, currentPage - Math.floor(maxVisible / 2)); let end = Math.min(totalPages - 1, start + maxVisible - 1); start = Math.max(0, end - maxVisible + 1); if (start > 0) pages.push(0); if (start > 1) pages.push('..._start'); for (let i = start; i <= end; i++) pages.push(i); if (end < totalPages - 2) pages.push('..._end'); if (end < totalPages - 1) pages.push(totalPages - 1); return (
Page {currentPage + 1} of {totalPages} {totalElements != null && — {totalElements} Total Titles}
{pages.map((p, i) => typeof p === 'string' ? ( … ) : ( ) )}
); } /* ══════════════════════════════════════════════════════════════════════ BOOK CARD ══════════════════════════════════════════════════════════════════════ */ function BookCard({ book, onAddToCart, onViewDetail }) { const formatCurrency = window.formatCurrency; const hasDiscount = book.discountPrice && Number(book.discountPrice) < Number(book.price); const discountPercent = hasDiscount ? Math.round((1 - Number(book.discountPrice) / Number(book.price)) * 100) : 0; return (
{/* Cover Image Container */}
onViewDetail && onViewDetail(book)}> {book.title} {/* Wishlist Button Top Right */}
{/* Discount Badge */} {hasDiscount && ( Save {discountPercent}% )} {/* Average Rating Badge */}
{book.averageRating || '4.9'}
{/* Info */}
{book.categoryName || 'Literature'}

onViewDetail && onViewDetail(book)}> {book.title}

By {book.authorNames ? book.authorNames.join(', ') : 'Unknown Author'}

{formatCurrency(book.discountPrice || book.price)} {hasDiscount && ( {formatCurrency(book.price)} )}
); } /* ══════════════════════════════════════════════════════════════════════ TOAST CONTAINER ══════════════════════════════════════════════════════════════════════ */ function ToastContainer() { const { toasts } = window.useApp(); return (
{toasts.map(t => (
{t.message}
))}
); } /* ══════════════════════════════════════════════════════════════════════ HEADER / NAVBAR WITH STOREFRONT LINKS ══════════════════════════════════════════════════════════════════════ */ function Header({ onOpenDemoModal }) { const { navigate, currentPath } = window.useRouter(); const { user, cart, setIsCartOpen, setIsAuthOpen, setAuthMode, handleLogout, searchQuery, setSearchQuery } = window.useApp(); const [isMenuOpen, setIsMenuOpen] = useState(false); return ( ); } /* ══════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════ */ function Footer() { return ( ); } /* ══════════════════════════════════════════════════════════════════════ CART DRAWER ══════════════════════════════════════════════════════════════════════ */ function CartDrawer() { const { navigate } = window.useRouter(); const { cart, isCartOpen, setIsCartOpen, handleUpdateCartQty, handleRemoveCartItem, showToast } = window.useApp(); const formatCurrency = window.formatCurrency; if (!isCartOpen) return null; const handleCheckout = () => { if (!cart || !cart.items || cart.items.length === 0) { showToast('Your shopping cart is empty!', 'error'); return; } setIsCartOpen(false); navigate('/checkout'); }; return (
setIsCartOpen(false)}>

Your Shopping Cart

{!cart || !cart.items || cart.items.length === 0 ? (

Your shopping cart is empty.

) : ( cart.items.map(item => (

{item.bookTitle}

{formatCurrency(item.unitPrice)}
{item.quantity}
)) )}
{cart && cart.items && cart.items.length > 0 && (
Subtotal ({cart.totalItems} items): {formatCurrency(cart.totalPrice)}
)}
); } /* ══════════════════════════════════════════════════════════════════════ AUTH MODAL ══════════════════════════════════════════════════════════════════════ */ function AuthModal() { const { isAuthOpen, setIsAuthOpen, authMode, setAuthMode, showToast, setUser, fetchCart } = window.useApp(); if (!isAuthOpen) return null; const handleSubmit = async (e) => { e.preventDefault(); const email = e.target.email.value; const password = e.target.password.value; try { if (authMode === 'login') { const res = await ApiClient.login(email, password); setUser(res.data.user); showToast('Welcome back! Signed in successfully.', 'success'); setIsAuthOpen(false); fetchCart(); } else { const fullName = e.target.fullName.value; const phone = e.target.phone.value; await ApiClient.register({ fullName, email, password, phone }); showToast('Account created successfully! Please sign in.', 'success'); setAuthMode('login'); } } catch (err) { showToast(err.message, 'error'); } }; return (
{ if (e.target === e.currentTarget) setIsAuthOpen(false); }}>

{authMode === 'login' ? 'Sign In to Aurelia Books' : 'Create Your Reader Account'}

Unlock member perks and order tracking

{authMode === 'register' && ( <>
)}
{authMode === 'login' ? "Don't have an account?" : "Already registered?"}
); } /* ══════════════════════════════════════════════════════════════════════ STATUS BADGE ══════════════════════════════════════════════════════════════════════ */ function StatusBadge({ status }) { const colors = { PENDING: 'bg-amber-100 text-amber-800 border-amber-300', CONFIRMED: 'bg-blue-100 text-blue-800 border-blue-300', PROCESSING: 'bg-indigo-100 text-indigo-800 border-indigo-300', SHIPPING: 'bg-purple-100 text-purple-800 border-purple-300', DELIVERED: 'bg-emerald-100 text-emerald-800 border-emerald-300', CANCELLED: 'bg-rose-100 text-rose-800 border-rose-300', }; return ( {status} ); } /* ══════════════════════════════════════════════════════════════════════ WISHLIST BUTTON ══════════════════════════════════════════════════════════════════════ */ function WishlistButton({ bookId }) { const { user, showToast, setIsAuthOpen } = window.useApp(); const [isLiked, setIsLiked] = useState(false); useEffect(() => { if (!user) return; ApiClient.getWishlist() .then(res => { if (res && res.data && res.data.content) { const exists = res.data.content.some(item => item.bookId == bookId || item.id == bookId); setIsLiked(exists); } }) .catch(() => {}); }, [user, bookId]); const handleToggle = async (e) => { e.stopPropagation(); if (!user) { setIsAuthOpen(true); return; } try { if (isLiked) { await ApiClient.removeFromWishlist(bookId); setIsLiked(false); showToast('Removed from Wishlist', 'info'); } else { await ApiClient.addToWishlist(bookId); setIsLiked(true); showToast('Added to Wishlist!', 'success'); } } catch (err) { showToast(err.message || 'Wishlist action failed', 'error'); } }; return ( ); } /* ── Export ──────────────────────────────────────────────────────────── */ Object.assign(window, { LoadingSpinner, Modal, ConfirmDialog, Pagination, BookCard, ToastContainer, Header, Footer, CartDrawer, AuthModal, StatusBadge, DemoAccountModal, DemoFloatingBadge }); })();