# 📖 Library Management System - Visual User Guide

## 🎬 Feature Walkthroughs

### 1️⃣ Books Catalog - View All Books

**URL**: http://127.0.0.1:8000/books

**What You See**:
```
┌─ Library System Navbar ──────────────────────────────────┐
│ 📚 Library System | Books Catalog | Add Books | Issue...  │
└─────────────────────────────────────────────────────────┘

┌─ Books Catalog Page ─────────────────────────────────────┐
│ 📖 Books Catalog                    [+ Add New Book]     │
├──────────────────────────────────────────────────────────┤
│ Responsive Table:                                        │
│ ┌────┬───────────┬──────────┬─────────────────────────┐ │
│ │IMG │ Title     │ Author   │ ISBN  │ Cat │ Qty │...  │ │
│ ├────┼───────────┼──────────┼─────────────────────────┤ │
│ │📕  │ Clean Code│ Uncle Bob│ 978...│ Prog│  4  │ ✏️ 🗑️  │
│ │📗  │Design ... │ Gang of 4│ 978...│ S.E │  3  │ ✏️ 🗑️  │
│ │📙  │ 1984      │ G.Orwell│ 978...│ Fic │  8  │ ✏️ 🗑️  │
│ └────┴───────────┴──────────┴─────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```

**Actions**:
- ✏️ Click Edit → Modal form opens
- 🗑️ Click Delete → Confirmation dialog

---

### 2️⃣ Add Book - Create New Book

**URL**: http://127.0.0.1:8000/books/create

**What You See**:
```
┌─ Add Book Form ──────────────────────────────────────────┐
│ ➕ Add New Book                                          │
├──────────────────────────────────────────────────────────┤
│ Title:              [_______________________]            │
│ Subtitle (opt):     [_______________________]            │
│ Author Name:        [_______________________]            │
│ ISBN:               [_______________________]            │
│ Category:           [_______________________]            │
│ Language:           [English_________________] ▼         │
│ Publisher:          [_______________________]            │
│ Publish Year:       [________] Format: [Hardcover] ▼     │
│ Edition:            [_______________________]            │
│ Pages:              [________] DDC: [________]           │
│ Shelf Location:     [_______________________]            │
│ Quantity:           [________]                          │
│ Cover Image:        [Choose File] (2MB max)             │
│                                                          │
│ [📁 Add Book] [← Back to Catalog]                       │
└──────────────────────────────────────────────────────────┘
```

**Process**:
1. Fill all required fields
2. Optionally select image
3. Click "Add Book"
4. AJAX submission (no reload)
5. Success alert appears
6. After 2 seconds, redirects to catalog

---

### 3️⃣ Edit Book - Update Book Details

**URL**: http://127.0.0.1:8000/books (Click Edit)

**What You See**:
```
┌─ Edit Modal (Appears on Catalog) ────────────────────────┐
│ ✏️ Edit Book                                  [X]        │
├──────────────────────────────────────────────────────────┤
│ Title:              [Clean Code (pre-filled)]            │
│ Author:             [Robert C. Martin (pre-filled)]      │
│ ISBN:               [978-0-13-235088-4 (pre-filled)]     │
│ Category:           [Programming (pre-filled)]           │
│ Quantity:           [7 (pre-filled)]                     │
│ ⬆️ More fields scrollable...                             │
│                                                          │
│ [Cancel]                          [💾 Update Book]      │
└──────────────────────────────────────────────────────────┘
```

**Process**:
1. Click Edit button on any book
2. Modal pops up with pre-filled data
3. Modify any field
4. Click "Update Book"
5. AJAX submission
6. Modal closes, table refreshes
7. Success message shown

---

### 4️⃣ Delete Book - Remove Book Record

**URL**: http://127.0.0.1:8000/books (Click Delete)

**Confirmation Dialog**:
```
┌───────────────────────────────────┐
│ ⚠️  Confirm Delete               │
│                                   │
│ Are you sure you want to delete   │
│ this book?                         │
│                                   │
│ [Cancel]        [🗑️ Delete]      │
└───────────────────────────────────┘
```

**Process**:
1. Click Delete button
2. Confirmation dialog appears
3. Click "Delete" to confirm
4. AJAX submission
5. Row fades out and disappears
6. Success message shown

