feat: redesign member cards with expandable roles/KPIs section

[drifter089]

Summary

Redesigns the team member cards on the /member page with improved styling, simplified chart legends, and an expandable section showing roles and KPI cards.

Key Changes

• Add expandable section with RoleCard (read-only) and KpiCard components stacked vertically
• Simplify bar chart legend to show only colored dots + names (added simpleLegend prop)
• Add padding between pie chart and its legend
• Update team section with LayoutGrid icon and 'Teams:' label
• Rename GoalsRadarChart to GoalsBarChart for accuracy
• Improve text hierarchy and uniform spacing throughout the card

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
org-os	Ready	Preview, Comment	Jan 9, 2026 3:20pm

[coderabbitai]

Warning

Rate limit exceeded

@drifter089 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 3 minutes and 4 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 471197e and ce2f080.

📒 Files selected for processing (5)

• src/app/member/[id]/_components/member-goals-chart.tsx
• src/app/member/member-card.tsx
• src/components/charts/goals-bar-chart.tsx
• src/components/charts/index.ts
• src/components/charts/pie-chart.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[claude]

PR Review: Redesign Member Cards

Summary

This PR successfully redesigns the team member cards with improved styling, an expandable section for roles and KPIs, and a simplified legend for charts. The implementation is generally solid with good attention to detail.

✅ Strengths

1. Clean Component Structure: The expandable section using the Collapsible component is well-implemented with clear visual feedback.

2. Good Performance: Proper use of useMemo for filtering KPIs and unique teams prevents unnecessary recalculations.

3. UI/UX Improvements:

   • The simpleLegend prop provides a cleaner alternative for compact displays
   • Consistent spacing and typography updates improve readability
   • The expandable section keeps the initial view clean while providing access to detailed information

4. Proper Naming: Renaming GoalsRadarChart to GoalsBarChart accurately reflects the component's visualization type.

🔍 Issues & Concerns

1. Type Safety Concern in roleToCardData() (member-card.tsx:50-66)

The roleToCardData function always sets assignedUserName: null which may not be ideal. If the role data includes user name information, it's being discarded:

function roleToCardData(role: Role): RoleCardData {
  return {
    // ... other fields
    assignedUserName: null,  // ⚠️ Always null - loses potential data
    // ...
  };
}

Recommendation: Check if the Role type includes user name information and preserve it if available.

2. Potential Layout Shift on Expand (member-card.tsx:254-316)

The expandable section renders role and KPI data that could be quite large. If a member has many roles/KPIs, expanding could cause significant layout shifts.

Recommendation: Consider adding a max height with scroll for the expanded content or implementing pagination/virtualization for large lists.

3. Empty State Handling in Goals Chart

When metricIdsWithGoals is empty, the GoalsBarChart will show "No goals data". Consider whether this should be hidden entirely or show a more informative empty state.

4. Skeleton Height Mismatch (member-card.tsx:212-213)

The skeleton states show h-[320px] but the actual charts are h-[340px]. This will cause a layout shift when loading completes:

<Skeleton className="h-[320px] w-full" />  // ⚠️ Should be h-[340px]

Fix: Update skeleton heights to h-[340px] to match the actual content.

5. Missing Error Handling

The component doesn't handle errors from the api.role.getByUser.useQuery call. If the query fails, the component will show loading state indefinitely.

Recommendation: Add error handling:

const { data: roles, isLoading, isError } = api.role.getByUser.useQuery({
  userId: member.id,
});

if (isError) {
  // Show error state
}

🎨 UI/UX Suggestions

1. Improve Teams Section Accessibility

The team badges are clickable but lack visual affordance. Consider adding an icon or hover state to make it clearer they're interactive.

2. Loading State for Expanded Content

When expanding the section, the roles are already loaded from the query, but KPIs might not be. Consider showing individual loading states for the KPI cards if needed.

3. Animation for Collapsible

The CollapsibleContent could benefit from an animation duration to smooth the transition.

🐛 Potential Bugs

1. Null Safety in KPI Filtering (member-card.tsx:98-107)

The filter assumes chart.metric.id always exists, but the code at line 306 shows chart.metric.teamId ?? "" suggesting nullable fields exist:

const memberKpis = useMemo(() => {
  if (!roles || dashboardCharts.length === 0) return [];
  const memberMetricIds = new Set(
    roles.filter((r) => r.metricId != null).map((r) => r.metricId!),
  );
  return dashboardCharts.filter((chart) =>
    memberMetricIds.has(chart.metric.id),  // ⚠️ What if chart.metric.id is undefined?
  );
}, [roles, dashboardCharts]);

Recommendation: Add null check for chart.metric?.id.

2. Empty teamId Prop to KpiCard (member-card.tsx:306)

Passing an empty string as teamId when chart.metric.teamId is null could cause issues in the KpiCard component:

<KpiCard
  key={chart.id}
  dashboardChart={chart}
  teamId={chart.metric.teamId ?? ""}  // ⚠️ Empty string fallback
  showSettings={false}
  enableDragDrop={false}
/>

Recommendation: Handle the null case more gracefully, perhaps by not rendering the card or showing a warning.

📊 Performance Considerations

1. Multiple Renders: The component uses three separate useMemo hooks which is good, but ensure they're properly memoized to avoid recalculations.

2. RoleCard Memoization: The RoleCard component is already memoized, which is excellent for performance when rendering multiple cards.

🧪 Testing Recommendations

1. Test with members who have:

   • 0 roles
   • Many roles (10+)
   • Roles without effort points
   • Roles without metrics
   • Mix of roles with and without team assignments

2. Test the expandable section:

   • With empty roles/KPIs
   • With many items causing scroll
   • Rapid expand/collapse

3. Test edge cases:

   • Members with no email
   • Members with very long names
   • Missing profile pictures

🔒 Security Considerations

No significant security concerns identified. The component properly handles user input and doesn't introduce XSS vulnerabilities.

📝 Code Quality

Positives:

• Good TypeScript usage with proper type definitions
• Clean, readable code structure
• Follows React best practices with hooks
• Good separation of concerns

Minor Improvements:

• Add JSDoc comments for the roleToCardData function
• Consider extracting the chart rendering logic to a separate component

Overall Assessment

Score: 7.5/10

This is a solid PR that improves the user experience with better visual design and additional functionality. The main concerns are around edge case handling and minor type safety issues. With the recommended fixes, this would be production-ready.

Required Changes:

• Fix skeleton height mismatch
• Add null safety checks for chart metric IDs
• Handle empty teamId case in KpiCard

Suggested Improvements:

• Add error handling for role query
• Consider max-height for expanded content
• Improve team badges visual affordance
• Preserve user name in roleToCardData if available

Great work overall! The expandable section is a nice UX improvement that keeps the interface clean while providing access to detailed information. 🎉