netgescon-master/docs/02-architettura-laravel/specifiche/DASHBOARD_COMPONENTS.md

Componenti Dashboard - NetGesCon

Panoramica

Questa documentazione descrive la struttura modulare dei componenti dashboard implementati nel sistema NetGesCon. Ogni dashboard è suddivisa in componenti atomici riutilizzabili e facilmente manutenibili.

Struttura delle Cartelle

resources/views/components/dashboard/
├── shared/           # Componenti condivisi tra tutte le dashboard
│   ├── header.blade.php        # Header standard con titolo e info utente
│   ├── stat-card.blade.php     # Card per statistiche numeriche
│   └── action-card.blade.php   # Card per azioni rapide
├── admin/            # Componenti specifici per amministratori
│   ├── stats.blade.php         # Statistiche amministratore
│   ├── quick-actions.blade.php # Azioni rapide amministratore
│   └── recent-activity.blade.php # Attività recenti
├── superadmin/       # Componenti specifici per super admin
│   ├── stats.blade.php         # Statistiche super admin
│   ├── quick-actions.blade.php # Azioni rapide super admin
│   └── recent-activity.blade.php # Attività recenti sistema
└── condomino/        # Componenti specifici per condomini
    ├── stats.blade.php         # Statistiche condomino
    ├── quick-actions.blade.php # Azioni rapide condomino
    ├── welcome-banner.blade.php # Banner benvenuto personalizzato
    └── recent-communications.blade.php # Comunicazioni recenti

Componenti Condivisi (Shared)

1. Header Dashboard (shared/header.blade.php)

Scopo: Header standard per tutte le dashboard con titolo, sottotitolo e icona ruolo.

Parametri:

• title (string): Titolo principale della dashboard
• subtitle (string): Sottotitolo/descrizione
• icon (string): Classe CSS dell'icona (es: 'fas fa-crown')
• iconColor (string): Colore dell'icona (es: 'text-red-500')

Utilizzo:

<x-dashboard.shared.header
    title="Dashboard Super Admin"
    subtitle="Benvenuto nel pannello di amministrazione del sistema"
    icon="fas fa-crown"
    iconColor="text-red-500"
/>

2. Stat Card (shared/stat-card.blade.php)

Scopo: Card riutilizzabile per visualizzare statistiche numeriche con icona.

Parametri:

• title (string): Titolo della statistica
• value (string/number): Valore numerico da visualizzare
• icon (string): Classe CSS dell'icona
• color (string): Colore del tema (primary, success, warning, danger, info)
• subtitle (string, opzionale): Sottotitolo
• link (string, opzionale): Link per rendere la card cliccabile

Utilizzo:

<x-dashboard.shared.stat-card
    title="Totale Utenti"
    :value="\App\Models\User::count()"
    icon="fas fa-users"
    color="primary"
    subtitle="Utenti registrati"
    :link="route('superadmin.users.index')"
/>

3. Action Card (shared/action-card.blade.php)

Scopo: Card per azioni rapide nella dashboard con icona, titolo e descrizione.

Parametri:

• title (string): Titolo dell'azione
• description (string): Descrizione dell'azione
• icon (string): Icona dell'azione
• link (string): Link di destinazione
• color (string): Colore del tema
• badge (string, opzionale): Testo del badge (es: "Nuovo", "3")
• badgeColor (string): Colore del badge

Utilizzo:

<x-dashboard.shared.action-card
    title="Gestione Utenti"
    description="Crea, modifica e gestisci gli utenti del sistema"
    icon="fas fa-users-cog"
    :link="route('superadmin.users.index')"
    color="primary"
/>

Componenti Specifici per Ruolo

Super Admin

Stats (superadmin/stats.blade.php)

• Visualizza statistiche del sistema (utenti totali, amministratori, condomini, stabili)
• Utilizza il componente stat-card per la visualizzazione
• I valori sono calcolati dinamicamente dalle query del database

Quick Actions (superadmin/quick-actions.blade.php)

• Azioni rapide per super admin (gestione utenti, configurazioni, backup, log, permessi, report)
• Utilizza il componente action-card per la visualizzazione

Recent Activity (superadmin/recent-activity.blade.php)

