michele/netgescon-day0

Fork 0

michele 3420e37114 chore: NetGescon day-0 baseline 2026-03-10

2026-03-10 21:00:01 +00:00

11 KiB

Raw Permalink Blame History

📊 CARDS STATISTICHE STANDARD

Template per cards e visualizzazione statistiche

🏗️ PATTERN 3: CARDS STATISTICHE

🎯 Utilizzo: Dashboard e pagine overview moduli

Template Base 4 Cards:

@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:

/* 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:

@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:

@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:

@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:

/* 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:

// 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:

<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:

<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:

.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:

<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:

<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:

Copia template base 4 cards
Personalizza labels e icone per il modulo
Configura colors appropriati
Implementa stats nel controller
Testa responsive design
Aggiungi links se necessario

Controller Stats Method:

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

11 KiB Raw Permalink Blame History

📊 CARDS STATISTICHE STANDARD

Template per cards e visualizzazione statistiche

🏗️ PATTERN 3: CARDS STATISTICHE

🎯 Utilizzo: Dashboard e pagine overview moduli

Template Base 4 Cards:

🎨 COLORI STANDARD CARDS

Color Mapping per Consistency:

Quando Usare Ogni Colore:

📊 ESEMPI SPECIFICI PER MODULO

Fornitori:

Gestioni:

📱 RESPONSIVE DESIGN

Template Mobile-Friendly:

CSS Responsive per Cards:

🔢 FORMATTAZIONE NUMERI

Helper per Formattazione:

Template con Formattazione:

🎯 CARDS CLICKABILI

Template Card con Link:

CSS per Links:

📊 CARDS ADVANCED

Card con Progress Bar:

Card con Badge:

🚀 IMPLEMENTAZIONE VELOCE

Steps per Cards:

Controller Stats Method:

11 KiB

Raw Permalink Blame History