reports

public/css/chart-reports.css

@@ -313,22 +313,26 @@
 
 .members-table .table-header {
     display: grid;
-    grid-template-columns: 1.2fr 0.8fr 1fr;
+    grid-template-columns: 1fr 0.8fr 1fr 1.5fr;
     gap: 0.5rem;
     margin-bottom: 0.5rem;
     padding-bottom: 0.5rem;
     border-bottom: 2px solid var(--border-color);
 }
 
+
 .members-table .table-row {
     display: grid;
-    grid-template-columns: 1.2fr 0.8fr 1fr;
-    border-bottom: 1px solid #e9ecef;
+    grid-template-columns: 1fr 0.8fr 1fr 1.5fr;
+    gap: 0.5rem;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #F6F7FF;
     transition: background-color 0.2s ease;
+    align-items: start;
 }
 
 .table-cell.season-name {
-    text-align: left;
+    text-align: center;
     font-weight: 500;
     font-size: 0.7rem;
 }
@@ -340,7 +344,7 @@
 }
 
 .table-cell.variation {
-    text-align: right;
+    text-align: center;
     font-size: 0.7rem;
 }
 
@@ -794,3 +798,129 @@
 .causals-table.compact .table-header {
     border-bottom: 2px solid #F6F7FF;
 }
+
+.table-cell.card-types {
+    text-align: left;
+    padding: 0.25rem 0.5rem;
+}
+
+.card-types-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 120px;
+    overflow-y: auto;
+}
+
+.card-type-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    padding: 0.25rem 0;
+    min-height: 20px;
+}
+
+.card-type-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.card-type-name {
+    flex: 1;
+    font-weight: 500;
+    color: #374151;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.card-type-count {
+    font-weight: 600;
+    color: #6366f1;
+    min-width: 20px;
+    text-align: right;
+    font-size: 0.7rem;
+}
+
+.no-card-types {
+    font-size: 0.75rem;
+    color: #9ca3af;
+    font-style: italic;
+    padding: 0.25rem 0;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 1024px) {
+    .members-table .table-header {
+        grid-template-columns: 1fr;
+        gap: 0.25rem;
+    }
+
+    .members-table .table-row {
+        grid-template-columns: 1fr;
+        gap: 0.25rem;
+        padding: 1rem 0;
+        border-bottom: 2px solid #F6F7FF;
+    }
+
+    .table-cell::before {
+        content: attr(data-label) ": ";
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        font-size: 0.75rem;
+        letter-spacing: 0.5px;
+    }
+
+    .table-cell.season-name::before {
+        content: "Stagione: ";
+    }
+
+    .table-cell.members-count::before {
+        content: "Tesserati: ";
+    }
+
+    .table-cell.variation::before {
+        content: "Variazione: ";
+    }
+
+    .table-cell.card-types::before {
+        content: "Tipologie: ";
+    }
+
+    .card-types-container {
+        margin-top: 0.5rem;
+        max-height: none;
+        overflow-y: visible;
+    }
+
+    .card-type-item {
+        background: #f8f9fa;
+        border-radius: 6px;
+        padding: 0.5rem;
+        margin-bottom: 0.25rem;
+    }
+}
+
+/* Scrollbar styling for card types container */
+.card-types-container::-webkit-scrollbar {
+    width: 4px;
+}
+
+.card-types-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+}
+
+.card-types-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+}
+
+.card-types-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}

resources/views/livewire/reports.blade.php

@@ -77,7 +77,7 @@
                         <h3 class="chart-title">Tesserati per Stagione</h3>
                     </div>
                     <div class="chart-body">
-                        <div style="display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start;">
+                        <div style="display: grid; grid-template-columns: 1fr 500px; gap: 1rem; align-items: start;">
                             <div class="chart-container">
                                 <canvas id="members-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
                             </div>
@@ -597,14 +597,18 @@
                 if (!container) return;
 
                 const seasonLabels = membersData.labels;
-                const memberCounts = membersData.datasets[0].data;
+                const totalDataset = membersData.datasets.find(d => d.label === 'Totale Membri Tesserati');
+                const cardTypeDatasets = membersData.datasets.filter(d => d.label !== 'Totale Membri Tesserati');
+
+                const memberCounts = totalDataset ? totalDataset.data : [];
 
                 let tableHtml = `
                     <div class="members-table">
                         <div class="table-header">
                             <div class="table-cell">Stagione</div>
-                            <div class="table-cell">Tesserati</div>
+                            <div class="table-cell">Totale</div>
                             <div class="table-cell">Variazione</div>
+                            <div class="table-cell">Tipologie</div>
                         </div>
                 `;
 
@@ -626,13 +630,38 @@
                         }
                     }
 
+                    // Build card type breakdown
+                    let cardTypeBreakdown = '';
+                    cardTypeDatasets.forEach((dataset, datasetIndex) => {
+                        const count = dataset.data[index] || 0;
+                        if (count > 0) {
+                            const color = dataset.borderColor || '#6b7280';
+                            cardTypeBreakdown += `
+                    <div class="card-type-item">
+                        <span class="card-type-indicator" style="background-color: ${color}"></span>
+                        <span class="card-type-name">${dataset.label}</span>
+                        <span class="card-type-count">${count}</span>
+                    </div>
+                `;
+                        }
+                    });
+
+                    if (!cardTypeBreakdown) {
+                        cardTypeBreakdown = '<div class="no-card-types">Nessun dettaglio</div>';
+                    }
+
                     tableHtml += `
-                        <div class="table-row ${rowClass}">
-                            <div class="table-cell season-name">${season}</div>
-                            <div class="table-cell members-count">${new Intl.NumberFormat('it-IT').format(current)}</div>
-                            <div class="table-cell variation">${variationText}</div>
-                        </div>
-                    `;
+            <div class="table-row ${rowClass}">
+                <div class="table-cell season-name">${season}</div>
+                <div class="table-cell members-count">${new Intl.NumberFormat('it-IT').format(current)}</div>
+                <div class="table-cell variation">${variationText}</div>
+                <div class="table-cell card-types">
+                    <div class="card-types-container">
+                        ${cardTypeBreakdown}
+                    </div>
+                </div>
+            </div>
+        `;
                 });
 
                 tableHtml += '</div>';