Profile & Teams

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

Overview

The Profile folder contains all components related to user profile management and team administration. It serves as the main hub for:

• Personal settings: Display and update user information
• Security: Password management and multi-factor authentication setup
• Preferences: Notification configuration by role and category
• Team management: Complex role-based member management (My Teams section)
• Member details: Detailed member information with catalogue and subscription assignment
• Brand tracking: Associated subscriptions and services

The most complex section is My Teams (TeamsSection) which handles hierarchical role management, member operations (add/remove/invite), state management with local staging, and multi-layer notifications to team members and admins.

Folder location: /src/components/Profile

Sub-Sections

Questa documentazione è organizzata nei seguenti argomenti:

1. Personal Information - Visualizzazione dati profilo utente (read-only), primo/ultimo nome, email, company, role
2. Change Password - Cambio password Firebase con re-autenticazione, validazione e error handling
3. My Teams - Gestione complessa team con RBAC, gestione ruoli, modali per aggiunta membri e dettagli
4. Brand Identity - Gestione asset brand, caricamento immagini, palette colori e metadati
5. Notifications - Preferenze notifiche basate su ruolo (8 gruppi), configurazione per categoria
6. Additional Components & Reference - AssociatedBrands, MFASetup, gerarchia componenti, pattern architetturali

Architettura Componenti (9 file)

/src/components/Profile/
├── PersonalInformation.js → [Personal Information](./personal-information.md)
├── ChangePassword.js → [Change Password](./change-password.md)
├── TeamsSection.js → [My Teams](./my-teams.md)
├── TeamSection.js (used in My Teams section)
├── AddMemberModal.js (used in My Teams section)
├── MemberDetailsModal.js (used in My Teams section)
├── NotificationsSection.js → [Notifications](./notifications.md)
├── AssociatedBrands.js (referenced in profile documentation)
├── MFASetup.js (Multi-factor authentication)
└── BrandIdentity/
    ├── BrandIdentitySection.js → [Brand Identity](./brand-identity.md)
    ├── BrandIdentityGallery.js
    ├── GalleryView.js
    ├── DetailsView.js
    └── ColorsView.js

Workflow di Navigazione

Nuovo utente → First Visit:

1. Accede al dashboard
2. Naviga a Profilo → Visita overview
3. Seleziona una sezione specifica

Admin → Gestione Team:

1. Accede al dashboard
2. Naviga a Profilo → My Teams
3. Aggiunge/gestisce membri, assegna ruoli

Team Admin → Brand Management:

1. Accede al dashboard
2. Naviga a Profilo → Brand Identity
3. Carica loghi, configura colori brand