Deliverables Section Demo

Toggle to test layout at drawer width for optimization

Columns 1 and 2 (Editable)

Opportunity and Quoted columns with full editing capabilities and ActivateLinks integration. Click the green + button in the Actions column to activate communication channels.

Creator
Channel
?
Handle
Type
Qty
Rate Card
Total
Comms and Link
?
Right-click icons to edit contact info
@Jimmy
$2,580
$3,840
Add new creator/deliverable
Total:$6,420
Currency selection applies to all creators and deliverables above. Excludes Taxes

Columns 3, 4 and 5

In Progress, Approval Pending, and Live columns with restricted editing and ActivateLinks integration. Limited editing capabilities to reflect real-world workflow constraints.

Creator
Channel
?
Handle
Type
Qty
Rate Card
Total
Comms and Link
?
Right-click icons to edit contact info
@Jimmy
$2,580
Total:$2,580
Currency selection applies to all creators and deliverables above. Excludes Taxes

Data Structure Explanation

Database Relationships:

  • • Creators - Main entity with name, email, phone
  • • Creator Social Accounts - Links creators to their social handles (1:many)
  • • Rate Cards - Can be linked to specific creators or global
  • • Deliverables - References creator, platform, and rate card

Creator Dependency Rules:

  • • No Creator Selected: All fields show empty state with placeholders
  • • "Add New": Opens creator directory to create new creators or select existing ones
  • • Named Creator: All fields enabled including social handles and communication
  • • Visual indicators (opacity, disabled states) show field availability
  • • Dynamic column spacing prevents overflow with long creator names

Component Reusability:

  • • Shared Components: Both sections use the same underlying DeliverablesSectionV2 component
  • • Single Deliverable Wrapper: DeliverablesSectionSingle wraps the main component for single-item display
  • • Consistent Behavior: Changes to the core component automatically apply to both sections
  • • Configurable Features: Add button and delete functionality can be enabled/disabled per use case
  • • Data Synchronization: Creator updates propagate across both multi and single deliverable views

New Features:

  • • Loading States: Comprehensive loading skeleton, spinner, and progress indicators
  • • Error Handling: Graceful error states with retry mechanisms and user feedback
  • • Accessibility: ARIA labels, keyboard navigation, screen reader support, and semantic HTML
  • • Responsive Design: Mobile-optimized layouts with touch-friendly interactions
  • • User Experience: Loading overlays, upload progress, and status indicators