DemoBuy

Team Screens

Last updated on 2026-05-31

The Help Desk Kit includes 4 team management screens for organizing agents, managing permissions, scheduling shifts, and balancing workload. All screens live under the /team/ route within the (app) route group.

Team Directory

Route: /team

Team management hub with agent cards, status monitoring, and capacity tracking.

  • Agent card grid -- responsive grid of team member cards, each showing:
    • Avatar and name
    • Email address
    • Role badge (Admin/Supervisor/Senior Agent/Agent)
    • Department label
    • Status indicator (online/offline/away) via AgentStatusIndicator
    • Current workload bar (tickets assigned vs max capacity)
    • Skills tags
    • Joined date
  • Expanded card view -- click a card to expand and see full profile with performance summary, schedule, permissions, and ticket history
  • Card actions -- edit role, change department, adjust capacity, deactivate
  • Toolbar -- search, filter by role/department/status, "Invite Member" button
  • Invite Member modal -- email input, role selector, department assignment, permissions checklist

Key Components

import { TeamMemberGrid } from "@/components/team/team-member-grid"
import { AgentStatusIndicator } from "@/components/shared/agent-status-indicator"

Data Sources

Data Source Location
Agents agents data/seed.ts
Roles roles data/seed.ts

Roles & Permissions

Route: /team/roles

Access control management with role definitions and a permissions matrix.

  • Role list -- left panel listing roles (Admin, Supervisor, Senior Agent, Agent, Read-Only) with member count for each
  • Permissions matrix -- main area with a table where:
    • Rows are feature areas: Tickets, Customers, Knowledge Base, Chat, Reports, Settings, Team, Automation
    • Columns are permission levels: View, Create, Edit, Delete, Admin
    • Checkboxes at each intersection control access
  • Custom role creation -- form with name, description, and permissions checklist for creating new roles
  • Role comparison -- select 2 roles side-by-side to see permission differences highlighted
  • Audit log section -- recent permission changes showing who changed what and when

Permissions Matrix Example

Area View Create Edit Delete Admin
Tickets All All All Supervisor+ Admin
Customers All Agent+ Agent+ Supervisor+ Admin
Knowledge Base All Agent+ Agent+ Supervisor+ Admin
Chat All Agent+ Agent+ Supervisor+ Admin
Reports All Supervisor+ Supervisor+ Admin Admin
Settings Supervisor+ Admin Admin Admin Admin
Team Supervisor+ Admin Admin Admin Admin
Automation Supervisor+ Supervisor+ Supervisor+ Admin Admin

Key Components

import { RolesPermissionsMatrix } from "@/components/team/roles-permissions-matrix"

Agent Schedule

Route: /team/schedule

Shift scheduling calendar with drag-and-drop shift management and coverage tracking.

  • Calendar view -- week view with columns for each day and rows for each agent
  • Shift blocks -- colored by type:
    • Morning = blue
    • Afternoon = green
    • Night = purple
    • On-call = orange
  • Shift interactions -- drag to create or resize shifts, click to edit start/end time, break times, and notes
  • Navigation controls -- week navigator, "Today" button, view toggle (day/week/month)
  • Shift templates sidebar -- right sidebar with saved common shift patterns for quick application
  • Holidays list -- upcoming holidays with coverage implications
  • Coverage gaps -- time slots with no agent coverage highlighted in red with warning indicators
  • Daily summary -- bottom section showing total coverage hours and agent count per shift

Key Components

import { AgentSchedule } from "@/components/team/agent-schedule"

Data Sources

Data Source Location
Shifts shifts data/seed.ts
Agents agents data/seed.ts

Workload Distribution

Route: /team/workload

Balance and optimize ticket assignment across the team.

  • Workload overview -- bar chart showing each agent as a bar (height = assigned tickets), color-coded by capacity: green (under capacity), yellow (near capacity), red (over capacity)
  • Assignment rules panel -- configuration for assignment strategies:
    • Round-robin
    • Load-balanced
    • Skills-based
    • Manual
  • Rule configuration -- max tickets per agent, skill matching matrix, and priority weighting settings
  • Assignment preview -- real-time preview showing how the next 10 tickets would be distributed under the current rules
  • History chart -- workload distribution over time (stacked area chart by agent)
  • Rebalance action -- "Rebalance" button with preview of proposed reassignments before applying

Key Components

import { WorkloadDistribution } from "@/components/team/workload-distribution"

Next Steps

Previous

Reports Screens

Next

Automation Screens