---

### 5️⃣ Issue Book - Lend Book to Student

**URL**: http://127.0.0.1:8000/issues/create

**What You See**:
```
┌─ Issue Book Form ────────────────────────────────────────┐
│ 📋 Issue Book to Student                                │
├──────────────────────────────────────────────────────────┤
│ Select Book:        [▼ Choose a Book]                   │
│                     Options: Clean Code (Available: 4)   │
│                     Design Patterns (Available: 3)       │
│                     1984 (Available: 8)                  │
│                                                          │
│ Student Name:       [_______________________] ✓         │
│ Email (optional):   [_______________________]            │
│                                                          │
│ Issue Date:         [2026-04-09]                         │
│ Return Date:        [__________]  (must be after issue)  │
│                                                          │
│ ℹ️ Note: Available copies will reduce automatically    │
│                                                          │
│ [✅ Issue Book] [← Back to Issues]                      │
└──────────────────────────────────────────────────────────┘
```

**Process**:
1. Select book from dropdown (shows only books with available copies)
2. Enter student name (required)
3. Enter email (optional)
4. Set issue date (defaults to today)
5. Set return date (must be after issue date)
6. Click "Issue Book"
7. AJAX submission
8. Success message
9. Redirects to issue history

---

### 6️⃣ Issue History - Track Book Issues

**URL**: http://127.0.0.1:8000/issues

**Three Tabs Interface**:

#### Tab 1: All Issues
```
┌─ All Issues ─────────────────────────────────────────────┐
│ 📊 Book Issues History            [➕ Issue New Book]   │
├─ [All Issues] [Active Issues] [Returned Issues] ────────┤
│                                                          │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Book           │ Student │ Issue Date│Return Date   │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │Clean Code      │John D.  │2026-04-05│2026-04-20 ✔️ │ │
│ │Design Pattern. │Jane S.  │2026-04-06│2026-04-21    │ │
│ │1984 (OVERDUE)  │Bob M.   │2026-04-01│2026-04-10 ⚠️ │ │
│ │Python Guide    │Alice R. │2026-04-08│2026-04-18    │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```

#### Tab 2: Active Issues
```
┌─ Active Issues (Currently Issued) ───────────────────────┐
│ Only shows books that haven't been returned yet         │
│                                                          │
│ Shows ⚠️ OVERDUE badge if return date has passed       │
```

#### Tab 3: Returned Issues
```
┌─ Returned Issues (Completed) ────────────────────────────┐
│ Only shows books that have been returned                │
│                                                          │
│ Shows actual return date for each book                  │
```

---

### 7️⃣ Return Book - Mark as Returned

**URL**: http://127.0.0.1:8000/issues (Active Issues tab)

**Confirmation Dialog**:
```
Active Issues Tab:
│ Clean Code      │John D.  │2026-04-05│2026-04-20│[↩️ Return]
│ Design Pattern. │Jane S.  │2026-04-06│2026-04-21│[↩️ Return]

Click Return button ↓

┌───────────────────────────────────┐
│ ⚠️  Confirm Return               │
│                                   │
│ Are you sure you want to mark    │
│ this book as returned?            │
│                                   │
│ [Cancel]        [✅ Confirm]     │
└───────────────────────────────────┘
```

**Process**:
1. Go to Issue History
2. Click "Active Issues" tab
3. Click Return button on any active issue
4. Confirmation dialog
5. Click Confirm
6. AJAX submission
7. Status changes to "returned"
8. Available copies increase by 1
9. Issue moves to "Returned Issues" tab

---

## 🎨 UI Elements & Colors

### Status Badges
```
Issued:        [🟡 ISSUED]     (Yellow/Warning)
Returned:      [🟢 RETURNED]   (Green/Success)
Overdue:       [🔴 OVERDUE]    (Red/Danger)
Active:        [🟡 Active]     (Yellow/Warning)
Available:     [🟢 Available]  (Green with number)
```

### Message Alerts
```
Success: ✅ [Green] "Book added successfully!"
Error:   ❌ [Red]   "Error: Check server response"
Info:    ℹ️ [Blue]  "Note: Available copies will reduce..."
```

