🚀 [FEATURE] Production-Ready Member Review Page for Commdesk Admin

Start by locating the existing admin architecture and theme.config.ts, then trace the entry point for /admin/members/:memberId/review and identify the available UI primitives. Use Vitest and React Testing Library for the listed profile, analytics, task, control, chart, status, and responsive behaviors; done means the full responsive, themed, accessible page satisfies the acceptance checklist.

Build a fully production-ready Member Review Page for the Commdesk Admin application based on the provided design reference.

The page should provide administrators and moderators with:

• Member profile overview
• Performance analytics
• Task management workflows
• Reputation tracking
• Expertise management
• Administrative controls

The implementation must follow Commdesk’s scalable architecture, centralized theme system, accessibility standards, and reusable component patterns.

---

🎨 Design Reference

Reference Screen

---

🎯 Objectives

Primary Goals

• Create an enterprise-grade member management and review interface
• Improve moderation and governance workflows
• Surface member activity and reputation insights
• Enable scalable administrative controls
• Maintain UI consistency across admin modules

---

🖼️ Feature Requirements

1. Member Review Page

Route

/admin/members/:memberId/review

---

Page Responsibilities

• Display member profile information
• Monitor performance metrics
• Manage member-related tasks
• View expertise and reputation
• Perform administrative actions
• Review recent activity and completed work

---

2. Layout Structure

Sidebar Navigation

Include

• Dashboard
• Users
• Analytics
• Reports
• Settings
• Support
• Sign Out

---

Requirements

• Active route highlighting
• Collapsible sidebar
• Mobile responsive navigation
• Theme-aware styling
• Shared admin layout integration

---

Top Navigation

Include

• Global member search
• Notifications icon
• Help icon
• Settings icon
• User profile/avatar

---

Functional Requirements

• Sticky header support
• Responsive search behavior
• Notification indicator support
• Keyboard accessibility

---

3. Member Profile Header

Display

• Member avatar
• Full name
• Role/title
• Location
• Joined date
• Reputation points
• Message button
• Edit profile button

---

Requirements

• Responsive profile layout
• Dynamic avatar fallback
• Reputation badge system
• Theme-aware controls

---

4. Member Analytics Overview

Required Metrics

Helpful Votes

• Total helpful votes
• Percentage growth indicator

Total Tasks

• Assigned/completed task count

Completion Rate

• Completion percentage
• Progress indicator

Engagement Score

• Performance grade/rating

---

Requirements

• Reusable analytics card component
• Animated number transitions
• Semantic metric indicators
• Responsive grid layout
• Loading skeleton support

---

5. Task Management Section

Required Categories

Urgent Tasks

Display:

• Task title
• Task description
• Priority label
• Due time

---

In Progress Tasks

Display:

• Task title
• Progress bar
• Completion percentage

---

Recently Completed Tasks

Display:

• Task title
• Completion timestamp
• Completion icon/status

---

Requirements

• Reusable task card components
• Progress tracking support
• Dynamic task statuses
• Accessible task list structure
• Loading/error/empty states

---

6. Reputation Growth Panel

Features

• Reputation trend visualization
• Monthly analytics overview
• Growth tracking support

---

Requirements

• Chart-ready architecture
• Responsive analytics panel
• Lazy-loaded chart support
• Theme-aware graph styling

---

7. Task Distribution Section

Display

• Distribution chart
• Task categories
• Percentage breakdown

---

Example Categories

• Moderation
• Content
• Tech Support

---

Requirements

• Reusable chart wrapper
• Responsive chart rendering
• Accessible legends
• Dynamic category support

---

8. Verified Expertise Section

Display

• Expertise tags/badges
• Verified skills
• Moderation specialties

---

Example Skills

• Conflict Resolution
• Strategic Planning
• Crisis Management
• Data Architecture
• Mentorship
• UX Advocacy

---

Requirements

• Reusable badge/tag component
• Responsive wrapping layout
• Dynamic expertise support

---

9. Administrative Controls Panel

Features

• Role assignment dropdown
• Account status toggle
• Restrict access action
• Member permission management

---

Requirements

• Permission-aware controls
• Confirmation workflow support
• Validation-safe updates
• Secure administrative actions

---

Supported Account States

• Active
• Suspended
• Restricted
• Pending Review

---

🌗 Theme & Design System Requirements

Mandatory Theme Support

• ☀️ Light Theme
• 🌙 Dark Theme

---

Theme Rules

Must Use

• theme.config.ts
• Shared semantic tokens
• Existing UI primitives

Avoid

• Hardcoded colors
• Inline styling
• Duplicated theme logic

---

🎨 Design Language

Maintain:

• Enterprise admin dashboard aesthetic
• Minimal modern layout
• Rounded corners
• Soft shadows
• Spacious spacing system
• Smooth hover transitions
• Professional moderation interface

---

🛠️ Technical Requirements

Frontend Stack

• React
• TypeScript
• Tailwind CSS

API Readiness

Prepare For

• Member profile APIs
• Task management APIs
• Analytics APIs
• Role assignment APIs
• Reputation tracking APIs

---

Requirements

• Typed service layer
• Error normalization
• Abortable requests
• Optimistic updates support

---

State Management

Handle:

• Loading states
• Empty states
• Error states
• Task update states
• Permission update states
• Analytics refresh states

---

Performance Requirements

Must Include

• Memoized components
• Optimized chart rendering
• Lazy-loaded analytics panels
• Efficient task rendering
• Skeleton loading UI

---

Accessibility Requirements

Must Support

• Keyboard navigation
• Screen readers
• Semantic HTML
• ARIA labels
• Accessible charts
• Proper focus states

---

Responsive Requirements

Support

• Desktop
• Laptop
• Tablet
• Mobile

---

Mobile Behavior

• Collapsible sidebar
• Stacked analytics cards
• Responsive charts
• Adaptive administrative controls
• Scroll-safe task panels

---

Testing Requirements

Required Coverage

• Profile rendering
• Analytics card rendering
• Task management interactions
• Administrative controls workflow
• Chart rendering
• Status updates
• Responsive layout behavior

---

Recommended Stack

• Vitest
• React Testing Library

---

Security & Validation

Requirements

• Permission-aware actions
• Secure role updates
• Input sanitization
• Safe account status transitions
• Confirmation handling for restricted actions

---

📦 Deliverables

• Fully responsive member review page
• Production-ready reusable components
• Typed API-ready architecture
• Accessible UI implementation
• Theme-aware dashboard integration
• Optimized analytics and task rendering
• Secure administrative controls foundation

---

✅ Acceptance Criteria

• Page matches provided design reference
• Fully responsive implementation
• Light/Dark theme support added
• Member profile header implemented
• Analytics cards implemented
• Task management section implemented
• Reputation growth panel implemented
• Task distribution section implemented
• Expertise section implemented
• Administrative controls implemented
• Loading/error/empty states handled
• Reusable component architecture followed
• Accessibility standards followed
• No hardcoded theme values
• Type-safe implementation completed
• Optimized rendering performance
• Test coverage added

---

🚀 Future Enhancements (Optional)

• Real-time member activity tracking
• AI-powered moderation insights
• Advanced reputation analytics
• Team collaboration workflows
• Audit history logs
• Member performance forecasting
• Role hierarchy management
• Integrated messaging system

---

📎 Notes

• Keep business logic separated from presentation components
• Ensure scalability for future moderation workflows
• Follow existing Commdesk admin architecture patterns
• Maintain consistency with spacing, typography, and motion system
• Prioritize maintainability, accessibility, and performance