As an admin user of the Hoory platform, I want to access the "Agent Activity" subsection within the report section, enabling me to visualize agent statuses per hour using a color-coded graph. I also require the flexibility to apply a custom date range filter to analyze agent activity within specific timeframes.

Acceptance Criteria:

Scenario 1: Accessing Agent Activity Subsection

When I log in to the Hoory platform and navigate to the Agent report section, I should see a clearly labeled "Agent Activity" subsection.

Scenario 2: Visualizing Agent Statuses

Within the "Agent Activity" subsection, there should be a graph that visually represents agent statuses per hour.

The graph should use three distinct colors:

Gray: Indicates "Offline" status.

Yellow: Indicates "Busy" status.

Green: Indicates "Online" status.

Scenario 3: Applying Date Filter

I should have the option to select a custom date range using a date filter.

The date filter should allow me to specify a start date and an end date to define the desired timeframe for the agent activity data.

Upon applying the date filter, the graph in the "Agent Activity" subsection should update to display data only within the selected date range.

Scenario 4: Default View

When initially accessing the "Agent Activity" subsection, it should display last 10 agent activity data for a default date range (e.g., the most recent 7 days).

The graph should be auto-generated based on this default date range.

If there are more agents I should see a pagination to see all agent activity.