🚀 [FEATURE] Create Production-Ready Sponsors & Partners

Start with the proposed src/pages/partners/PartnersPage.tsx structure and the listed components, hooks, services, schemas, types, and constants to understand the scope. Compare the implementation with existing Commdesk admin patterns, then verify the route, responsive themed UI, partner workflow, validation, state handling, accessibility, and required component and integration coverage against the acceptance criteria.

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

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

/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

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

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