243 lines
8.2 KiB
Markdown
243 lines
8.2 KiB
Markdown
# 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
|