Cross-Resource Report Creation UI

[halsk]

Cross-Resource Report Creation UI

Description

Implement the user interface for creating and configuring cross-resource reports.

Acceptance Criteria

• Create a multi-step form for report creation:

  • Step 1: Basic Report Information

    • Title field
    • Description field (optional)
    • Date range selector
    • Global analysis parameters (include threads, include reactions, etc.)

  • Step 2: Resource Selection

    • List of available integrations (Slack workspaces, GitHub repos, etc.)
    • For each integration, display available resources
    • Allow filtering and searching resources
    • Support selecting/deselecting resources
    • Show previously selected resources as pre-selected

  • Step 3: Review and Submit

    • Summary of selections
    • Option to save as template
    • Submit button to initiate analysis

• Implement responsive UI for all screens:

  • Mobile-friendly layout
  • Desktop optimization
  • Proper form validation
  • Loading states

• Implement navigation and state management:

  • Save form state between steps
  • Allow going back to previous steps
  • Validate each step before proceeding

• Create unit and integration tests for the components

Technical Notes

• Use Chakra UI components for consistency with existing UI
• Use React hooks for form state management
• Consider React Router for multi-step navigation
• Implement form validation using appropriate libraries
• Follow existing UI patterns for consistency

Testing Steps

1. Test form validation with valid and invalid inputs
2. Test navigation between steps
3. Test resource selection UI with various numbers of resources
4. Test responsiveness on different screen sizes
5. Test submission process and error handling
6. Verify that selected resources are preserved between steps

Dependencies

• Issue Setup CI/CD and Development Configurations #2: API Endpoints for Cross-Resource Reports

Related Documents

• Cross-Resource Reports Specification