### Button Colors
```
Primary:   [Blue]    - Add Book, Issue Book, Submit
Secondary: [Gray]    - Back, Cancel
Success:   [Green]   - Confirm, Issue
Warning:   [Yellow]  - Edit
Danger:    [Red]     - Delete, Return
Info:      [Blue]    - View, More Info
```

---

## 📱 Mobile Experience

### Responsive Navbar
```
Desktop:
│ 📚 Library System │ Books Catalog │ Add Books │ Issue Books │ Issue History │

Mobile:
│ 📚 Library System                                              ☰ │
  ▼ (when menu opened)
  ├─ Books Catalog
  ├─ Add Books
  ├─ Issue Books
  └─ Issue History
```

### Responsive Table
```
Desktop: Full table with all columns visible

Tablet:  Horizontal scroll appears for overflow columns

Mobile:  Card view or prioritized columns with actions
```

---

## ⌨️ Keyboard Navigation

### Form Navigation
- **Tab**: Move between fields
- **Enter**: Submit form (when on submit button)
- **Esc**: Close modal
- **Click Outside Modal**: Close modal

### Table Navigation
- **Click Row**: Can select (if enabled)
- **Click Edit**: Open form
- **Click Delete**: Confirmation
- **Tab**: Navigate between buttons

---

## 🔄 Common User Flows

### Flow 1: Add 3 Books
```
1. Click "Add Books"
2. Fill form for Book 1
3. Click "Add Book" → Success → Redirects
4. Click "Add Books" again
5. Fill form for Book 2
6. Click "Add Book" → Success → Redirects
7. Repeat for Book 3
8. Click "Books Catalog" → See all 3 books + sample books
```

### Flow 2: Issue Book, Then Return
```
1. Click "Issue Books"
2. Select "Clean Code" 
3. Enter "John Doe"
4. Set dates
5. Click "Issue Book" → Success → Redirects to Issues
6. See issue in "Active Issues" tab
7. Click Return button
8. Confirm → Success
9. Book moves to "Returned Issues" tab
10. Available copies increased
```

### Flow 3: Update Book Information
```
1. Go to "Books Catalog"
2. Find book, click Edit
3. Modal opens with pre-filled data
4. Change some fields (e.g., quantity)
5. Click "Update Book"
6. Modal closes
7. Table refreshes with new data
8. Success message displayed
```

---

## 🎯 Quick Tips

✨ **Form Tips**:
- Required fields marked with *
- Return date must be after issue date
- ISBN must be unique
- File size limit: 2MB

✨ **Navigation Tips**:
- All operations use AJAX (no full page reloads)
- Click logo to go back to catalog
- Alerts auto-dismiss after 5 seconds

✨ **Efficiency Tips**:
- Use Edit modal to quickly update
- Check Active Issues tab for overdue books
- Available copies show quantity readily
- Search bar at top for quick access

---

## 🐛 Visual Problem Indicators

### Error States
```
❌ Red border on invalid field
❌ Red error message below field
❌ Alert box with error details
❌ Form doesn't submit until fixed
```

### Success States
```
✅ Green success alert at top-right
✅ Toast/notification appears
✅ Page auto-refreshes after action
✅ New data visible in table
```

### Loading States
```
🔄 Spinner in button during submission
🔄 Alert "Processing..."
🔄 Cannot click button until complete
```

---

## 🎬 Animation & Transitions

```
Modals:     Fade in/out smoothly
Alerts:     Slide down from top, auto-slide out
Buttons:    Hover color change
Rows:       Fade out when deleted
Tables:     Smooth row updates
Forms:      Input focus color change
```

---

## 📊 Dashboard View Summary

### At a Glance
```
Coming to Catalog Page:
┌────────────────────────────────────────────┐
│ Total Books: 8 (from sample) + additions  │
│ Issues in Progress: X                     │
│ Overdue Books: Y                          │
│ Returned Recently: Z                      │
└────────────────────────────────────────────┘
```

---

**This visual guide helps you understand every feature visually!** 🎉

For detailed text explanations, see [QUICK_START.md](QUICK_START.md) or [LIBRARY_SYSTEM_GUIDE.md](LIBRARY_SYSTEM_GUIDE.md)