{
  "app_name": "Job Management System",
  "pages": [
    {
      "page_id": "dashboard",
      "page_title": "Dashboard",
      "route_path": "/",
      "route_params": [],
      "image_indices": [],
      "description": "Main landing page displaying role-appropriate dashboard. Shows stat cards for job counts by status (New, Assigned, In Progress, Pending Review, Completed, Cancelled) with color-coded badges. Displays an 'Overdue Jobs' count card highlighted in red. Shows 'Jobs Due Soon' section listing jobs due within 7 days with title, assignee, due date, and priority badge. Includes a 'Recent Activity' feed showing latest job history entries (status changes, comments, assignments) with timestamps and user avatars. Contains a bar chart showing jobs by status distribution and a line chart showing job completion trend over time. A pie chart shows jobs by priority breakdown. Section for 'My Assigned Jobs' showing a compact table with columns: Title, Priority, Status, Due Date. Clicking any job navigates to job detail. Sidebar navigation links to all major sections: Dashboard, Jobs, Departments, Reports, Notifications, Configuration.",
      "navigates_to": [
        "job_list",
        "job_detail",
        "departments",
        "reports",
        "notifications",
        "configuration"
      ]
    },
    {
      "page_id": "job_list",
      "page_title": "Jobs",
      "route_path": "/jobs",
      "route_params": [],
      "image_indices": [],
      "description": "Primary job listing page displaying all jobs in a data table with columns: Job ID, Title, Status (color-coded badge), Priority (color-coded badge), Assignee (avatar + name), Due Date, Created Date. Supports pagination at 25 jobs per page with page controls. Filter bar at top with dropdowns for: Status, Priority, Assignee, Department, Job Type, and a date range picker for due date. Search bar for searching by title and description. Sort controls on each column header. Status tab filters at top showing count badges (All, New, Assigned, In Progress, Blocked, Pending Review, Completed, Cancelled). 'Create Job' button in top-right opens a modal/drawer with fields: Title (required, text input), Description (required, rich text), Job Type (dropdown from /job-configuration/job-types), Priority (dropdown from /job-configuration/job-priorities), Due Date (date picker), Assignee (searchable dropdown from /users), Department (dropdown from /organization/departments), Tags (multi-select from /job-configuration/tags), plus an 'Add Checklist' section allowing adding checklist title and items. Supports file attachment upload during creation. Each row has action buttons: View (navigates to detail), Edit (opens edit modal with same fields pre-filled), Delete (confirmation dialog with soft delete). Bulk actions toolbar appears when rows are selected for bulk status update or bulk assignment.",
      "navigates_to": [
        "job_detail",
        "dashboard"
      ]
    },
    {
      "page_id": "job_detail",
      "page_title": "Job Details",
      "route_path": "/jobs/:jobId",
      "route_params": [
        "jobId"
      ],
      "image_indices": [],
      "description": "Comprehensive job detail page showing all information for a single job. Header section displays Job ID, Title, and action buttons: Edit (opens modal to edit title, description, priority, due date, department, tags), Assign/Reassign (opens modal with searchable user dropdown), Change Status (dropdown with valid transitions: New→Assigned→In Progress→Pending Review→Completed, plus Blocked and Cancelled from any state), Cancel Job (confirmation dialog requiring reason), Reopen (for completed jobs, confirmation dialog). Left panel shows job metadata: Status badge, Priority badge, Job Type, Created By (avatar + name), Assignee (avatar + name), Department, Due Date (highlighted red if overdue), Created Date, Last Updated Date, Total Time Logged (computed sum). Tags displayed as colored chips with ability to add/remove tags via popover. Right panel has tabbed sections: (1) Description tab showing rich text description. (2) Checklists tab showing all checklists with title, completion percentage progress bar, and checklist items as checkboxes with description, optional assignee avatar, and drag-and-drop reorder handles. 'Add Checklist' button opens inline form. 'Add Item' button per checklist. Items can be marked complete/incomplete by clicking checkbox. (3) Comments tab showing chronological list (newest first) with author avatar, name, timestamp, comment text, @mention highlights. 'Add Comment' text area with submit button. Edit button (within 15 min) and delete button on own comments. (4) Attachments tab showing file list with name, size, upload date, uploader name, download button, preview button for images (inline modal), delete button. 'Upload Attachment' button with drag-and-drop zone supporting PDF, DOC, DOCX, XLS, XLSX, JPG, PNG, GIF, ZIP up to 10MB each. (5) Time Logs tab showing table with columns: User, Start Time, End Time, Duration, Notes. 'Log Time' button opens modal with start time, end time (auto-calculates duration), notes field. 'Start Timer' button for live tracking with 'Stop Timer' to end. Total time summary at top. (6) History tab showing audit trail with timestamp, user, action description (e.g., 'Status changed from In Progress to Pending Review'), before/after values. Sub-jobs section at bottom showing linked child jobs as compact cards with title, status, assignee, with 'Add Sub-Job' button opening create job modal with parent pre-set.",
      "navigates_to": [
        "job_list",
        "dashboard"
      ]
    },
    {
      "page_id": "departments",
      "page_title": "Departments",
      "route_path": "/departments",
      "route_params": [],
      "image_indices": [],
      "description": "Department and team organizational management page. Top section shows departments in a table or card grid with columns/fields: Name, Description, number of members, number of active jobs. 'Create Department' button opens a modal with fields: Name (required), Description (text area). Each department card/row has Edit button (modal with pre-filled fields), Delete button (confirmation dialog, blocked if department has active jobs or members with warning message). Clicking a department expands or navigates to show its teams. Teams section within each department shows table with columns: Team Name, Description, Team Lead, Member Count, Active Jobs Count. 'Create Team' button opens modal with fields: Name (required), Description, Department (pre-selected), Team Lead (dropdown). Each team row has Edit button (modal), Delete button (confirmation, blocked if active jobs), and a 'View Members' action that expands inline to show member list with name, role, email. 'Add Member' button opens modal with searchable user dropdown to assign user to team. 'Remove Member' action on each member row with confirmation.",
      "navigates_to": [
        "dashboard"
      ]
    },
    {
      "page_id": "reports",
      "page_title": "Reports",
      "route_path": "/reports",
      "route_params": [],
      "image_indices": [],
      "description": "Reporting and analytics page. Top section shows predefined report cards: Jobs by Status, Jobs by Priority, Job Completion Rate, Average Completion Time, Overdue Analysis. Each card shows a summary metric value. Filter panel with: Date Range picker, Department dropdown, Job Type dropdown, Status multi-select, Priority multi-select. 'Generate Report' button triggers report computation. Results displayed in dual format: tabular data table with sortable columns and visual charts (bar chart for jobs by status, pie chart for jobs by priority, line chart for completion trends over time). Metrics displayed: total jobs, completion rate percentage, average completion time, on-time completion rate, overdue percentage. Export buttons for PDF, Excel, CSV formats. 'Save Report' button opens modal to name and save report configuration. Saved reports list shown in sidebar or tab with name, last generated date, and 'Run' button. Report detail accessible by clicking a saved report showing full parameters and last results. Create Report button opens modal with fields: Report Name, Report Type dropdown, Parameters (date range, filters), Schedule (optional cron-like frequency for automated generation).",
      "navigates_to": [
        "dashboard"
      ]
    },
    {
      "page_id": "notifications",
      "page_title": "Notifications",
      "route_path": "/notifications",
      "route_params": [],
      "image_indices": [],
      "description": "Notification center page showing all notifications for the current user. Header shows unread count badge. 'Mark All as Read' button at top. List of notifications in reverse chronological order, each showing: notification icon (type-specific: assignment, status change, mention, due soon, overdue), message text, timestamp (relative like '2 hours ago'), read/unread indicator (bold for unread, normal for read). Clicking a notification marks it as read and navigates to the related job detail page. Filter tabs: All, Unread, Read. Notification types include: job assignment, job reassignment, status change, @mention in comment, job due within 24 hours, overdue job alert, job completion/cancellation. Notification preferences section accessible via gear icon opening a modal/drawer with toggles for each notification type for in-app and email channels.",
      "navigates_to": [
        "job_detail",
        "dashboard"
      ]
    },
    {
      "page_id": "configuration",
      "page_title": "Configuration",
      "route_path": "/configuration",
      "route_params": [],
      "image_indices": [],
      "description": "System configuration page for admins to manage job-related settings. Organized in tabs or sections: (1) Job Types tab: table with columns Name, Description, Color (color swatch), Icon, Active/Inactive toggle. 'Add Job Type' button opens modal with fields: Name, Description, Color picker, Icon selector, Active toggle. Edit and Delete actions per row. Delete confirmation dialog. (2) Job Statuses tab: table with columns Name, Color, Order, Is Default toggle. Shows workflow transitions visually or as a list. 'Add Status' button opens modal with Name, Color picker, Order number. Edit and Delete per row. (3) Job Priorities tab: table with columns Name, Color, Level/Order. Default priorities shown: Low (green), Medium (yellow), High (orange), Critical (red). 'Add Priority' button opens modal. Edit to customize labels and colors. Delete with confirmation. (4) Tags tab: table with columns Name, Color, Usage Count. 'Add Tag' button opens modal with Name and Color picker. Edit and Delete per row. Bulk delete option. Search/filter within each tab. All changes take effect immediately with success toast notifications.",
      "navigates_to": [
        "dashboard"
      ]
    }
  ],
  "shared_state": [
    {
      "key": "currentUser",
      "type": "{ id: string; firstName: string; lastName: string; email: string; role: string; departmentId: string; avatar?: string } | null",
      "initial_value": "null",
      "description": "Currently authenticated user's profile and role information, used for RBAC across all pages"
    },
    {
      "key": "selectedJobId",
      "type": "string | null",
      "initial_value": "null",
      "description": "Currently selected job ID for navigation between job list and job detail pages"
    },
    {
      "key": "unreadNotificationCount",
      "type": "number",
      "initial_value": "0",
      "description": "Count of unread notifications displayed in the header badge across all pages"
    },
    {
      "key": "jobFilters",
      "type": "{ status?: string[]; priority?: string[]; assigneeId?: string; departmentId?: string; jobTypeId?: string; dateRange?: [string, string]; search?: string }",
      "initial_value": "{}",
      "description": "Persisted job list filters so users retain their filter state when navigating back to job list"
    }
  ],
  "default_route": "dashboard",
  "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": {}
  }
}