Personal Information

Author: Carmine Antonio Bonavoglia Creation Date: 10/11/2025
Last Reviewer: Carmine Antonio Bonavoglia Last Updated: 10/11/2025

PersonalInformation Component

Purpose

Display read-only user profile information with responsive grid layout.

Props

{
    userInfo: {
        firstName: string,
        lastName: string,
        company: string,
        displayRole: string,
        role: string,
        email: string
    },
    loading: boolean
}

Layout

• Header: "Personal Information" title with bottom border
• Form Grid:
  • 3 columns on large screens (lg=8)
  • 2 columns on tablets (sm=12)
  • 1 column on mobile (xs=24)
• Fields (all disabled):
  • First Name, Last Name, Company
  • Role (prefers displayRole if available)
  • Email

Styling

• Ant Design ConfigProvider customizes disabled input appearance
• Grey background (grey100) for disabled fields
• Black text for better contrast on disabled state

---

TeamSection Component (Team Members View)

Purpose

Alternative view of team members in a simple table format. Fetches team members from current user's team context.

Props

None (directly calls fetchTeamMembers() API)

Features

1. Load on mount — fetchTeamMembers() returns { members, metadata }
2. Avatar with role color — Uses getRoleColor(mappedRole)
3. Subscription count — From member.licenses?.length
4. Catalogue count — From member.catalogues?.length
5. Click action — Opens MemberDetailsModal for detailed view
6. Metadata context — Shows global vs team view based on metadata

Columns

Column	Render
Avatar	Letter initials with role-based color
Name	First + Last name
Subscriptions	Count (green if >0, grey if 0)
Catalogues	Count (blue if >0, grey if 0)
Role	Mapped role (Super Admin, Admin, Member, etc)
Actions	More icon → Open MemberDetailsModal