# 📊 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`**