Skip to content

[Feature] Squad dashboard UI — aggregate stats and member list #17

@grovecj

Description

@grovecj

Summary

Build the squad dashboard view showing collective stats, individual member breakdowns, and squad management.

Details

Squad Dashboard Layout

┌─────────────────────────────────────────────┐
│  Squad Name: "The Boys"          [Edit] [⚙] │
├─────────────────────────────────────────────┤
│  AGGREGATE STATS                             │
│  [Total Kills: 45k] [Total Wins: 890]       │
│  [Avg K/D: 1.35]    [Total Time: 120d]      │
├─────────────────────────────────────────────┤
│  SQUAD RECORDS                               │
│  🏆 Most Kills: player2 (18,000)            │
│  🏆 Best K/D: player1 (1.8)                 │
│  🏆 Most Wins: player3 (400)                │
├─────────────────────────────────────────────┤
│  MEMBERS                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐       │
│  │ P1   │ │ P2   │ │ P3   │ │ P4   │       │
│  │1.8KD │ │1.5KD │ │1.2KD │ │0.9KD │       │
│  └──────┘ └──────┘ └──────┘ └──────┘       │
├─────────────────────────────────────────────┤
│  CHARTS                                      │
│  [Overlaid Radar] [Kill Distribution Bar]    │
└─────────────────────────────────────────────┘

Components

SquadDashboard/
├── SquadHeader.vue          // Name, edit, settings
├── SquadAggregateStats.vue  // Collective stats cards
├── SquadRecords.vue         // Top performer per stat
├── SquadMemberCards.vue     // Member cards with mini stats
├── SquadCharts.vue          // Overlaid radar + bar charts
└── SquadManage.vue          // Add/remove members modal

Squad Management

  • Add member: Search modal (reuse player search component)
  • Remove member: Confirm dialog before removal
  • Edit squad name: Inline editable text
  • Delete squad: Confirmation dialog with squad name typed to confirm

Charts

Navigation

  • Squad list page at /squads showing all saved squads as cards
  • Each card shows squad name, member count, avg K/D
  • Click card → /squad/:id dashboard

Acceptance Criteria

  • Squad dashboard displays aggregate and individual stats
  • Squad records highlight top performers
  • Member cards link to individual player pages
  • Charts render with all member data overlaid
  • Squad management (add/remove/edit/delete) works
  • Squad list page shows all squads

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions