Exercise 2: Add Interactivity

In this exercise, you'll use React to make the Partner Command Center interactive. You'll add tier filters, search, sorting, pagination, and a partner detail panel. Each change should keep the existing summary cards in sync with the partners currently visible on the page.

Step 1: Add Tier Filters

1. Use this prompt to add filters:

   Add tier filters to Partner Command Center.
   
   Users should be able to filter partners by:
   - All
   - Bronze
   - Silver
   - Gold
   - Platinum
   
   The summary cards should update based on the filtered partners.

2. Preview the app and test each tier filter.

3. Confirm that the partner list and summary cards update together.

Step 2: Add Search

1. Use this prompt to add partner search:

   Add search to Partner Command Center.
   
   Users should be able to search partners by name.
   
   Search should work together with the tier filter.
   
   The summary cards should update based on the visible partners.

2. Preview the app and search for a partner name.

3. Test search with at least one tier filter selected.

4. If search and filters do not work together, ask Vibes to fix the combined filter logic.

Step 3: Add Sorting

1. Use this prompt to add sorting:

   Add sorting to Partner Command Center.
   
   Users should be able to sort partners by:
   - Closed Won
   - Open Pipeline
   - Attainment
   
   Sort should work together with search and tier filtering.

2. Preview the app and test each sort option.

3. Confirm that sorting respects the current search term and tier filter.

   

Step 4: Add Pagination

1. Use this prompt to add pagination:

   Add pagination to Partner Command Center.
   
   Show 6 partners per page.
   
   Users should be able to move to the next page and previous page.
   
   Pagination should work together with tier filtering, search, and sorting.
   
   The summary cards should continue to calculate from all visible filtered results, not just the current page.

2. Preview the app and confirm that only 6 partners appear per page.

3. Test pagination with a tier filter, search term, and sort option selected.

4. Confirm that the summary cards still reflect the full filtered result set.

Step 5: Add a Partner Detail Panel

1. Use this prompt to add a detail panel:

   Add a partner detail panel.
   
   When a user selects a partner, show a detail panel with:
   - Partner name
   - Tier
   - Quarterly quota
   - Closed won
   - Open pipeline
   - Attainment
   - Active deals
   
   Keep the list visible while the detail panel is open.

2. Preview the app and select a partner.

3. Confirm that the partner list stays visible while the detail panel opens.

4. Select a different partner and confirm that the detail panel updates.

Summary

• You added tier filtering.
• You added partner search.
• You added sorting.
• You added pagination.
• You added a detail panel.
• You kept summary metrics synced with the visible partner data.

In the next exercise, you'll replace mock data with Salesforce data and add workflow recommendations.