Catalogo componenti
Catalogo di riferimento dei componenti di People FE v2, divisi tra Design System (src/lib, 29 componenti) e componenti business (src/components, 85 componenti). Sostituisce la vecchia pagina showcase interattiva /dashboard/components-ui, rimossa dal codice.
Per ogni componente: selettore, scopo in una riga, input/varianti principali e dove è realmente usato (verificato via grep sui template, non dedotto dal nome).
Quale componente mi serve?
Disambiguazione dei casi che si confondono più spesso.
Badge vs Tag vs Chip
app-badge— pallino/contatore numerico o testuale molto piccolo (es. badge del bottone filtro inapp-page-header, contatore applicazioni). Non è cliccabile, non ha icona propria.app-tag— etichetta di stato/categoria con sfondo colorato e icona opzionale (variantrounded/icon, colore daVariantTags:blue,accent,pink,orange,purple, ecc.). Usalo per stato pratica, ruolo, categoria.app-chip— pillola removibile (iconaXopzionale viaremovable), con avatar opzionale (withAvatar). Usala per selezioni multiple/filtri attivi, non per stati statici.
Common-loader vs Loading-content vs Skeleton vs Loader
app-common-loader— spinner circolare (ProgressSpinnerdi PrimeNG), per un'attesa puntuale e breve (es. dentrofile-card,members-picker).app-loading-content— wrapper strutturale: proietta[pdg-loader]o[pdg-content-to-load]a seconda diisLoading(). Usalo per alternare un intero blocco (spinner ↔ contenuto reale), non per il solo indicatore visivo.app-skeleton— placeholder "a forma di contenuto" (barre/rettangoli/cerchi grigi) usato in tabelle e card mentre i dati arrivano; dà continuità visiva al layout finale.app-loader— loader a schermo intero specifico della pagina di login (icone animate), non riutilizzabile altrove.
Dialog vs Common-confirm-dialog vs Native-sidebar
app-dialog— dialog PrimeNG generico con footer Annulla/Applica standard. Nel codice attuale non ha consumer attivi (vedi nota "Aggiungere un componente" più sotto).app-common-confirm-dialog— dialog di conferma azione (variantdefault/danger), testo header+descrizione, due bottoni. Per conferme di eliminazione/azioni distruttive.app-native-sidebar— drawer laterale (PrimeNGDrawer), usato per form/filtri complessi che occupano tutta l'altezza schermo (es. sidebar filtri conapp-native-sidebar-accordion).
Select-button vs Toggle-button vs Toggle-switch vs Radio-button
app-select-button— gruppo di opzioni esclusive stile "segmented control" (variantfilled/segmented), es. filtro vista permessi.app-toggle-switch— vero interruttore booleano on/off (p-toggleswitch), per singoli flag (es. "Billed", "Mostra persone").app-radio-button— singolo radio button legato a unFormControl, per scelte esclusive in un form (tabelle utenti/recruiting/team).app-toggle-button(business,src/components) — bottone pressabile che cambia colore da solo quando attivo (estendeButtonComponent); nessun consumer attivo nel codice attuale.
Filter-dropdown vs Multi-select
app-multi-select— multiselect PrimeNG standard con label a sinistra, per form/filtri "verticali" (es.overtime-form).app-filter-dropdown— estendeMultiSelectComponent, stessa API ma icona dropdown a sinistra e stile pensato per barre filtri orizzontali (usato inpermissions).
Textarea vs Rich-text-editor
app-textarea— area di testo semplice, nessuna formattazione.app-rich-text-editor— editor HTML minimale (grassetto, corsivo, elenco, link, colori testo) basato su Quill/p-editor, stessa API esterna diapp-textarea(label,placeholder,helperText,disabled,fc). Usalo solo se il contenuto salvato deve essere HTML formattato (es. FAQ).
Info-card vs Member-card vs Team-quick-link
app-info-card(business) — card generica orientata a liste (team/progetti): header opzionale, righe tipizzate (text,tags,avatars,person,member-list). È il pattern principale delle pagine lista.app-member-card(business) — card di un singolo membro (skill, selezionabilità, stato caricamento), usata dentro picker e liste membri team.app-team-quick-link(business) — riga compatta cliccabile (icona + nome team + scrum master) per referenziare un team inline senza la card completa.TeamCardComponentesiste ancora nel codice ma non ha consumer attivi:teams-assignedusa oraapp-info-card.
Design System (src/lib)
Componenti di libreria, selettore app-*, riutilizzabili senza dipendenze da domini di business.
Azioni
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-button |
Bottone standard per tutte le azioni utente. | type: primary, secondary, tertiary, transparent, danger, icon-square, icon-square-label, icon-circle, icon-no-border, chip, chip-filter, chip-light, chip-dark; icon, position (left/right), size (16/24/36/48), disabled, active. Output onClick. |
Usalo sempre per azioni cliccabili; per un toggle stateful vedi app-toggle-button (business, non attivo) o app-toggle-switch. |
app-radio-button |
Singolo radio in un gruppo, legato a FormControl. |
value, fc, label. Output onClick. |
Scelta esclusiva in form/tabelle; per opzioni "segmented" vedi app-select-button. |
Form e input
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-input-text |
Campo di testo con icona opzionale, label, helper text. | inputType, placeholder (obbligatorio), icon, iconPosition, helperText, disabled, fc. Output onChange. |
Input singola riga in form e barre di ricerca (app-page-header). |
app-textarea |
Area di testo multi-riga semplice. | label, placeholder, helperText, rows, disabled, fc. Output onChange. |
Testo libero senza formattazione; per HTML vedi app-rich-text-editor. |
app-rich-text-editor |
Editor HTML minimale (grassetto, corsivo, elenco puntato, link, colori) basato su Quill/p-editor, stessa API di app-textarea. |
label, placeholder, helperText, disabled, fc. Output onChange. |
Solo per contenuti che devono restare HTML (es. FAQ Content.description). |
app-checkbox |
Checkbox singola, booleana o multi-valore. | binary, fc, value, label (obbligatorio), inputId. Output onChange. |
Selezione singola o in liste (usata da app-native-sidebar-accordion). |
app-toggle-switch |
Interruttore booleano vero e proprio (p-toggleswitch). |
label, labelPosition (left/right), marginVertical, fc: FormControl<boolean>. |
Flag singoli (es. "Billed", "Mostra persone"); per scelta tra più opzioni vedi app-select-button. |
app-select-button |
Gruppo di opzioni esclusive stile segmented control. | options: Options[], fc (obbligatorio), allowEmpty, variant (filled/segmented). |
Filtri con poche opzioni mutuamente esclusive. |
app-multi-select |
Multiselect PrimeNG con label a sinistra. | label, options (obbligatorio), fc, placeholder, optionLabel (obbligatorio), maxSelectedLabels, showToggleAll. |
Filtri/form verticali; per barre filtri orizzontali vedi app-filter-dropdown. |
app-filter-dropdown |
Estende MultiSelectComponent: stessa API, icona dropdown spostata a sinistra e stile per barre filtri. |
Stessi input di app-multi-select (classe figlia). |
Barre filtri orizzontali (es. permissions). |
app-calendar |
Selettore data/mese/anno (p-datepicker). |
maxDate, minDate, fc, view (date/month/year), selectionMode, touchUI. |
Nessun consumer attivo nel codice attuale. |
app-slider |
Slider numerico singolo o range, con input testuale collegato. | fc, range, step, max, min, iconName (obbligatorio). Output sliderEmit. |
Filtri numerici con range (es. fascia retribuzione). |
Feedback e stato
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-common-loader |
Spinner circolare per un'attesa puntuale. | size (default 48px). |
Attese brevi e localizzate (file-card, members-picker). |
app-skeleton |
Placeholder "a forma di contenuto" (rettangolo/cerchio). | height, shape (rectangle/circle), styleClass. |
Tabelle/card mentre i dati arrivano — mantiene il layout finale. |
app-progress-bar |
Barra di avanzamento con percentuale, colore che cambia (blu → verde a 100% → rosso oltre 100%). | value, showValue, mode (determinate/altro). |
Percentuale di staffing/allocazione (usata in app-member-list). |
app-toast |
Toast di notifica globale (successo/errore/warning), montato una volta in app.component.html. |
Nessun input: legge la severità dal MessageService di PrimeNG. |
Non instanziarlo nelle pagine: è già globale. |
app-common-confirm-dialog |
Dialog di conferma con variant default/danger. |
visible, header, description (obbligatori), variant. Output visibleChange, btnCancelChange, btnConfirmChange. |
Conferma di azioni distruttive o irreversibili. |
Overlay
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-dialog |
Dialog PrimeNG generico con footer Annulla/Applica. | title (obbligatorio), modal, visibleInput, iconCancel/iconApply, inputApplyLabel. Output visibleChange, cancelChange, applyChange. |
Nessun consumer attivo nel codice attuale. |
app-native-sidebar |
Drawer laterale (PrimeNG Drawer) per form/filtri a schermo intero. |
visible, isFullScreen, titleSidebar (obbligatorio), position (left/right/top/bottom), cancelBtnLabel. Output visibleChange, cancelChange, applyChange. |
Filtri complessi con più sezioni (accoppiato a app-native-sidebar-accordion). |
app-native-sidebar-accordion |
Sezione filtro dentro app-native-sidebar: ricerca + lista checkbox, con skeleton di caricamento. |
label (obbligatorio), checkboxList (obbligatorio), formControlCheckbox, isLoading. |
Ogni gruppo di filtro checkbox dentro una sidebar filtri. |
Navigazione e layout
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-breadcrumb |
Breadcrumb automatico costruito dalle route (data.breadcrumb), con casi speciali per nomi risolti (utente, candidato, team, progetto). |
Nessun input: legge Router/ActivatedRoute. |
Montato in app-navbar-desktop; non serve configurarlo per singola pagina, basta impostare data.breadcrumb in app.routes.ts. |
app-steps |
Wizard a step (PrimeNG Steps). |
items: MenuItem[] (obbligatorio). |
Nessun consumer attivo nel codice attuale. |
app-tab-view |
Tab view con badge conteggio per tab. | tabs: Tab[] (obbligatorio). |
Nessun consumer attivo nel codice attuale. |
app-accordion |
Accordion generico (PrimeNG), apertura singola o multipla. | tabs (obbligatorio), multiple. |
Nessun consumer attivo nel codice attuale — per il pattern filtro-sidebar vedi app-native-sidebar-accordion. |
app-card |
Card base con header immagine/tag opzionale, titolo, separatore, footer. | headerImg, headerLabelTag, headerColorTag, titleInput, subtitleInput, withSeparator, titleWithImg, footer, widgetTitle. |
Base di app-info-card e delle card di dettaglio team/progetto. |
Visualizzazione dati
| Componente | A cosa serve | Input/varianti principali | Quando usarlo / alternative |
|---|---|---|---|
app-avatar |
Avatar circolare/quadrato con fallback a iniziali colorate se l'immagine manca o fallisce il caricamento. | imageSrc, label, size (normal/large/xlarge/hero), shape. Output onClick. |
Foto profilo singola; per gruppi vedi app-avatar-group (business). |
app-badge |
Contatore numerico/testuale molto piccolo. | value (obbligatorio), size (verySmall/small/medium/large), bgColor. |
Badge del bottone filtro in app-page-header, conteggi in app-tab-view. |
app-tag |
Etichetta di stato/categoria colorata, con icona opzionale. | variant (rounded/icon), label, icon, type: VariantTags (blue, accent, pink, orange, purple, ecc.). |
Stato pratica/ruolo/categoria; per contatori vedi app-badge, per pillole rimovibili vedi app-chip. |
app-chip |
Pillola removibile, con avatar opzionale. | label (obbligatorio), icon, withAvatar, srcAvatar, removable. Output onRemove. |
Filtri attivi, skill selezionate; usato anche dentro app-chip-addition (business). |
Componenti business (src/components)
| Componente | A cosa serve | Dove utilizzato |
|---|---|---|
BookmarkComponent |
Gestisce marker visuali bookmark specifici del dominio app. | src/utils/component-lib-data.ts, src/models/components.ts (catalogo showcase componenti). |
ChipAdditionComponent |
Multi-select con aggiunta dinamica di nuovi valori. | src/components/businessunit-card, src/components/user-detail/skills-card, src/pages/team-detail, src/utils/component-lib-data.ts. |
ToggleButtonComponent |
Bottone toggle basato su comportamento applicativo custom. | src/utils/component-lib-data.ts, src/models/components.ts (catalogo showcase componenti). |
AddSkillCardComponent |
Form card per aggiunta skill. | src/pages/skills. |
ActiveProjectsPanelComponent |
Sezione "Progetti attivi": fetch autonomo progetti (status starting-soon/in-progress), lista con "mostra altri" e modale di dettaglio. | src/components/executive-dashboard. |
AnimatedHeaderComponent |
Animazione/intestazione grafica header. | src/components/header. |
CodeBlockComponent |
Wrapper blocchi demo con snippet. | src/pages/components-ui. |
CodeBlockHeaderComponent |
Header del blocco codice demo. | src/components/code-block. |
CodeBlockSnippetComponent |
Rendering snippet e azioni sul codice. | src/components/code-block. |
ComponentsLinksComponent |
Indice/link interni della pagina componenti. | src/pages/components-ui. |
DropdownMenuComponent |
Menu a tendina dell’header desktop. | src/components/navbar-desktop. |
DropLottieComponent |
Animazione Lottie per overlay drag & drop upload. | src/pages/feedback-form. |
EffortPeoplePanelComponent |
Sezione "Effort" parametrizzata per ruolo (role/label/positionLabel input): fetch autonomo persone per ruolo, card effort, espandi/comprimi. Unifica i pannelli Scrum Master e Product Owner. |
src/components/executive-dashboard (usato due volte, per RoleEnum.SM e RoleEnum.PO). |
FormInvalidFieldsComponent |
Visualizzazione errori campi form. | src/components/* e src/pages/* form-driven (es. team-detail, feedback-form, signature-generator). |
FormLabelFieldsComponent |
Label/struttura campi form. | src/components/* e src/pages/* form-driven (es. team-detail, overtime-form, add-client-dialog). |
HeaderComponent |
Header della pagina login. | src/pages/login. |
InfoCardComponent |
Card informativa con dati team/utente. Supporta item di tipo text, tags, avatars, person, member-list. Input memberPositionsLoading (default false): quando true mostra uno skeleton al posto delle posizioni in ogni riga member-list. |
src/pages/teams-list, src/pages/teams-assigned, src/components/projects-list, src/components/projects-assigned. |
LeaveAbsentTodayComponent |
Lista assenze del giorno. | src/pages/permissions. |
LeaveBalancePanelComponent (app-leave-balance-panel) |
Sezione "Saldo ferie e permessi": titolo (title input, default "Saldo ferie e permessi") + lista di voci (items: LeaveBalanceItem[]), ciascuna con pallino colore (colorHex, già risolto dal chiamante via getIconColor()), label, divisore e valore value/total/unitLabel. Dati statici passati dal chiamante, nessun fetch proprio. |
src/components/product-owner-dashboard (dati mock in attesa di un endpoint BE per il saldo). |
LeaveTeamAbsencesComponent |
Assenze team in vista permessi. | src/pages/permissions. |
LeaveTimelineComponent |
Timeline assenze/performance temporale. | src/pages/permissions. |
LoaderComponent |
Loader pagina login. | src/pages/login. |
LoadingContentComponent |
Stato loading riutilizzabile in sezioni business. | src/components/recruiting-detail/*, src/components/user-detail/*, src/pages/permissions, src/pages/faq, src/pages/team-detail. |
MemberCardComponent |
Card membro team/relazione. | src/components/team-members-picker, src/pages/team-detail. |
MyLeaveRequestsPanelComponent (app-my-leave-requests-panel) |
Sezione "Le mie richieste": fetch autonomo delle richieste ferie/permessi dell'utente loggato (filtrate lato client per personId, finestra from/to = giornata corrente), lista righe con data/orario, "Richiesta effettuata il", tag tipo e tag stato (con icona), toggle locale "Mostra tutte/meno" (non un link di navigazione). |
src/components/product-owner-dashboard. |
MobileMenuComponent |
Menu mobile dell’app. | src/components/navbar-mobile. |
NavbarComponent |
Navbar contenitore area autenticata. | src/pages/content. |
NavbarDesktopComponent |
Navbar desktop. | Import @components/... non rilevato. |
NavbarMobileComponent |
Navbar mobile. | Import @components/... non rilevato. |
NotificationBannerComponent |
Banner di notifica contestuale. | src/pages/teams-list, src/pages/recruing-detail. |
PageHeaderComponent (app-page-header) |
Header standard di pagina: titolo + ricerca + bottone filtro con badge conteggio, più un CTA opzionale (actionLabel/actionIcon/actionVisible/(actionClick), nascosto se actionLabel è vuoto). Non specifico a pagine-lista: usato anche dall'Organigramma (una vista ad albero). |
src/pages/table-users, src/pages/teams-management (con CTA "Aggiungi"), src/components/projects-management (con CTA), src/pages/table-recruting, src/pages/organization-chart (senza CTA). |
PositionCardComponent |
Card gestione posizione con azioni. | Import @components/... non rilevato. |
ProjectCollaborationComponent |
Card “Stato del progetto”: collaborazione, cliente e campi livello (business, people read-only, type, team seniority, supporto/interazione PO, operatività SM). | src/pages/project-detail. |
ProjectCreateDialogComponent |
Dialog creazione progetto (step info + membri); include i campi stato progetto editabili (no people). |
src/components/projects-management. |
BusinessunitCardComponent |
Card gestione business unit con form/azioni. | Import @components/... non rilevato. |
RecruitingDetail/* |
Sotto-componenti dettaglio candidatura (header, info, files, notes, skills, history, related, lead). La sezione skills (ApplicationSkillsComponent) espone il pulsante Autogenera (variante icon-square-label) ai ruoli EXECUTIVE / EXECUTIVE_SUPPORT: al click enqueue la generazione async e mostra un toast di presa in carico; le skill compaiono dopo un refresh manuale della pagina. LeadInfoComponent (app-lead-info) mostra tariffa min/max, descrizione attività e skill richieste quando l'application ha un lead associato (input application, nessuna fetch propria, read-only). |
src/pages/recruing-detail (+ dipendenze interne tra sotto-componenti). |
SeparatorSidebarInfoComponent |
Separatore/info nel footer sidebar mobile. | src/components/sidebar. |
SettingsListComponent |
Lista azioni/settings utente. | src/components/dropdown-menu, src/components/sidebar. |
SidebarComponent |
Sidebar principale applicazione. | src/pages/dashboard, src/components/navbar-mobile. |
SocialListComponent |
Lista link social/contatti utente. | src/components/user-detail/user-header. |
StaffingOverviewComponent |
Sezione "Staffing medio aziendale": filtro area, legenda e barre di staffing segmentate. Dati statici, nessun fetch. | src/components/executive-dashboard. |
TeamAddMemberComponent |
Dialog/sezione aggiunta membro al team. | src/pages/team-detail. |
AvatarGroupComponent |
Gruppo avatar membri (usa profileImage + pipe personAvatar). |
Team card, info-card, team-detail projects, project history. Richiede profileImage dalle API team/project/leave. |
TeamCardComponent |
Card team in listing assegnazioni. | Nessun consumer attivo — src/pages/teams-assigned usa ora InfoCardComponent. |
TeamCreateDialogComponent |
Dialog creazione team. | Import @components/... non rilevato. |
TeamMembersPickerComponent |
Picker selezione membri team. | src/components/team-create-dialog, src/components/team-add-member. |
TeamUpdateDialogComponent |
Dialog aggiornamento team. | src/pages/team-detail. |
UnstaffedPersonsPanelComponent |
Sezione "Persone non staffate": fetch autonomo persone non staffate, banner conteggio, lista con "mostra altri" e modale di dettaglio. | src/components/executive-dashboard. |
UserDetail/* |
Sotto-componenti dominio utente (header, general/personal info, skills, contracts, projects). | src/pages/user-detail (+ dipendenze interne). |
WrapperExampleCardComponent |
Wrapper demo card nella pagina componenti. | src/pages/components-ui. |
WrapperExampleDialogComponent |
Wrapper demo dialog nella pagina componenti. | Import @components/... non rilevato. |
WrapperExampleNativeSidebarComponent |
Wrapper demo native sidebar nella pagina componenti. | src/pages/components-ui. |
WrapperExampleTabViewComponent |
Wrapper demo tab-view. | Import @components/... non rilevato. |
WrapperExampleTooltipComponent |
Wrapper demo tooltip. | Import @components/... non rilevato. |
Shell e navigazione
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-navbar |
Contenitore che sceglie tra navbar mobile e desktop in base al viewport. | src/pages/content |
app-navbar-desktop |
Navbar desktop: breadcrumb, avatar utente, menu a tendina. | src/components/navbar |
app-navbar-mobile |
Navbar mobile: hamburger menu + sidebar. | src/components/navbar |
app-mobile-menu |
Pulsante/animazione apertura menu mobile. | src/components/navbar-mobile |
app-sidebar |
Sidebar principale con voci di menu (SidebarItem), gestisce apertura mobile. |
src/pages/dashboard, src/components/navbar-mobile |
app-dropdown-menu |
Menu a tendina dell'header desktop (impostazioni utente). | src/components/navbar-desktop |
app-settings-list |
Lista voci impostazioni/logout, filtrata per permessi utente. | src/components/dropdown-menu, src/components/sidebar |
app-separator-sidebar-info |
Separatore decorativo con icone brand nel footer della sidebar mobile. | src/components/sidebar |
app-header |
Header statico della pagina di login. | src/pages/login |
app-animated-header |
Header con animazione, usato dentro app-header. |
src/components/header |
app-loader |
Loader a schermo intero animato, specifico della pagina di login. | src/pages/login |
app-google-login |
Bottone/flusso di login con Google. | src/pages/login |
Form helpers
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-form-label-fields |
Label standard per un campo form (capitalizza il testo). | Trasversale in dialog/pagine con form (add-client-dialog, team-create-dialog, businessunit-card, ecc.) |
app-form-invalid-fields |
Messaggio di errore standard sotto un campo invalido. | Stesso set di consumer di app-form-label-fields |
app-chip-addition |
Multi-select con aggiunta dinamica di nuovi valori (skill, tag) e gestione permessi per la creazione. | src/components/businessunit-card, src/components/user-detail/skills-card, src/components/project-detail/project-info, src/components/team-detail/team-info, src/components/projects-management/project-create-dialog |
app-drop-lottie |
Animazione Lottie per overlay drag & drop upload file. | src/pages/feedback-form |
app-add-skill-card |
Card/form per creare una nuova skill a catalogo. | src/pages/skills, src/components/user-detail/add-skill-dialog |
Team
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-team-header |
Header dettaglio team: nome, menu azioni, permessi. | src/pages/team-detail |
app-team-info |
Sezione info team (business unit, descrizione) in vista/modifica. | src/pages/team-detail |
app-team-members |
Lista membri team con stato edit/loading. | src/pages/team-detail |
app-team-projects |
Lista progetti collegati al team, paginata. | src/pages/team-detail |
app-team-add-member |
Dialog aggiunta membro al team. | src/pages/team-detail |
app-team-update-dialog |
Dialog aggiornamento dati team. | src/pages/team-detail |
app-team-create-dialog |
Dialog creazione nuovo team. | src/pages/teams-management |
app-team-quick-link |
Riga compatta cliccabile (icona + nome team + scrum master) per referenziare un team inline. | src/components/person-detail-panel |
app-team-card |
Card team in stile listing. | Nessun consumer attivo — teams-assigned usa ora app-info-card. |
Progetti
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-projects-management |
Contenitore route /dashboard/projects con le tab "I miei progetti"/"Tutti i progetti". |
Route src/app/app.routes.ts (loadComponent, nessun tag HTML) |
app-projects-assigned |
Tab "I miei progetti". | Route /dashboard/projects → my-projects |
app-projects-list |
Tab "Tutti i progetti". | Route /dashboard/projects → all-projects |
app-project-create-dialog |
Dialog creazione progetto (step info con Product Owner obbligatorio e Scrum Master opzionale + step staffing membri). | src/components/projects-management |
app-project-header |
Header dettaglio progetto: nome, menu azioni, permessi. | src/pages/project-detail |
app-project-info |
Sezione info progetto (skill richieste, tag, Product Owner/Scrum Master: input productOwnerName, scrumMasterName, productOwnerOptions, scrumMasterOptions; form con controlli productOwner/scrumMaster). |
src/pages/project-detail |
app-project-collaboration |
Card "Stato del progetto": collaborazione, cliente, business, seniority team, supporto PO. | src/pages/project-detail |
app-project-members |
Lista membri progetto con stato edit/loading. | src/pages/project-detail |
app-project-member-card |
Card di un singolo membro nel progetto (staffing: tipo contratto e date; chip P.O./S.M. informativi da productOwnerId/scrumMasterId, nessuna modifica ruolo). |
src/components/project-detail/project-members |
app-project-add-member |
Dialog aggiunta membro al progetto. | src/pages/project-detail |
app-project-update-dialog |
Dialog aggiornamento progetto. | src/pages/project-detail |
app-project-history |
Storico modifiche progetto. | src/pages/project-detail |
People / User detail
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-user-header |
Header profilo utente: avatar, nome, social, azioni. | src/pages/user-detail |
app-general-info |
Sezione dati generali (ruolo, contratto, ecc.). | src/pages/user-detail |
app-personal-info |
Sezione dati anagrafici/personali, in vista/modifica. | src/pages/user-detail |
app-user-skills |
Sezione skill utente. | src/pages/user-detail |
app-skills-card |
Card skill riutilizzabile (con app-chip-addition). |
src/components/user-detail/user-skills, src/components/recruiting-detail/application-skills |
app-add-skill-dialog |
Dialog aggiunta skill a un utente. | src/pages/user-detail |
app-user-contracts |
Sezione contratti utente. | src/pages/user-detail |
app-contract-card |
Card di un singolo contratto. | src/components/user-detail/user-contracts |
app-user-projects |
Sezione progetti dell'utente. | src/pages/user-detail |
app-project-card |
Card di un singolo progetto nel profilo utente. | src/components/user-detail/user-projects |
app-update-user-dialog |
Dialog modifica dati utente. | src/pages/user-detail |
app-social-list |
Lista link social/contatti (LinkedIn, ecc.). | src/components/user-detail/user-header |
Recruiting
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-application-header |
Header candidatura: nome candidato, stato, azioni. | src/pages/recruing-detail |
app-application-general-info |
Dati generali candidatura. | src/pages/recruing-detail |
app-application-skills |
Skill candidatura; pulsante Autogenera (variant icon-square-label) visibile ai ruoli EXECUTIVE/EXECUTIVE_SUPPORT, enqueue generazione async con toast di presa in carico. |
src/pages/recruing-detail |
app-application-files |
Lista file/allegati candidatura. | src/pages/recruing-detail |
app-file-card |
Card di un singolo file, con download/menu azioni. | src/components/recruiting-detail/application-files |
app-application-notes |
Note interne sulla candidatura. | src/pages/recruing-detail |
app-add-note-dialog |
Dialog aggiunta nota. | src/components/recruiting-detail/application-notes |
app-application-history |
Storico stati candidatura. | src/pages/recruing-detail |
app-application-history-card |
Card di un singolo evento storico. | src/components/recruiting-detail/application-history |
app-related-applications |
Candidature collegate. | src/pages/recruing-detail |
app-related-application-card |
Card di una candidatura collegata. | src/components/recruiting-detail/related-applications |
app-related-application-list-item |
Riga candidatura nel dialog di gestione collegamenti. | src/components/recruiting-detail/manage-related-applications-dialog |
app-manage-related-applications-dialog |
Dialog per gestire i collegamenti tra candidature. | src/components/recruiting-detail/related-applications |
Permessi / Leave
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-leave-absent-today |
Lista assenze del giorno. | src/pages/permissions |
app-leave-team-absences |
Riepilogo assenze per team. | src/pages/permissions |
app-leave-timeline |
Contenitore timeline permessi, sceglie la vista (LeaveView) tra mese/heatmap/griglia. |
src/pages/permissions |
app-leave-timeline-month |
Vista timeline mensile per singola persona. | src/components/leave-timeline |
app-leave-timeline-heatmap |
Vista timeline a heatmap (densità assenze). | src/components/leave-timeline |
app-leave-timeline-grid |
Vista timeline a griglia con righe multi-persona. | src/components/leave-timeline |
app-leave-person-row |
Riga di una persona dentro la vista a griglia. | src/components/leave-timeline/views/leave-timeline-grid |
Organigramma
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-org-chart-node-card |
Card di un nodo dell'organigramma (team/persona), espandibile. | src/pages/organization-chart |
app-person-detail-panel |
Pannello di dettaglio persona aperto dall'organigramma (skill, team). | src/pages/organization-chart |
Componenti condivisi tra domini
| Componente | A cosa serve | Dove si usa |
|---|---|---|
app-info-card |
Card generica per liste (righe tipizzate text/tags/avatars/person/member-list), con skeleton di caricamento posizioni (memberPositionsLoading). |
src/pages/teams-list, src/pages/teams-assigned, src/components/projects-list, src/components/projects-assigned |
app-member-list |
Lista membri con avatar, skeleton, progress bar staffing; varianti cardStyle (righe come mini-card, usata nell'organigramma) e clickable. |
src/components/info-card, src/components/person-detail-panel, src/components/org-chart-node-card |
app-member-card |
Card di un singolo membro con skill, stato selezionabile/disabilitato. | src/components/members-picker, src/components/team-detail/team-members |
app-members-picker |
Picker di ricerca/selezione persone (usa app-member-card). |
src/components/project-detail/project-add-member, src/components/team-detail/team-create-dialog, src/components/team-detail/team-add-member, src/components/projects-management/project-create-dialog |
app-avatar-group |
Gruppo di avatar sovrapposti con contatore "+N" oltre maxVisible. |
src/components/info-card, src/components/team-card, src/components/project-detail/project-history, src/components/team-detail/team-projects |
app-page-header |
Header standard di pagina: titolo, ricerca, bottone filtro con badge conteggio, CTA opzionale (actionLabel vuoto = CTA nascosto). |
src/pages/table-users, src/pages/teams-management, src/pages/table-recruting, src/pages/organization-chart, src/components/projects-management |
app-notification-banner |
Banner di notifica contestuale (colore/icona da NotificationBannerConfig), responsive mobile. |
src/pages/teams-list, src/pages/teams-assigned, src/pages/user-detail, src/pages/recruing-detail, src/components/projects-list, src/components/projects-assigned |
app-loading-content |
Wrapper che alterna [pdg-loader]/[pdg-content-to-load] in base a isLoading. |
Trasversale a quasi tutte le pagine lista/dettaglio (vedi tabella isLoading nei rispettivi componenti) |
app-position-card |
Card gestione posizione lavorativa con form/azioni. | src/pages/positions |
app-businessunit-card |
Card gestione business unit con form/azioni. | src/pages/businessunit |
app-accordion-item-menu |
Voce di menu ad accordion espandibile (titolo, icona, stato). | Nessun consumer attivo nel codice attuale. |
Componenti senza consumer attivo (Design System escluso)
| Componente | Nota |
|---|---|
app-bookmark (src/components/bookmark) |
Marker visuale bookmark colorato; nessuna pagina lo referenzia oggi. |
app-toggle-button (src/components/toggle-button) |
Bottone pressabile che estende ButtonComponent e recolora se attivo; nessuna pagina lo referenzia oggi. |
app-team-card (src/components/team-card) |
Sostituito da app-info-card in teams-assigned; nessun altro consumer. |
app-accordion-item-menu (src/components/accordion-item-menu) |
Nessun consumer nel codice attuale. |
Aggiungere un componente
- Aggiorna questa pagina con selettore, scopo, input principali e dove viene usato.
- Se il componente è candidato al Design System (
src/lib), discutine prima con l'agentelib-dev(vediCLAUDE.md§Regole UI): il DS è condiviso e ogni aggiunta impatta tutte le pagine che potrebbero riusarlo. - Se impatta un dominio business esistente, aggiungilo nella sezione di dominio corrispondente; se ne apre uno nuovo, crea una nuova sotto-sezione.