🚀 [FEATURE] Production-Ready Sponsors & Partners Directory Page

Start by inspecting the existing admin dashboard patterns, shared UI primitives, and theme.config.ts, then review the proposed sponsors page and component structure under src/pages/sponsors and src/components/sponsors. Check the hooks, service, schema, types, constants, and testing requirements listed in the issue. Done means the route and dashboard workflows meet the stated responsive, theme, accessibility, state, API-readiness, and acceptance criteria.

🚀 [FEATURE] Production-Ready Sponsors & Partners Directory Dashboard for Commdesk Admin

📌 Summary

Build a fully production-ready Sponsors & Partners Directory Dashboard for the Commdesk Admin application based on the provided design reference.

This feature will provide administrators with a centralized dashboard to:

• View all sponsors and partners
• Filter and search partner records
• Track active partnerships
• Monitor renewals and engagement
• Manage sponsor statuses and categories
• Export partner data

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

---

🎨 Design Reference

Reference Screen

---

🎯 Objectives

Primary Goals

• Create a scalable enterprise-grade sponsor management dashboard
• Improve sponsor tracking and visibility
• Provide advanced filtering and management workflows
• Maintain design consistency across the admin application
• Support future integrations and analytics features

---

🖼️ Feature Requirements

1. Sponsors & Partners Dashboard Page

Route

/admin/sponsors-partners

---

Page Responsibilities

• Display sponsor/partner records
• Filter and search partners
• View partnership tiers
• Monitor statuses
• Manage events participation
• Navigate sponsor actions

---

2. Dashboard Layout

Sidebar Navigation

Include

• Dashboard
• Sponsors & Partners
• Events
• Members
• Analytics
• Settings

---

Requirements

• Active route highlighting
• Collapsible sidebar
• Responsive mobile behavior
• Theme-aware styling
• Shared layout integration

---

Top Navigation

Include

• Global search input
• Notifications
• User profile/avatar
• Role label
• Responsive controls

---

3. Sponsors & Partners Header Section

Content

• Page title
• Description/subtitle
• Export CSV button
• Add Partner button

---

Functional Requirements

Export CSV

• Export visible/filterable records
• CSV-ready structure
• Loading state support

Add Partner

• Open create partner workflow/modal/page

---

4. Search & Filter Section

Search Input

Placeholder

Search by name or partner ID...

---

Filters

Required Filters

• Tier Filter
• Category Filter
• Status Filter

---

Requirements

• Debounced search
• Query param sync
• Reset filters support
• Accessible dropdowns
• Mobile responsive filters

---

5. Sponsors & Partners Table

Required Columns

Column	Description
Partner Name	Logo, company name, partner ID
Tier	Sponsorship tier badge
Category	Sponsor category
Active Events	Number of active events
Status	Active/Pending/Expired
Actions	Context menu/actions

---

6. Table Features

Requirements

• Responsive table layout
• Sticky table header
• Pagination support
• Empty state UI
• Loading skeletons
• Sort-ready architecture
• Reusable data table component

---

Row Actions

Support

• View Details
• Edit Partner
• Archive Partner
• Delete Partner
• Change Status

---

7. Partnership Tier Badges

Supported Tiers

• Platinum
• Gold
• Silver
• Media
• Community

---

Requirements

• Theme-aware badges
• Semantic color mapping
• Reusable badge component

---

8. Partner Status System

Supported Statuses

• Active
• Pending
• Expired

---

Requirements

• Semantic status indicators
• Accessible contrast ratios
• Reusable status component

---

9. Pagination System

Features

• Previous/Next navigation
• Current page highlighting
• Ellipsis support
• Mobile-friendly pagination

---

Requirements

• API-ready pagination architecture
• Query synchronization
• Configurable page sizes

---

10. Dashboard Analytics Cards

Required Metrics

Cards

• Total Partners
• Active Tiers
• Upcoming Renewals
• Partner Engagement

---

Requirements

• Responsive grid layout
• Animated number transitions
• Theme-aware cards
• Reusable analytics card component

---

🌗 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 dashboard aesthetic
• Clean minimal layout
• Rounded corners
• Soft shadows
• Spacious UI
• Smooth hover transitions
• Professional admin feel

---

🛠️ Technical Requirements

Frontend Stack

• React
• TypeScript
• Tailwind CSS

---

Architecture Requirements

Suggested Structure

src/
 ├── pages/
 │    └── sponsors/
 │         └── SponsorsDirectoryPage.tsx
 │
 ├── components/
 │    └── sponsors/
 │         ├── SponsorsTable.tsx
 │         ├── SponsorRow.tsx
 │         ├── SponsorFilters.tsx
 │         ├── SponsorSearch.tsx
 │         ├── SponsorAnalyticsCard.tsx
 │         ├── SponsorStatusBadge.tsx
 │         ├── SponsorTierBadge.tsx
 │         ├── SponsorPagination.tsx
 │         └── SponsorActionsMenu.tsx
 │
 ├── hooks/
 │    ├── useSponsors.ts
 │    ├── useSponsorFilters.ts
 │    └── useSponsorPagination.ts
 │
 ├── services/
 │    └── sponsors.service.ts
 │
 ├── schemas/
 │    └── sponsor.schema.ts
 │
 ├── types/
 │    └── sponsor.types.ts
 │
 └── constants/
      └── sponsor.constants.ts

---

API Readiness

Prepare For

• Paginated sponsor APIs
• Search APIs
• Filter APIs
• CSV export APIs
• Status management APIs

---

Requirements

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

---

State Management

Handle:

• Loading
• Empty
• Error
• Success
• Pagination state
• Filter state
• Search state

---

Performance Requirements

Must Include

• Memoized rows/components
• Virtualization-ready architecture
• Debounced search
• Optimized rendering
• Lazy-loaded dropdowns where appropriate

---

Accessibility Requirements

Must Support

• Keyboard navigation
• Screen readers
• Proper focus states
• Semantic HTML
• ARIA labels
• Accessible dropdowns/tables

---

Responsive Requirements

Support

• Desktop
• Laptop
• Tablet
• Mobile

---

Mobile Behavior

• Collapsible sidebar
• Scrollable table container
• Stacked filters
• Responsive analytics cards

---

Testing Requirements

Required Coverage

• Table rendering
• Search functionality
• Filtering logic
• Pagination workflow
• Badge rendering
• Export action
• Row actions

---

Recommended Stack

• Vitest
• React Testing Library

---

Security & Validation

Requirements

• Safe query handling
• Input sanitization
• CSV injection prevention
• Permission-aware actions
• Secure export handling

---

📦 Deliverables

• Fully responsive Sponsors Directory Dashboard
• Production-ready reusable components
• Typed API-ready architecture
• Accessible UI implementation
• Theme-aware design system integration
• Optimized rendering and filtering system
• Pagination-ready table infrastructure

---

✅ Acceptance Criteria

• Dashboard matches provided design reference
• Fully responsive implementation
• Light/Dark theme support added
• Search and filters working
• Sponsor table implemented
• Pagination implemented
• Analytics cards implemented
• Row actions implemented
• Export CSV workflow added
• Empty/loading/error 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 sponsor activity updates
• Advanced analytics dashboard
• Sponsor contract tracking
• CRM integrations
• AI-powered sponsor recommendations
• Bulk partner management
• Activity audit logs
• Drag-and-drop table customization

---

📎 Notes

• Prioritize scalability and maintainability
• Keep business logic outside presentation components
• Follow existing Commdesk admin dashboard patterns
• Ensure consistency with existing spacing, typography, and motion system