425 lines
11 KiB
Markdown
425 lines
11 KiB
Markdown
# 📊 CARDS STATISTICHE STANDARD
|
|
## Template per cards e visualizzazione statistiche
|
|
|
|
---
|
|
|
|
## 🏗️ **PATTERN 3: CARDS STATISTICHE**
|
|
|
|
### 🎯 **Utilizzo**: Dashboard e pagine overview moduli
|
|
|
|
### **Template Base 4 Cards**:
|
|
```blade
|
|
@section('stats-cards')
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3>{{ $stats['totale'] ?? 0 }}</h3>
|
|
<p>Totale Items</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-list"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>{{ $stats['attivi'] ?? 0 }}</h3>
|
|
<p>Attivi</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>{{ $stats['pending'] ?? 0 }}</h3>
|
|
<p>In Sospeso</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-danger">
|
|
<div class="inner">
|
|
<h3>{{ $stats['problemi'] ?? 0 }}</h3>
|
|
<p>Problemi</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-exclamation"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 **COLORI STANDARD CARDS**
|
|
|
|
### **Color Mapping per Consistency**:
|
|
```css
|
|
/* AdminLTE Small Box Colors */
|
|
.small-box.bg-primary {
|
|
background: #007bff !important;
|
|
color: #fff;
|
|
} /* Totali/Generici */
|
|
|
|
.small-box.bg-success {
|
|
background: #28a745 !important;
|
|
color: #fff;
|
|
} /* Positivi/Attivi/Successi */
|
|
|
|
.small-box.bg-warning {
|
|
background: #ffc107 !important;
|
|
color: #212529;
|
|
} /* In Attesa/Sospeso/Warning */
|
|
|
|
.small-box.bg-danger {
|
|
background: #dc3545 !important;
|
|
color: #fff;
|
|
} /* Errori/Problemi/Critici */
|
|
|
|
.small-box.bg-info {
|
|
background: #17a2b8 !important;
|
|
color: #fff;
|
|
} /* Info/Neutro/Secondario */
|
|
|
|
.small-box.bg-secondary {
|
|
background: #6c757d !important;
|
|
color: #fff;
|
|
} /* Disattivi/Archiviati */
|
|
```
|
|
|
|
### **Quando Usare Ogni Colore**:
|
|
- **🔵 Primary (blue)**: Contatori totali, numeri generici
|
|
- **🟢 Success (green)**: Stati positivi, attivi, completati
|
|
- **🟡 Warning (yellow)**: In attesa, sospesi, da verificare
|
|
- **🔴 Danger (red)**: Errori, problemi, scaduti
|
|
- **🔵 Info (cyan)**: Informazioni neutre, statistiche
|
|
- **⚫ Secondary (gray)**: Inattivi, archiviati, disabilitati
|
|
|
|
---
|
|
|
|
## 📊 **ESEMPI SPECIFICI PER MODULO**
|
|
|
|
### **Fornitori**:
|
|
```blade
|
|
@section('stats-cards')
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3>{{ $stats['totale_fornitori'] ?? 0 }}</h3>
|
|
<p>Totale Fornitori</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-truck"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>{{ $stats['attivi'] ?? 0 }}</h3>
|
|
<p>Attivi</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>{{ $stats['questo_mese'] ?? 0 }}</h3>
|
|
<p>Nuovi Questo Mese</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-calendar"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>{{ $stats['fatture_pending'] ?? 0 }}</h3>
|
|
<p>Fatture in Attesa</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-euro-sign"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
### **Gestioni**:
|
|
```blade
|
|
@section('stats-cards')
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3>{{ $stats['totale_gestioni'] ?? 0 }}</h3>
|
|
<p>Totale Gestioni</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>{{ $stats['aperte'] ?? 0 }}</h3>
|
|
<p>Gestioni Aperte</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>{{ $stats['da_chiudere'] ?? 0 }}</h3>
|
|
<p>Da Chiudere</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-secondary">
|
|
<div class="inner">
|
|
<h3>{{ $stats['archiviate'] ?? 0 }}</h3>
|
|
<p>Archiviate</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-archive"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 **RESPONSIVE DESIGN**
|
|
|
|
### **Template Mobile-Friendly**:
|
|
```blade
|
|
@section('stats-cards')
|
|
<div class="row mb-3">
|
|
<!-- Desktop: 4 colonne, Tablet: 2 colonne, Mobile: 1 colonna -->
|
|
<div class="col-12 col-sm-6 col-md-3">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3>{{ $stats['totale'] ?? 0 }}</h3>
|
|
<p class="d-none d-sm-block">Totale Items</p>
|
|
<p class="d-sm-none">Totale</p> <!-- Testo corto su mobile -->
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-list"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Replica per altre cards -->
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
### **CSS Responsive per Cards**:
|
|
```css
|
|
/* Responsive adjustments */
|
|
@media (max-width: 576px) {
|
|
.small-box h3 {
|
|
font-size: 1.5rem; /* Più piccolo su mobile */
|
|
}
|
|
|
|
.small-box p {
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.small-box .icon {
|
|
font-size: 2rem; /* Icona più piccola */
|
|
bottom: 5px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.small-box {
|
|
margin-bottom: 1rem; /* Più spazio tra cards */
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔢 **FORMATTAZIONE NUMERI**
|
|
|
|
### **Helper per Formattazione**:
|
|
```php
|
|
// In Controller - formatHelper per stats
|
|
private function formatStats($stats) {
|
|
return [
|
|
'totale' => number_format($stats['totale'], 0, ',', '.'),
|
|
'attivi' => number_format($stats['attivi'], 0, ',', '.'),
|
|
'importo' => '€ ' . number_format($stats['importo'], 2, ',', '.'),
|
|
'percentuale' => number_format($stats['percentuale'], 1) . '%'
|
|
];
|
|
}
|
|
```
|
|
|
|
### **Template con Formattazione**:
|
|
```blade
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
@if(isset($stats['importo']))
|
|
<h3>€ {{ number_format($stats['importo'], 0, ',', '.') }}</h3>
|
|
@else
|
|
<h3>{{ number_format($stats['attivi'] ?? 0, 0, ',', '.') }}</h3>
|
|
@endif
|
|
<p>Fatturato Attivo</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-euro-sign"></i>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 **CARDS CLICKABILI**
|
|
|
|
### **Template Card con Link**:
|
|
```blade
|
|
<div class="col-md-3">
|
|
<a href="{{ route('admin.fornitori.index', ['filter' => 'attivi']) }}" class="small-box-link">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>{{ $stats['attivi'] ?? 0 }}</h3>
|
|
<p>Fornitori Attivi</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="small-box-footer">
|
|
Vedi Lista <i class="fas fa-arrow-circle-right"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
```
|
|
|
|
### **CSS per Links**:
|
|
```css
|
|
.small-box-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.small-box-link:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.small-box-link:hover .small-box {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.small-box-footer {
|
|
background: rgba(0,0,0,0.1);
|
|
color: rgba(255,255,255,0.8);
|
|
display: block;
|
|
padding: 3px 0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 **CARDS ADVANCED**
|
|
|
|
### **Card con Progress Bar**:
|
|
```blade
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>{{ $stats['completamento'] ?? 0 }}%</h3>
|
|
<p>Completamento</p>
|
|
<div class="progress" style="height: 4px; margin-top: 5px;">
|
|
<div class="progress-bar" style="width: {{ $stats['completamento'] ?? 0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-tasks"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### **Card con Badge**:
|
|
```blade
|
|
<div class="col-md-3">
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>
|
|
{{ $stats['pending'] ?? 0 }}
|
|
@if(($stats['pending'] ?? 0) > 10)
|
|
<small class="badge badge-danger">!</small>
|
|
@endif
|
|
</h3>
|
|
<p>In Sospeso</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 **IMPLEMENTAZIONE VELOCE**
|
|
|
|
### **Steps per Cards**:
|
|
1. **Copia template** base 4 cards
|
|
2. **Personalizza labels** e icone per il modulo
|
|
3. **Configura colors** appropriati
|
|
4. **Implementa stats** nel controller
|
|
5. **Testa responsive** design
|
|
6. **Aggiungi links** se necessario
|
|
|
|
### **Controller Stats Method**:
|
|
```php
|
|
private function calculateStats()
|
|
{
|
|
return [
|
|
'totale' => Model::count(),
|
|
'attivi' => Model::where('stato', 'attivo')->count(),
|
|
'pending' => Model::where('stato', 'pending')->count(),
|
|
'questo_mese' => Model::whereMonth('created_at', now()->month)->count(),
|
|
];
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**📖 Prossimo file: `04-controller-standard.md`**
|