🚀 [FEATURE] Production-Ready Join Request Management Page for Commdesk Admin

Build a fully production-ready Join Request Management Page for the Commdesk Admin application based on the provided design reference.

This page should provide administrators and moderators with a centralized workflow to:

• Review community applications
• Filter applicants
• Track cohort capacity
• Monitor applicant reputation
• Manage approval pipelines
• Analyze application metrics

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 applicant review system
• Improve application moderation workflows
• Provide scalable filtering and management
• Surface actionable application insights
• Maintain consistent admin dashboard UI/UX

---

🖼️ Feature Requirements

1. Join Request Management Page

Route

/admin/join-requests

---

Page Responsibilities

• Display applicant records
• Review incoming applications
• Filter applicants by reputation and skills
• Monitor cohort capacity
• Manage approval pipeline
• Track review statuses

---

2. Dashboard Layout

Sidebar Navigation

Include

• Dashboard
• Members
• Resources
• Analytics
• Events
• Governance
• Support
• Logout

---

Requirements

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

---

Top Navigation

Include

• Global application search
• Notifications icon
• Settings icon
• User profile/avatar

---

Functional Requirements

• Sticky header support
• Responsive search behavior
• Keyboard accessibility
• Notification-ready structure

---

3. Page Header Section

Display

• Page title
• Description/subtitle
• Invite Member CTA button

---

Requirements

• Responsive layout
• Theme-aware buttons
• Accessible action controls

---

4. Application Analytics Cards

Required Metrics

Pending Requests

• Total pending applications
• Weekly growth percentage

Reviewed Applicants

• Total reviewed applicants
• Acceptance rate percentage

Cohort Capacity

• Capacity utilization percentage
• Filled vs available slots
• Progress indicator bar

---

Requirements

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

---

5. Advanced Filter Section

Required Filters

Status Filter

• All Applications
• Under Review
• Pending
• Waitlisted
• Approved
• Rejected

---

Reputation Range

• Minimum reputation input
• Maximum reputation input

---

Location Filter

• City or region search

---

Technical Skills Filter

• Multi-select skills dropdown

---

Requirements

• Debounced filtering
• Query param synchronization
• Reset/Clear filters support
• Accessible form controls
• Mobile responsive filters

---

6. Applications Data Table

Required Columns

Column	Description
Applicant Name	Avatar, name, applied timestamp
Location	Applicant location
Primary Skill	Skill badge
Reputation	Score + progress bar
Status	Application status
Team Feed	Collaboration activity
Action	View application

---

7. Applicant Profile Cell

Display

• Applicant avatar
• Full name
• Applied timestamp

---

Requirements

• Avatar fallback support
• Responsive layout
• Accessible profile preview

---

8. Reputation System

Features

• Reputation score
• Visual progress bar
• Reputation ranking support

---

Requirements

• Semantic progress styling
• Theme-aware progress bars
• Reusable reputation component

---

9. Application Status System

Supported Statuses

• Under Review
• Pending
• Waitlisted
• Approved
• Rejected

---

Requirements

• Semantic status badges
• Accessible contrast ratios
• Reusable badge component
• Dynamic status rendering

---

10. Team Feed Indicators

Features

• Team collaboration activity icons
• Activity presence indicators
• Empty activity states

---

Requirements

• Tooltip-ready architecture
• Accessible icon buttons
• Dynamic activity rendering

---

11. Application Actions

Required Actions

• View Application
• Open detailed review workflow

---

Requirements

• Accessible action buttons
• Loading states
• Permission-aware actions

---

12. Pagination System

Features

• Previous/Next navigation
• Current page highlighting
• Ellipsis support
• Configurable page size

---

Requirements

• API-ready pagination structure
• Query synchronization
• Mobile responsive pagination

---

13. Floating Action Button

Features

• Quick communication access
• Moderator support shortcut
• Messaging workflow integration

---

Requirements

• Fixed floating positioning
• Accessible interaction states
• Theme-aware styling

---

🌗 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 theme styling
• Duplicate theme logic

---

🎨 Design Language

Maintain:

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

---

🛠️ Technical Requirements

Frontend Stack

• React
• TypeScript
• Tailwind CSS

API Readiness

Prepare For

• Applications listing APIs
• Filter/search APIs
• Reputation APIs
• Cohort metrics APIs
• Approval workflow APIs
• Invitation APIs

---

Requirements

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

---

State Management

Handle:

• Loading states
• Empty states
• Error states
• Filter states
• Pagination states
• Review workflow states
• Invitation states

---

Performance Requirements

Must Include

• Memoized table rows
• Optimized filtering logic
• Debounced search/filter updates
• Skeleton loading UI
• Efficient table rendering
• Lazy-loaded dropdowns

---

Accessibility Requirements

Must Support

• Keyboard navigation
• Screen readers
• Semantic HTML
• ARIA labels
• Accessible tables/forms
• Proper focus management

---

Responsive Requirements

Support

• Desktop
• Laptop
• Tablet
• Mobile

---

Mobile Behavior

• Collapsible sidebar
• Scrollable table container
• Stacked filters
• Responsive analytics cards
• Adaptive pagination controls

---

Testing Requirements

Required Coverage

• Table rendering
• Filter functionality
• Pagination workflow
• Reputation rendering
• Status badge rendering
• View action workflow
• Responsive behavior
• Loading/error states

---

Recommended Stack

• Vitest
• React Testing Library

---

Security & Validation

Requirements

• Permission-aware review actions
• Secure application handling
• Input sanitization
• Safe filtering/query handling
• Protected invitation workflow

---

📦 Deliverables

• Fully responsive Join Request Management page
• Production-ready reusable components
• Typed API-ready architecture
• Accessible UI implementation
• Theme-aware dashboard integration
• Optimized filtering and rendering workflows
• Scalable moderation system foundation

---

✅ Acceptance Criteria

• Page matches provided design reference
• Fully responsive implementation
• Light/Dark theme support added
• Analytics cards implemented
• Advanced filters implemented
• Applications table implemented
• Reputation system implemented
• Status badges implemented
• Pagination implemented
• Floating action button 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)

• AI-powered applicant scoring
• Real-time moderation collaboration
• Video interview integrations
• Automated approval workflows
• Skill verification system
• Community recommendation engine
• Applicant analytics dashboard
• Bulk approval/review actions

---

📎 Notes

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