# 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**:
```php
<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**:
```php
<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**:
```php
<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
```php
@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
```php
@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
```php
@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