{
  "app_name": "Bus Booking System",
  "pages": [
    {
      "page_id": "login",
      "page_title": "Login",
      "route_path": "/login",
      "route_params": [],
      "image_indices": [],
      "description": "Static login page. Contains a centered card with the app logo/title, email input field, password input field, a 'Remember me' checkbox, a 'Login' submit button, and a link to the signup page. On failed login, an inline error message is displayed. Successful login redirects customers to the search page and admins to the admin dashboard.",
      "navigates_to": [
        "signup",
        "search_buses",
        "admin_dashboard"
      ]
    },
    {
      "page_id": "signup",
      "page_title": "Sign Up",
      "route_path": "/signup",
      "route_params": [],
      "image_indices": [],
      "description": "Static signup/registration page. Contains a centered card with fields: first name, last name, email, phone number, password, and confirm password. Password strength indicator shown inline. Validation messages for email format, password requirements (min 8 chars, uppercase, lowercase, number), and unique email constraint. A 'Create Account' submit button and a link back to the login page. On success, redirects to login with a success message.",
      "navigates_to": [
        "login"
      ]
    },
    {
      "page_id": "search_buses",
      "page_title": "Search Buses",
      "route_path": "/",
      "route_params": [],
      "image_indices": [],
      "description": "Landing page for customers after login. Contains a prominent search form with: origin city dropdown/autocomplete, destination city dropdown/autocomplete, travel date picker, and a 'Search' button. Below the search form, results are displayed as a list of schedule cards. Each card shows: bus number, bus type (standard/deluxe/sleeper), route (origin → destination), departure and arrival datetime, estimated duration, base price, available seats count, amenities icons (AC, WiFi, etc.), and a 'Sold Out' badge if no seats available. Sort controls for price, departure time, duration, and availability. Filter sidebar/panel for bus type, price range slider, and departure time range. Each card has a 'Select Seats' button navigating to the seat selection page. Empty state shown when no results match. Top navigation bar with links to Search, My Bookings, Profile, and Logout.",
      "navigates_to": [
        "seat_selection",
        "booking_history",
        "user_profile",
        "login"
      ]
    },
    {
      "page_id": "seat_selection",
      "page_title": "Select Seats",
      "route_path": "/schedules/:scheduleId/seats",
      "route_params": [
        "scheduleId"
      ],
      "image_indices": [],
      "description": "Seat selection and reservation page for a specific schedule. Top section shows schedule summary: bus number, bus type, route (origin → destination), departure/arrival datetime, and base price. Main area displays a visual seat layout map rendered from the bus seat_layout_config JSON. Seats are color-coded: green for available, orange for reserved (by others), red for booked, and blue for user-selected. Seat type indicators (standard/premium/sleeper) with price shown on hover or beside each seat. Legend explaining color codes. Users click seats to select/deselect (max 6 seats). Right sidebar or bottom panel shows selected seats summary: list of selected seat numbers, seat types, individual prices with price modifiers, and dynamically calculated total price. A 'Reserve Seats' button creates the reservation and starts the 15-minute countdown. Once reserved, a prominent countdown timer (MM:SS) is displayed showing remaining reservation time. Real-time updates via WebSocket: if another user reserves or books a seat, it updates on the map instantly. A 'Proceed to Payment' button appears after reservation is created, navigating to the payment page. A 'Cancel Reservation' button to release seats. If the timer expires, a modal/alert notifies the user that the reservation has expired and seats are released, resetting the seat map. Navigation back to search results available.",
      "navigates_to": [
        "payment",
        "search_buses"
      ]
    },
    {
      "page_id": "payment",
      "page_title": "Payment",
      "route_path": "/reservations/:reservationId/pay",
      "route_params": [
        "reservationId"
      ],
      "image_indices": [],
      "description": "Payment processing page. Displays a payment summary card with: schedule details (route, date/time), selected seat numbers and types, price breakdown per seat, subtotal, taxes/fees, and total amount. A countdown timer showing remaining reservation time (from the 15-minute window). Payment method selection: card (credit/debit), UPI, and wallet options. For card payment, fields for card number, expiry, CVV, and cardholder name. A 'Pay Now' button to initiate payment. Loading spinner during payment processing. On success, redirects to booking confirmation page. On failure, shows error message with a 'Retry Payment' button. If reservation expires during payment, shows an expiry alert and redirects back to search. Cancel link to abandon payment and release reservation.",
      "navigates_to": [
        "booking_confirm",
        "search_buses",
        "seat_selection"
      ]
    },
    {
      "page_id": "booking_confirm",
      "page_title": "Booking Confirmation",
      "route_path": "/bookings/:bookingId/confirm",
      "route_params": [
        "bookingId"
      ],
      "image_indices": [],
      "description": "Booking confirmation page shown after successful payment. Displays a success icon/checkmark with 'Booking Confirmed!' message. Shows booking reference number prominently. Booking details card: route (origin → destination), departure/arrival datetime, bus number and type, seat numbers, total amount paid, payment method, and booking datetime. Ticket section with a generated QR code image and ticket number. Action buttons: 'Download Ticket' (PDF), 'View Booking Details', and 'Search More Buses'. Navigation to booking history available.",
      "navigates_to": [
        "booking_history",
        "booking_detail",
        "search_buses"
      ]
    },
    {
      "page_id": "booking_history",
      "page_title": "My Bookings",
      "route_path": "/bookings",
      "route_params": [],
      "image_indices": [],
      "description": "Booking history page listing all user bookings. Tab filters at top: 'Upcoming', 'Completed', 'Cancelled', and 'All'. Search bar to search by booking reference. Date range filter. Each booking is shown as a card or table row with: booking reference, route (origin → destination), departure datetime, seat numbers, total amount, booking status badge (confirmed/cancelled/completed), and payment status. Action buttons per booking: 'View Details' navigates to booking detail page, 'Cancel Booking' opens a confirmation modal (only for eligible bookings — not departed, not already cancelled). The cancellation modal shows cancellation policy, calculated refund amount based on time before departure (100% if >24h, 50% if 2-24h, 0% if <2h), a reason text field, and 'Confirm Cancellation' / 'Go Back' buttons. 'Download Ticket' button for confirmed bookings. Pagination controls at bottom. Empty state message when no bookings exist. Top navigation bar consistent with other customer pages.",
      "navigates_to": [
        "booking_detail",
        "search_buses",
        "user_profile"
      ]
    },
    {
      "page_id": "booking_detail",
      "page_title": "Booking Details",
      "route_path": "/bookings/:bookingId",
      "route_params": [
        "bookingId"
      ],
      "image_indices": [],
      "description": "Detailed view of a single booking. Shows complete booking information in sections: (1) Booking Info — booking reference, status badge, booking datetime. (2) Schedule Info — route, departure/arrival datetime, bus number, bus type, amenities. (3) Seat Info — list of seat numbers with types and individual prices. (4) Payment Info — total amount, payment method, payment status, transaction datetime. (5) Booking Timeline — a vertical timeline showing key events: reservation created, payment completed, booking confirmed, with timestamps. (6) Ticket Section — ticket number, QR code display, validity status. Action buttons: 'Download Ticket' (PDF), 'Print Ticket', 'Cancel Booking' (opens cancellation confirmation modal as described in booking_history, only if eligible). Back link to booking history.",
      "navigates_to": [
        "booking_history"
      ]
    },
    {
      "page_id": "user_profile",
      "page_title": "My Profile",
      "route_path": "/profile",
      "route_params": [],
      "image_indices": [],
      "description": "User profile management page. Displays current user information in an editable form: first name, last name, email (read-only), phone number. 'Save Changes' button to update profile via PUT /users/{id}/profile. Separate 'Change Password' section with fields: current password, new password, confirm new password, and a 'Update Password' button. Account status indicator (active/inactive). 'Deactivate Account' button with confirmation modal. Top navigation bar consistent with other customer pages.",
      "navigates_to": [
        "search_buses",
        "booking_history"
      ]
    },
    {
      "page_id": "admin_dashboard",
      "page_title": "Admin Dashboard",
      "route_path": "/admin",
      "route_params": [],
      "image_indices": [],
      "description": "Admin dashboard overview page. Top section shows stat cards: Today's Bookings (count), Today's Revenue (currency amount), Active Reservations (count with live update), Total Buses (count), Total Routes (count). Below stats, two columns: (1) Upcoming Schedules — a compact table showing next 5-10 schedules with route, departure time, bus number, available seats, and occupancy percentage. (2) Recent Bookings — a compact table showing last 10 bookings with booking reference, user email, route, amount, status badge, and datetime. Quick action buttons/links: 'Manage Buses', 'Manage Routes', 'Manage Schedules', 'View All Bookings', 'View Activity Logs'. System health indicators (optional). Left sidebar navigation with links to: Dashboard, Routes, Buses, Schedules, Bookings, Reservations, Activity Logs, Users. Top bar with admin name and logout.",
      "navigates_to": [
        "admin_routes",
        "admin_buses",
        "admin_schedules",
        "admin_bookings",
        "admin_reservations",
        "admin_activity_logs",
        "admin_users",
        "login"
      ]
    },
    {
      "page_id": "admin_routes",
      "page_title": "Route Management",
      "route_path": "/admin/routes",
      "route_params": [],
      "image_indices": [],
      "description": "Admin route management page. Displays a data table of all routes with columns: Route ID, Origin City, Destination City, Distance (km), Estimated Duration (minutes), Status (active/inactive badge), Created At. Table features: search/filter bar to search by city name, filter by active status, pagination controls. Action column with 'Edit' and 'Delete' icon buttons per row. 'Add Route' button at top-right opens a modal/drawer with fields: origin city, destination city, distance (km), estimated duration (minutes), is_active toggle. The modal has 'Save' and 'Cancel' buttons. Clicking 'Edit' opens the same modal pre-filled with route data for updating. Clicking 'Delete' shows a confirmation popover/modal warning about existing schedules; confirms deletion via DELETE /routes/{route_id}. Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_buses",
        "admin_schedules",
        "admin_bookings",
        "admin_reservations",
        "admin_activity_logs",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_buses",
      "page_title": "Bus Management",
      "route_path": "/admin/buses",
      "route_params": [],
      "image_indices": [],
      "description": "Admin bus management page. Displays a data table of all buses with columns: Bus ID, Bus Number, Bus Type (standard/deluxe/sleeper), Total Seats, Amenities (icon chips for AC, WiFi, charging, etc.), Status (active/inactive badge), Created At. Table features: search by bus number, filter by bus type and status, pagination. Action column with 'Edit' and 'Delete' icon buttons. 'Add Bus' button at top-right opens a modal/drawer with fields: bus number, bus type dropdown (standard/deluxe/sleeper), total seats (number input), seat layout config (JSON editor or structured form for rows/columns), amenities multi-select (AC, WiFi, Charging Ports, etc.), is_active toggle. 'Save' and 'Cancel' buttons. Edit opens same modal pre-filled. Delete shows confirmation with validation warning about existing schedules. Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_schedules",
        "admin_bookings",
        "admin_reservations",
        "admin_activity_logs",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_schedules",
      "page_title": "Schedule Management",
      "route_path": "/admin/schedules",
      "route_params": [],
      "image_indices": [],
      "description": "Admin schedule management page. Displays a data table of all schedules with columns: Schedule ID, Bus Number (from bus relation), Route (origin → destination), Departure DateTime, Arrival DateTime, Base Price, Available Seats / Total Seats, Occupancy % (progress bar), Status (scheduled/in_transit/completed/cancelled badge), Created At. Table features: search by bus number or route, filter by status, date range picker for departure date, sort by departure time or occupancy, pagination. Action column with 'View Details', 'Edit', 'Generate Seats', and 'Delete' icon buttons. 'Add Schedule' button at top-right opens a modal/drawer with fields: bus dropdown (from active buses), route dropdown (from active routes), departure datetime picker, arrival datetime picker, base price input, status dropdown. 'Save' and 'Cancel' buttons. After creating a schedule, a 'Generate Seats' action button calls POST /schedules/{schedule_id}/generate-seats to auto-create seat inventory. 'Edit' opens same modal pre-filled (with restrictions if bookings exist — price and bus fields disabled). 'Delete' shows confirmation warning about cascading effects on bookings. Clicking 'View Details' opens a drawer showing full schedule info, seat inventory summary (available/reserved/booked counts), and revenue for that schedule. Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_buses",
        "admin_bookings",
        "admin_reservations",
        "admin_activity_logs",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_bookings",
      "page_title": "Booking Monitoring",
      "route_path": "/admin/bookings",
      "route_params": [],
      "image_indices": [],
      "description": "Admin booking monitoring page. Displays a comprehensive data table of all bookings across all users with columns: Booking ID, Booking Reference, User Email, Route (origin → destination), Departure DateTime, Seat Numbers, Total Amount, Payment Status badge, Booking Status badge (confirmed/cancelled/completed), Booking DateTime. Table features: search by booking reference, user email, or phone number, filter by status (confirmed/cancelled/completed), filter by date range, filter by schedule/route, sort by date or amount, pagination. Action column with 'View Details' and 'Cancel Booking' buttons. Clicking 'View Details' opens a drawer/modal showing complete booking information including passenger details, seat assignments, payment info, ticket info, and booking timeline. 'Cancel Booking' opens a confirmation modal with reason field and full refund note (admin cancellation = full refund per BR3.6). An 'Export' button at top to export filtered booking data to CSV. Summary stats at top: total bookings count, total revenue, confirmed count, cancelled count for the filtered set. Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_buses",
        "admin_schedules",
        "admin_reservations",
        "admin_activity_logs",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_reservations",
      "page_title": "Reservation Monitoring",
      "route_path": "/admin/reservations",
      "route_params": [],
      "image_indices": [],
      "description": "Admin reservation monitoring page. Displays a data table of all reservations (with emphasis on active ones) with columns: Reservation ID, User Email, Route (from schedule), Schedule Departure, Seat IDs/Numbers, Total Amount, Status badge (active/expired/confirmed/cancelled), Reservation DateTime, Expiry DateTime, Time Remaining (live countdown for active reservations, showing MM:SS in orange/red). Table features: tab filters for 'Active', 'Expired', 'Confirmed', 'Cancelled', 'All'. Filter by schedule, user, expiry time range. Sort by expiry time. Pagination. Action column: 'View Details' opens a drawer with full reservation info. 'Release' button (for active reservations) to manually release stuck reservations via POST /reservations/{reservation_id}/release, with a confirmation modal. A 'Batch Expire' button at top to trigger POST /reservations/expire-batch for manual cleanup. Summary stats at top: active reservations count, expired today count, conversion rate (reservations → bookings percentage). Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_buses",
        "admin_schedules",
        "admin_bookings",
        "admin_activity_logs",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_activity_logs",
      "page_title": "Activity Logs",
      "route_path": "/admin/activity-logs",
      "route_params": [],
      "image_indices": [],
      "description": "Admin activity logs page for comprehensive audit trail viewing. Displays a data table of all activity logs with columns: Log ID, Timestamp (formatted with timezone), Entity Type (user/reservation/booking/payment/schedule/etc.), Entity ID (clickable link where applicable), User Email (who performed the action), Action Type (reservation_created/payment_completed/booking_cancelled/reservation_expired/etc. as colored tags), IP Address, Details (truncated JSON, expandable on click). Table features: filter by entity type dropdown, filter by action type dropdown, filter by user (email search), date range picker, keyword search across details JSON. Sort by timestamp (default: newest first). Pagination with configurable page size (25/50/100). Row expand to show full details JSON formatted. 'Export Logs' button to export filtered logs to CSV for audit purposes. Total log count displayed. Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_buses",
        "admin_schedules",
        "admin_bookings",
        "admin_reservations",
        "admin_users"
      ]
    },
    {
      "page_id": "admin_users",
      "page_title": "User Management",
      "route_path": "/admin/users",
      "route_params": [],
      "image_indices": [],
      "description": "Admin user management page. Displays a data table of all users with columns: User ID, Email, First Name, Last Name, Phone Number, Role (customer/admin badge), Status (active/inactive badge), Created At. Table features: search by email, name, or phone, filter by role and status, pagination. Action column with 'View', 'Edit', and 'Delete' icon buttons. Clicking 'View' opens a drawer showing full user profile, their booking count, and recent activity. 'Edit' opens a modal with editable fields: first name, last name, phone number, role dropdown, is_active toggle. 'Delete' shows confirmation modal with warning about associated bookings/reservations. No 'Add User' button (users self-register). Left sidebar navigation consistent with admin pages.",
      "navigates_to": [
        "admin_dashboard",
        "admin_routes",
        "admin_buses",
        "admin_schedules",
        "admin_bookings",
        "admin_reservations",
        "admin_activity_logs"
      ]
    }
  ],
  "shared_state": [
    {
      "key": "currentUser",
      "type": "{ userId: number; email: string; firstName: string; lastName: string; role: 'customer' | 'admin'; token: string } | null",
      "initial_value": "null",
      "description": "Authenticated user session data including JWT token, used across all pages for auth checks, role-based routing, and API authorization headers."
    },
    {
      "key": "activeReservation",
      "type": "{ reservationId: number; scheduleId: number; seatIds: number[]; expiryDatetime: string; totalAmount: number; status: string } | null",
      "initial_value": "null",
      "description": "Currently active seat reservation with expiry timer, shared between seat selection and payment pages to maintain reservation context and countdown."
    },
    {
      "key": "searchCriteria",
      "type": "{ originCity: string; destinationCity: string; travelDate: string } | null",
      "initial_value": "null",
      "description": "Last search parameters used on the search page, persisted so users can return to search results from seat selection or booking pages without re-entering criteria."
    }
  ],
  "default_route": "login",
  "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": "#f0f2f5",
    "color_text": "#000000e0",
    "color_border": "#d9d9d9",
    "font_family": "Inter, -apple-system, sans-serif",
    "font_size_base": 14,
    "border_radius": 6,
    "component_overrides": {}
  }
}