Implement a fully production-ready **Sponsors & Partners Management Page** for the Commdesk Admin Dashboard based on the provided design reference. This feature should provide admins with a scalable interface to: * Add and manage sponsors/partners * Auto-fill company information * Track partnership activities * Manage sponsorship tiers * Handle future integrations cleanly The implementation must follow the existing Commdesk architecture, theme system, accessibility standards, and reusable component patterns. --- # 🎨 Design Reference ### Reference Screen <img width="1600" height="1281" alt="Image" src="https://github.com/user-attachments/assets/758aab43-e1da-40ef-9fdb-353bcfba8b00" /> ### Core UI Includes * Enterprise admin layout * Sidebar navigation * Partner onboarding form * Company auto-fill workflow * Suggested partners section * Recent partnership activity timeline * Tier selection UI * Responsive enterprise dashboard design --- # 🎯 Objectives ## Primary Goals * Create a production-ready partner management workflow * Improve sponsor onboarding experience * Maintain scalable architecture * Ensure consistent design language * Support light/dark themes globally --- # 🖼️ Feature Requirements # 1. Partners Dashboard Page ## Route ```txt id="b9p5ez" /admin/partners ``` ## Page Responsibilities * Add sponsors/partners * Edit partner data * View recent partnerships * Manage tiers * Search companies * Auto-fill company details --- # 2. Layout Structure ## Top Navigation Include: * Brand logo * Main navigation tabs * Notifications * Settings * User avatar/profile menu --- ## Sidebar Navigation Include: * Dashboard * Analytics * Users * Reports * Settings * Support * Sign Out ### Requirements * Active route state * Collapsible behavior * Responsive layout * Theme-aware styling --- # 3. Add New Partner Section ## Features * Company search * Auto-fill support * Editable company information * Form validation * API-ready architecture --- ## Search Input ### Placeholder ```txt id="f6ifco" Search for a company (e.g., Stripe, AWS, Google)... ``` ### Functional Requirements * Debounced search * Keyboard navigation * Loading state * Empty state * API integration-ready --- ## Auto-fill Workflow ### Display * Company found state * Auto-fill preview * Apply Auto-fill CTA ### Requirements * Graceful fallback handling * Editable after auto-fill * Validation-safe updates --- # 4. Partner Information Form ## Required Fields ### Basic Information * Company Logo Upload * Company Name * Industry * Website URL * Description --- ### Partnership Information * Partnership Tier * Active Tracks/Tags * Sponsorship Category --- ### Contact Information * Primary Contact Name * Contact Email --- ## Validation Rules ### Company Name * Required * Min length validation ### Website * Valid URL format ### Email * RFC-compliant email validation ### Description * Character limit support --- # 5. Partnership Tier Selector ## Supported Tiers * Gold * Silver * Bronze --- ## Requirements * Card-based selection UI * Active/hover/focus states * Keyboard accessibility * Fully theme-aware --- # 6. Suggested Partners Panel ## Features Display: * Partner logo/icon * Partner name * Industry/category * Quick add button --- ## Suggested Examples * AWS * MongoDB Atlas * Mixpanel --- ## Functional Requirements * Scrollable list * Lazy rendering support * Loading skeletons * Empty state handling --- # 7. Recent Partners Activity ## Activity Timeline Display: * Recently added partners * Added timestamps * Partnership tiers * Timeline indicators --- ## Requirements * Relative timestamps * Responsive layout * Reusable timeline component --- # 8. Action Buttons ## Footer Actions * Cancel * Add Partner --- ## Requirements * Loading states * Disabled states * Submission validation * Prevent duplicate requests --- # 🌗 Theme & Design System Requirements ## Mandatory Theme Support * ☀️ Light Theme * 🌙 Dark Theme --- ## Theme Rules Use only: * `theme.config.ts` * Shared design tokens * Existing semantic color system Avoid: * Hardcoded colors * Inline styles * Component-level theme duplication --- ## Design Language Maintain: * Enterprise dashboard aesthetic * Soft shadows * Rounded corners * Clean spacing * Smooth transitions * Minimal modern UI --- # 🛠️ Technical Requirements # Frontend Stack * React * TypeScript * Tailwind CSS --- # Architecture Requirements ## Folder Structure ```bash id="0dww3i" src/ ├── pages/ │ └── partners/ │ └── PartnersPage.tsx │ ├── components/ │ └── partners/ │ ├── PartnerSearch.tsx │ ├── PartnerForm.tsx │ ├── PartnerTierSelector.tsx │ ├── SuggestedPartners.tsx │ ├── RecentPartners.tsx │ ├── PartnerCard.tsx │ ├── PartnerTimeline.tsx │ └── PartnerTags.tsx │ ├── hooks/ │ ├── usePartners.ts │ └── usePartnerSearch.ts │ ├── services/ │ └── partners.service.ts │ ├── schemas/ │ └── partner.schema.ts │ ├── types/ │ └── partner.types.ts │ └── constants/ └── partner.constants.ts ``` --- # State Management Handle: * Loading * Success * Error * Empty * Validation * Optimistic UI updates --- # API Readiness ## Prepare for: * Company search API * Auto-fill integrations * CRUD operations * File uploads --- ## Requirements * Typed service layer * Error normalization * Request cancellation support --- # Form Management Recommended: * React Hook Form * Zod validation --- # Performance Requirements ## Must Include * Memoized components * Lazy rendering where needed * Optimized re-renders * Debounced search input --- # Accessibility Requirements ## Must Support * Keyboard navigation * Screen readers * Focus management * Semantic HTML * ARIA labels * Accessible modals/forms --- # Responsive Requirements ## Breakpoints Support: * Desktop * Laptop * Tablet * Mobile --- ## Mobile Behavior * Collapsible sidebar * Stacked layout * Responsive forms * Scroll-safe panels --- # Testing Requirements ## Required Coverage * Component rendering * Form validation * Tier selection * Search interactions * Submission workflow --- ## Recommended Stack * Vitest * React Testing Library --- # Error Handling ## Include * API failure UI * Retry handling * Validation feedback * Toast notifications --- # Security & Validation ## Requirements * Input sanitization * File validation * Safe URL handling * Prevent duplicate submissions --- # 📦 Deliverables * Fully responsive Sponsors & Partners page * Production-ready reusable components * Theme-aware implementation * Accessible UI * Validated forms * API-ready architecture * Clean TypeScript typings * Reusable hooks/services --- # ✅ Acceptance Criteria * [ ] Page matches provided design closely * [ ] Fully responsive implementation * [ ] Production-ready architecture * [ ] Light/Dark theme support * [ ] Search + auto-fill workflow implemented * [ ] Form validation completed * [ ] Tier selection implemented * [ ] Suggested partners panel implemented * [ ] Recent activity timeline implemented * [ ] Loading/error/empty states handled * [ ] Accessibility standards followed * [ ] No hardcoded theme values * [ ] Type-safe implementation * [ ] Optimized rendering performance * [ ] Unit/integration tests added * [ ] Clean reusable component structure * [ ] Code follows existing project conventions --- # 🚀 Future Enhancements (Optional) * AI-generated sponsor recommendations * CRM integrations * Partner analytics * Multi-admin collaboration * Activity audit logs * CSV import/export * Real-time updates * Sponsor contract management --- # 📎 Notes * Keep implementation modular and scalable * Prioritize maintainability and developer experience * Ensure consistency with existing Commdesk admin patterns * Avoid tightly coupled business logic inside UI components
Implement a fully production-ready Sponsors & Partners Management Page for the Commdesk Admin Dashboard based on the provided design reference.
This feature should provide admins with a scalable interface to:
The implementation must follow the existing Commdesk architecture, theme system, accessibility standards, and reusable component patterns.
🎨 Design Reference
Reference Screen
Core UI Includes
🎯 Objectives
Primary Goals
🖼️ Feature Requirements
1. Partners Dashboard Page
Route
Page Responsibilities
2. Layout Structure
Top Navigation
Include:
Sidebar Navigation
Include:
Requirements
3. Add New Partner Section
Features
Search Input
Placeholder
Functional Requirements
Auto-fill Workflow
Display
Requirements
4. Partner Information Form
Required Fields
Basic Information
Partnership Information
Contact Information
Validation Rules
Company Name
Website
Email
Description
5. Partnership Tier Selector
Supported Tiers
Requirements
6. Suggested Partners Panel
Features
Display:
Suggested Examples
Functional Requirements
7. Recent Partners Activity
Activity Timeline
Display:
Requirements
8. Action Buttons
Footer Actions
Requirements
🌗 Theme & Design System Requirements
Mandatory Theme Support
Theme Rules
Use only:
theme.config.tsAvoid:
Design Language
Maintain:
🛠️ Technical Requirements
Frontend Stack
Architecture Requirements
Folder Structure
src/ ├── pages/ │ └── partners/ │ └── PartnersPage.tsx │ ├── components/ │ └── partners/ │ ├── PartnerSearch.tsx │ ├── PartnerForm.tsx │ ├── PartnerTierSelector.tsx │ ├── SuggestedPartners.tsx │ ├── RecentPartners.tsx │ ├── PartnerCard.tsx │ ├── PartnerTimeline.tsx │ └── PartnerTags.tsx │ ├── hooks/ │ ├── usePartners.ts │ └── usePartnerSearch.ts │ ├── services/ │ └── partners.service.ts │ ├── schemas/ │ └── partner.schema.ts │ ├── types/ │ └── partner.types.ts │ └── constants/ └── partner.constants.tsState Management
Handle:
API Readiness
Prepare for:
Requirements
Form Management
Recommended:
Performance Requirements
Must Include
Accessibility Requirements
Must Support
Responsive Requirements
Breakpoints
Support:
Mobile Behavior
Testing Requirements
Required Coverage
Recommended Stack
Error Handling
Include
Security & Validation
Requirements
📦 Deliverables
✅ Acceptance Criteria
🚀 Future Enhancements (Optional)
📎 Notes