• Attività recenti del sistema
• Mostra log delle operazioni amministrative
• Include link per visualizzare tutti i log

Admin

Stats (admin/stats.blade.php)

• Statistiche per amministratori (stabili, condomini, tickets, assemblee)
• Accetta parametro stats dal controller
• Valori predefiniti a 0 se non forniti

Quick Actions (admin/quick-actions.blade.php)

• Azioni rapide per amministratori (nuovo condomino, assemblea, rate, tickets, fatturazione, comunicazioni)

Recent Activity (admin/recent-activity.blade.php)

• Attività recenti dell'amministratore
• Mostra tickets, pagamenti, nuovi condomini, assemblee programmate

Condomino

Stats (condomino/stats.blade.php)

• Statistiche per condomini (unità possedute, tickets aperti, rate in scadenza, assemblee)
• Layout ottimizzato per le esigenze del condomino

Quick Actions (condomino/quick-actions.blade.php)

• Azioni rapide per condomini (apri ticket, pagamenti, documenti, comunicazioni, profilo, contatti)

Welcome Banner (condomino/welcome-banner.blade.php)

• Banner personalizzato di benvenuto
• Include informazioni rapide su condominio, amministratore, ultimo accesso
• Design gradient accattivante

Recent Communications (condomino/recent-communications.blade.php)

• Comunicazioni recenti dall'amministratore
• Include tipo di comunicazione, data, stato (nuovo/letto)

Implementazione nelle Dashboard

Dashboard Super Admin

@extends('layouts.app-universal')

@section('content')
<div class="space-y-6">
    <x-dashboard.shared.header
        title="Dashboard Super Admin"
        subtitle="Benvenuto nel pannello di amministrazione del sistema"
        icon="fas fa-crown"
        iconColor="text-red-500"
    />
    
    <x-dashboard.superadmin.stats />
    <x-dashboard.superadmin.quick-actions />
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-dashboard.superadmin.recent-activity />
        <!-- Altri componenti -->
    </div>
</div>
@endsection

Dashboard Admin

@extends('layouts.app-universal')

@section('content')
<div class="space-y-6">
    <x-dashboard.shared.header
        title="Dashboard Amministratore"
        subtitle="Benvenuto nel pannello di gestione condominiale"
        icon="fas fa-user-shield"
        iconColor="text-blue-500"
    />
    
    <x-dashboard.admin.stats :stats="$stats ?? []" />
    <x-dashboard.admin.quick-actions />
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-dashboard.admin.recent-activity />
        <!-- Altri componenti -->
    </div>
</div>
@endsection

Dashboard Condomino

@extends('layouts.app-universal')

@section('content')
<div class="space-y-6">
    <x-dashboard.condomino.welcome-banner />
    <x-dashboard.condomino.stats :stats="$stats ?? []" />
    <x-dashboard.condomino.quick-actions />
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-dashboard.condomino.recent-communications />
        <!-- Altri componenti -->
    </div>
</div>
@endsection

Vantaggi dell'Architettura Modulare

1. Manutenibilità: Ogni componente è isolato e facilmente modificabile
2. Riutilizzabilità: I componenti shared possono essere usati in più dashboard
3. Scalabilità: Facile aggiungere nuove dashboard o componenti
4. Consistenza: Design e comportamento uniformi
5. Testabilità: Ogni componente può essere testato individualmente
6. Personalizzazione: Facile personalizzare componenti per ruoli specifici

Sviluppi Futuri

1. Dati Dinamici: Sostituire i dati fittizi con query reali al database
2. Componenti Aggiuntivi: Grafici, tabelle, widget avanzati
3. Personalizzazione: Permettere agli utenti di personalizzare la dashboard
4. Notifiche Real-time: Integrazione con WebSocket per aggiornamenti live
5. Cache: Implementare cache per le statistiche costose da calcolare

Note Tecniche

• Tutti i componenti utilizzano Tailwind CSS per lo styling
• Supporto completo per dark mode
• Icone FontAwesome per la coerenza visiva
• Layout responsive per dispositivi mobili
• Parametri opzionali con valori predefiniti
• Documentazione inline nei file Blade