{ "app_name": "Library Management System", "pages": [ { "page_id": "public_catalog", "page_title": "Library Catalog", "route_path": "/", "route_params": [], "image_indices": [], "description": "Public landing page and book catalog. Displays a hero section with library branding, a prominent search bar for searching books by title/author/ISBN/keyword, category browse chips/tags, 'New Arrivals' carousel (books added in last 30 days), 'Popular Books' section (most borrowed in last 90 days). Search results appear below with pagination (20 per page), sortable by title, author, publication date, or relevance. Each book card shows cover image, title, author(s), category badges, and availability indicator. Advanced search filters panel (collapsible) with fields: author, category, publication year range, language. Navigation header includes Login/Register buttons for guests, or user avatar dropdown for authenticated users. Footer shows library info and policies.", "navigates_to": [ "login", "register", "book_detail", "member_dashboard", "librarian_dashboard", "admin_dashboard" ] }, { "page_id": "login", "page_title": "Login", "route_path": "/login", "route_params": [], "image_indices": [], "description": "Login page with email and password fields, 'Remember Me' checkbox, 'Login' submit button, 'Forgot Password?' link that opens a modal with email input to request password reset, and a 'Register' link for new members. Displays inline validation errors for invalid email format or empty fields. Shows error alert for failed login attempts and account lockout message after 5 failed attempts.", "navigates_to": [ "public_catalog", "register", "member_dashboard", "librarian_dashboard", "admin_dashboard" ] }, { "page_id": "register", "page_title": "Member Registration", "route_path": "/register", "route_params": [], "image_indices": [], "description": "Registration form for new library members. Fields: full name, email, password, confirm password, phone number, date of birth, address (street, city, state, zip). Inline validation for email format/uniqueness, password complexity (min 8 chars, uppercase, lowercase, number), age requirement (13+), required fields. Submit button creates account with 'Pending' status. Success state shows confirmation message with generated membership number and instructions to wait for librarian approval. Link back to login page.", "navigates_to": [ "login", "public_catalog" ] }, { "page_id": "book_detail", "page_title": "Book Details", "route_path": "/books/:bookId", "route_params": [ "bookId" ], "image_indices": [], "description": "Comprehensive book detail page showing: cover image, title, author(s) (clickable to see all books by author), ISBN, publisher, publication date, edition, pages, language, description, categories (clickable). Availability section showing total copies, available copies count, and a table of copies with columns: Barcode, Branch, Condition, Status, Expected Return Date (for checked out copies). Number of active reservations displayed. Action buttons: 'Borrow' (for available copies, members only), 'Reserve' (when all copies unavailable, members only). Reserve button shows queue position after reservation. 'Recommended for You' section at bottom for logged-in members based on borrowing history.", "navigates_to": [ "public_catalog", "author_books" ] }, { "page_id": "author_books", "page_title": "Author Books", "route_path": "/authors/:authorId", "route_params": [ "authorId" ], "image_indices": [], "description": "Author profile page showing author name, biography, birth date, nationality, and a grid/list of all books by this author. Each book card links to book detail. Pagination if many books.", "navigates_to": [ "book_detail", "public_catalog" ] }, { "page_id": "member_dashboard", "page_title": "My Dashboard", "route_path": "/dashboard", "route_params": [], "image_indices": [], "description": "Member dashboard showing personalized overview. Stat cards at top: Active Loans count, Active Reservations count, Outstanding Fines total amount, Books Read (lifetime). Section 1: 'Current Loans' table with columns: Book Title, Barcode, Checkout Date, Due Date, Status (with color-coded due date indicators - green for >3 days, yellow for 1-3 days, red for overdue). Row actions: 'Renew' button (disabled if ineligible with tooltip showing reason). Section 2: 'Active Reservations' table with columns: Book Title, Reservation Date, Queue Position, Status, Estimated Wait. Row action: 'Cancel' button. Section 3: 'Outstanding Fines' summary card showing total balance with 'Pay Now' button that opens a modal for payment (select fines, choose payment method: cash/card/online, amount field for partial payments). Section 4: 'Recommended for You' book carousel. Quick action buttons: 'Search Catalog', 'View History', 'My Profile'.", "navigates_to": [ "public_catalog", "member_history", "member_profile", "book_detail" ] }, { "page_id": "member_history", "page_title": "Borrowing History", "route_path": "/dashboard/history", "route_params": [], "image_indices": [], "description": "Member's complete borrowing history page. Table with columns: Book Title, Author, Barcode, Checkout Date, Due Date, Return Date, Status (Returned/Overdue/Active), Fines. Filters: date range picker, status dropdown (All/Active/Returned/Overdue). Pagination with 20 items per page. Also includes a 'Payment History' tab showing payments table with columns: Transaction ID, Date, Amount, Payment Method, Fines Covered, Receipt link.", "navigates_to": [ "member_dashboard", "book_detail" ] }, { "page_id": "member_profile", "page_title": "My Profile", "route_path": "/dashboard/profile", "route_params": [], "image_indices": [], "description": "Member profile page displaying membership number, join date, membership status badge (Active/Suspended/Expired), and editable form fields: full name (read-only), email, phone number, address. 'Change Password' section with current password, new password, confirm new password fields. 'Save Changes' button with success toast on update. Borrowing statistics summary: total books borrowed, current active loans, total fines paid.", "navigates_to": [ "member_dashboard" ] }, { "page_id": "librarian_dashboard", "page_title": "Librarian Dashboard", "route_path": "/staff/dashboard", "route_params": [], "image_indices": [], "description": "Librarian operational dashboard. Top stat cards: Books Checked Out Today, Returns Today, Overdue Books, Pending Reservations, New Members (this week). Quick action buttons: 'Checkout Book', 'Return Book', 'Register Member'. Clicking 'Checkout Book' opens a modal with member search (by name/email/membership number), book copy barcode input, eligibility verification display (member status, fine balance, current loan count), and 'Confirm Checkout' button showing due date. Clicking 'Return Book' opens a modal with barcode scanner input, displays loan details, overdue calculation, condition assessment dropdown (New/Good/Fair/Poor/Damaged), optional damage fine input, and 'Confirm Return' button. Section: 'Overdue Books' table with columns: Book Title, Member Name, Due Date, Days Overdue, Fine Accrued. Section: 'Pending Reservations Ready for Pickup' table with columns: Book Title, Member Name, Notification Date, Expires At, Action (Fulfill/Cancel).", "navigates_to": [ "book_management", "member_management", "circulation_manage", "reservations_manage", "fines_management", "reports" ] }, { "page_id": "book_management", "page_title": "Book Management", "route_path": "/staff/books", "route_params": [], "image_indices": [], "description": "Librarian book catalog management page. Search bar and filters (category, author, status, branch). Table with columns: Title, ISBN, Author(s), Category, Total Copies, Available Copies, Status (Active/Inactive), Actions. Actions column has Edit and Deactivate buttons. 'Add Book' button opens a modal/drawer with form fields: ISBN (with format validation), title, description, publisher, publication date, edition, pages, language, cover image upload, author multi-select (with option to add new author inline), category multi-select. After adding a book, 'Manage Copies' section appears. 'Manage Copies' button on each row opens a drawer showing copies table: Barcode (auto-generated), Branch (dropdown), Condition (dropdown: New/Good/Fair/Poor/Damaged), Status (Available/Checked Out/Reserved/In Repair/Lost), with Add Copy and Edit/Delete actions. Pagination for book list.", "navigates_to": [ "librarian_dashboard", "author_management", "category_management" ] }, { "page_id": "author_management", "page_title": "Author Management", "route_path": "/staff/authors", "route_params": [], "image_indices": [], "description": "Author management page for librarians. Table with columns: Name, Nationality, Birth Date, Books Count, Actions (Edit/Delete). 'Add Author' button opens modal with fields: name, biography (textarea), birth date, nationality. Edit opens same modal pre-filled. Delete shows confirmation with warning if author has associated books (deletion prevented). Search bar to filter authors by name.", "navigates_to": [ "librarian_dashboard", "book_management" ] }, { "page_id": "category_management", "page_title": "Category Management", "route_path": "/staff/categories", "route_params": [], "image_indices": [], "description": "Category management page for librarians. Displays categories in a tree/hierarchical list showing parent-child relationships. Each category shows: name, parent category, book count. Actions: Edit, Delete (prevented if category has books). 'Add Category' button opens modal with fields: name, description, parent category dropdown (for hierarchical support). Edit opens same modal pre-filled.", "navigates_to": [ "librarian_dashboard", "book_management" ] }, { "page_id": "member_management", "page_title": "Member Management", "route_path": "/staff/members", "route_params": [], "image_indices": [], "description": "Librarian member management page. Search bar (by name, email, phone, membership number). Filters: status (Active/Pending/Suspended/Expired/Cancelled), branch. Table with columns: Membership #, Full Name, Email, Phone, Join Date, Status (color-coded badge), Outstanding Fines, Actions. Actions: View Details, Edit, Approve (for Pending), Suspend, Activate. Clicking 'View Details' opens a drawer/panel showing full member profile, current loans table, reservation list, fine history, activity timeline, and borrowing statistics. Edit opens modal with editable fields. Approve button for pending members changes status to Active.", "navigates_to": [ "librarian_dashboard" ] }, { "page_id": "circulation_manage", "page_title": "Circulation Management", "route_path": "/staff/circulation", "route_params": [], "image_indices": [], "description": "Circulation management page for librarians. Tabs: 'Active Loans', 'Overdue', 'Returned Today'. Active Loans tab: table with columns: Loan ID, Book Title, Barcode, Member Name, Checkout Date, Due Date, Renewals Used, Actions (Return, Renew). Overdue tab: table with columns: Loan ID, Book Title, Member Name, Member Email, Due Date, Days Overdue, Fine Amount, Actions (Return, Contact Member). Returned Today tab: table with columns: Loan ID, Book Title, Member Name, Return Date, Condition, Fine Applied. Search/filter by member name, book title, date range. Bulk actions for sending overdue notifications.", "navigates_to": [ "librarian_dashboard" ] }, { "page_id": "reservations_manage", "page_title": "Reservations Management", "route_path": "/staff/reservations", "route_params": [], "image_indices": [], "description": "Reservation management page for librarians. Tabs: 'Pending', 'Ready for Pickup', 'Expired', 'All'. Table columns: Reservation ID, Book Title, Member Name, Reservation Date, Queue Position, Status (Pending/Ready/Expired/Cancelled/Fulfilled), Expiration Date, Actions. Actions: Fulfill (converts to loan), Cancel, Notify Member. Ready for Pickup tab highlights reservations nearing expiration. Filters: status, date range, book title, member name.", "navigates_to": [ "librarian_dashboard" ] }, { "page_id": "fines_management", "page_title": "Fines & Payments", "route_path": "/staff/fines", "route_params": [], "image_indices": [], "description": "Fine and payment management page for librarians. Tabs: 'Outstanding Fines', 'Payments', 'All Fines'. Outstanding Fines tab: table with columns: Fine ID, Member Name, Type (Overdue/Damage/Lost/Other), Amount, Issue Date, Related Loan, Actions (Record Payment, Waive). Clicking 'Record Payment' opens modal with fields: amount, payment method (Cash/Card), reference number, option for partial payment. Clicking 'Waive' opens modal with reason field and confirmation. 'Create Fine' button opens modal: select member, fine type, amount, reason, related loan (optional). Payments tab: table with columns: Payment ID, Member Name, Amount, Method, Date, Transaction Reference, Fines Covered. Summary cards at top: Total Outstanding, Collected Today, Collected This Month.", "navigates_to": [ "librarian_dashboard" ] }, { "page_id": "reports", "page_title": "Reports & Analytics", "route_path": "/staff/reports", "route_params": [], "image_indices": [], "description": "Reports and analytics page. Top section: real-time stat cards (Books Checked Out Today, Returns Today, New Members This Week, Total Active Loans, Total Overdue, Revenue This Month). Charts section: Line chart for circulation trends (daily/weekly/monthly toggle showing checkouts, returns, renewals over time), Bar chart for popular categories, Bar chart for most borrowed books, Pie chart for book condition distribution. Report generation section with cards for each report type: Daily Circulation Report, Overdue Books Report, Most/Least Borrowed Books, Member Activity Report, Fine Collection Report, Outstanding Fines Report, Inventory Report, New Acquisitions Report. Each report card has date range picker and 'Generate' button. Export options: PDF, Excel. Reports generate asynchronously with download link when ready.", "navigates_to": [ "librarian_dashboard", "admin_dashboard" ] }, { "page_id": "admin_dashboard", "page_title": "Admin Dashboard", "route_path": "/admin/dashboard", "route_params": [], "image_indices": [], "description": "Administrator dashboard with comprehensive system overview. Stat cards: Total Members, Total Books, Total Copies, Active Loans, Overdue Books, Revenue (Month), System Health indicator. Quick links to all admin modules. Recent activity feed showing latest audit log entries (user, action, timestamp). System alerts section for critical issues (many overdue books, system errors). Navigation sidebar with links to: User Management, System Configuration, Branch Management, Audit Logs, Reports & Analytics.", "navigates_to": [ "user_management", "system_config", "branch_management", "audit_logs", "reports" ] }, { "page_id": "user_management", "page_title": "User Management", "route_path": "/admin/users", "route_params": [], "image_indices": [], "description": "Administrator user management page. Filters: role (All/Member/Librarian/Administrator), status (Active/Inactive/Locked). Search by name or email. Table with columns: User ID, Full Name, Email, Role (badge), Status (badge), Created Date, Last Login, Actions. Actions: Edit Role, Reset Password, Deactivate, Unlock (for locked accounts). 'Create Librarian' button opens modal with fields: full name, email, employee ID, assigned branch dropdown, temporary password. 'Create Administrator' button opens similar modal. Edit Role opens modal with role dropdown and confirmation. Deactivate shows confirmation dialog.", "navigates_to": [ "admin_dashboard" ] }, { "page_id": "system_config", "page_title": "System Configuration", "route_path": "/admin/configuration", "route_params": [], "image_indices": [], "description": "System configuration page for administrators. Organized in card sections: Loan Settings (loan period in days: default 14, maximum renewals: default 2, maximum concurrent loans: default 5), Reservation Settings (maximum concurrent reservations: default 3, pickup expiration hours: default 48), Fine Settings (daily overdue rate: default $0.50, maximum fine per item: default $10, fine threshold for suspension: default $10, grace period days: default 1). Each setting has a label, current value input, description tooltip, and save button. Changes are logged to audit trail. Reset to defaults button available.", "navigates_to": [ "admin_dashboard" ] }, { "page_id": "branch_management", "page_title": "Branch Management", "route_path": "/admin/branches", "route_params": [], "image_indices": [], "description": "Library branch management page. Table with columns: Branch Name, Address, Phone, Email, Operating Hours, Librarians Count, Books Count, Status (Active/Inactive), Actions. Actions: Edit, Deactivate. 'Add Branch' button opens modal with fields: name, address (street, city, state, zip), phone, email, operating hours (per day of week), status. Edit opens same modal pre-filled. Clicking a branch row expands to show assigned librarians list with option to reassign.", "navigates_to": [ "admin_dashboard" ] }, { "page_id": "audit_logs", "page_title": "Audit Logs", "route_path": "/admin/audit-logs", "route_params": [], "image_indices": [], "description": "Audit log viewer for administrators. Filters: date range, user, action type (Login/Logout/Checkout/Return/Fine Created/Configuration Changed/User Created/etc.), entity type (User/Book/Loan/Fine/Payment/Configuration). Table with columns: Timestamp, User (name + role), Action Type (color-coded badge), Entity Type, Entity ID, Details (expandable), IP Address. Pagination with 50 items per page. Export to CSV button. Logs are read-only and cannot be modified or deleted through the UI.", "navigates_to": [ "admin_dashboard" ] }, { "page_id": "notifications", "page_title": "Notifications", "route_path": "/notifications", "route_params": [], "image_indices": [], "description": "In-app notifications page accessible from the notification bell icon in the header (shows unread count badge). List of notifications sorted by date (newest first). Each notification shows: icon (by type), title, message, timestamp, read/unread indicator. Types: checkout confirmation, return confirmation, due date reminder, overdue notice, reservation ready, fine assessed, payment confirmed. 'Mark All as Read' button. Individual mark as read on click. Notifications retained for 30 days. Empty state message when no notifications.", "navigates_to": [ "member_dashboard", "book_detail", "member_history" ] } ], "shared_state": [ { "key": "currentUser", "type": "{ id: string; email: string; fullName: string; role: 'guest' | 'member' | 'librarian' | 'administrator'; memberId?: string; membershipNumber?: string; status?: string } | null", "initial_value": "null", "description": "Currently authenticated user information including role for RBAC, used across all pages for navigation guards and personalized content" }, { "key": "selectedBranchId", "type": "string | null", "initial_value": "null", "description": "Currently selected library branch context for filtering books, copies, and operations in multi-branch setup" }, { "key": "unreadNotificationCount", "type": "number", "initial_value": "0", "description": "Count of unread notifications displayed as badge in the header navigation across all pages" }, { "key": "systemConfig", "type": "{ loanPeriodDays: number; maxRenewals: number; maxConcurrentLoans: number; maxReservations: number; dailyFineRate: number; maxFinePerItem: number; fineThreshold: number; gracePeriodDays: number; pickupExpirationHours: number } | null", "initial_value": "null", "description": "Cached system configuration values used across circulation, reservation, and fine pages for validation and display" } ], "default_route": "public_catalog", "design_system": { "theme_mode": "light", "density": "comfortable", "color_primary": "#1677ff", "color_success": "#52c41a", "color_warning": "#faad14", "color_error": "#ff4d4f", "color_bg_container": "#ffffff", "color_bg_layout": "#f5f5f5", "color_text": "#000000e0", "color_border": "#d9d9d9", "font_family": "Inter, -apple-system, sans-serif", "font_size_base": 14, "border_radius": 6, "component_overrides": {} } }