completate modifiche report + fix generali

app/Http/Livewire/Reports.php

@@ -551,16 +551,13 @@ class Reports extends Component
                 [
                     'label' => 'Pagamenti Attesi',
                     'backgroundColor' => 'transparent',
+                    'backgroundColor' => 'rgba(59, 130, 246, 0.8)',
                     'borderColor' => 'rgba(59, 130, 246, 1)',
-                    'borderWidth' => 3,
-                    'pointBackgroundColor' => 'rgba(59, 130, 246, 1)',
-                    'pointBorderColor' => '#ffffff',
-                    'pointBorderWidth' => 3,
-                    'pointRadius' => 7,
-                    'pointHoverRadius' => 9,
+                    'borderWidth' => 0,
+                    'borderRadius' => 8,
+                    'borderSkippet' => false,
                     'data' => $totalData,
-                    'type' => 'line',
-                    'tension' => 0.3,
+                    'type' => 'bar',
                     'order' => 1,
                     'participantData' => $participantData
                 ]

composer.json

@@ -11,7 +11,7 @@
         "laravel/framework": "^9.19",
         "laravel/sanctum": "^3.0",
         "laravel/tinker": "^2.7",
-        "league/flysystem-aws-s3-v3": "^3.0",
+        "league/flysystem-aws-s3-v3": "^3.23",
         "livewire/livewire": "^2.12",
         "phpoffice/phpspreadsheet": "^2.0"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "8aacf85495c8b6cb33caeb8ac21b78c3",
+    "content-hash": "ed4a2f58d279612aa2cda24fc977ffbf",
     "packages": [
         {
             "name": "aws/aws-crt-php",

public/css/new_style.css

@@ -64,6 +64,10 @@ body #card--dashboard > .btn--ui:has(i[class*="fa-arrow-left"]) {
     border-radius: 0 !important;
 }
 
+.modal-title {
+    color: var(--color-text);
+}
+
 /* Login */
 .login--box .form--item label {
     width: 100%;
@@ -133,6 +137,11 @@ body #card--dashboard {
 }
 
 /* Sidebar */
+#open-filter,
+#close-filter {
+    background-color: var(--color-blu);
+}
+
 #sidebar--wrapper #filter--section #accordionExample .accordion-header {
     margin-left: 5px;
 }
@@ -184,11 +193,6 @@ body #card--dashboard {
     color: #ffffff;
 }
 
-/* reports */
-body .dashboard-container {
-    background: var(--color-lilla);
-}
-
 /* Resumee card anagrafica */
 .section--tab {
     border: none;
@@ -275,8 +279,16 @@ body #card--resume.card--ui .card--resume_body .resume--tab_info ul li::marker {
 }
 
 body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-corso,
-body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-certificato,
-body #card--resume.card--ui .card--resume_body .resume--tab_info .resume-tessera {
+body
+    #card--resume.card--ui
+    .card--resume_body
+    .resume--tab_info
+    .resume-certificato,
+body
+    #card--resume.card--ui
+    .card--resume_body
+    .resume--tab_info
+    .resume-tessera {
     border-left: 2px solid var(--color-viola);
     padding-left: 15px;
     margin-left: 42px;
@@ -317,7 +329,11 @@ body form .form-check-input {
 }
 
 body .form-check-input:checked[type="checkbox"],
-body form .form-check-input:checked[type="checkbox"] body .form-check-input:checked[type="radio"],
+body
+    form
+    .form-check-input:checked[type="checkbox"]
+    body
+    .form-check-input:checked[type="radio"],
 body form .form-check-input:checked[type="radio"] {
     background-color: var(--color-blu) !important;
 }
@@ -326,7 +342,509 @@ body .form-select[multiple] {
     color: transparent;
 }
 
+body .form-select {
+    padding-block: 10px;
+}
+
 /* contabilità uscite */
 #accountingExit .accountingExit_data {
     width: 100%;
-}
+}
+
+/* dashboard */
+body .dashboard-container {
+    background: var(--color-lilla);
+    height: calc(100dvh - 86px);
+    min-height: calc(100dvh - 86px);
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 20px;
+    padding: 2.5rem !important;
+    background: white;
+}
+
+body .dashboard-container .dashboard-card {
+    border: 1px solid var(--color-outile);
+    border-radius: 12px;
+    padding: 20px;
+    position: relative;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.13);
+}
+
+body .dashboard-container .dashboard-card.card-inverted {
+    border-color: var(--color-lilla);
+    background-color: var(--color-lilla);
+}
+
+body .dashboard-container .dashboard-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 10px;
+}
+
+body .dashboard-container .dashboard-card-title {
+    font-size: 17px;
+    font-weight: bold;
+    color: black;
+    line-height: 1;
+    margin-bottom: 10px;
+}
+
+body .dashboard-container .dashboard-card-icon {
+    color: var(--color-viola);
+    font-size: 20px;
+}
+
+body .dashboard-container .dashboard-card-value {
+    font-size: 48px;
+    font-weight: bold;
+    color: black;
+    margin: 20px 0 5px;
+    line-height: 1;
+}
+
+body .dashboard-container .card-income .dashboard-card-icon,
+body .dashboard-container .card-income .dashboard-card-value {
+    color: var(--color-verde);
+}
+
+body .dashboard-container .card-expense .dashboard-card-icon,
+body .dashboard-container .card-expense .dashboard-card-value {
+    color: var(--color-rosso);
+}
+
+body .dashboard-container .card-delta .dashboard-card-icon,
+body .dashboard-container .card-delta .dashboard-card-value {
+    color: var(--color-viola);
+}
+
+body .dashboard-container .card-income .dashboard-card-value,
+body .dashboard-container .card-expense .dashboard-card-value,
+body .dashboard-container .card-delta .dashboard-card-value {
+    font-size: 30px;
+}
+
+body .dashboard-container .dashboard-card-info {
+    font-size: 14px;
+}
+
+body .dashboard-container .dashboard-card-info span {
+    position: relative;
+    font-weight: 500;
+}
+
+body .dashboard-container .dashboard-card-info .more {
+    color: var(--color-verde);
+}
+
+body .dashboard-container .dashboard-card-info .more:before {
+    content: "+";
+}
+
+body .dashboard-container .dashboard-card-info .less {
+    color: var(--color-rosso);
+}
+
+body .dashboard-container .dashboard-card-info .less:before {
+    content: "-";
+}
+
+body .dashboard-container .dashboard-card-change {
+    font-size: 12px;
+    color: #666;
+}
+
+body .dashboard-container .dashboard-card-change.positive {
+    color: var(--color-verde);
+}
+
+body .dashboard-container .dashboard-card-change.negative {
+    color: var(--color-rosso);
+}
+
+body .dashboard-container .stat-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 12px;
+}
+
+body .dashboard-container .courses-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+body .dashboard-container .course-item {
+    padding: 12px;
+    border-left: 4px solid var(--color-viola);
+    margin-bottom: 8px;
+    background: #f6f7ff;
+    border-radius: 0 8px 8px 0;
+}
+
+body .dashboard-container .course-time {
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+}
+
+body .dashboard-container .course-name {
+    font-size: 13px;
+    color: var(--color-viola);
+    font-weight: 600;
+}
+
+body .dashboard-container .course-days {
+    font-size: 12px;
+    color: #666;
+}
+
+body .dashboard-container .fields-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+body .dashboard-container .field-item {
+    padding: 12px;
+    border: 2px solid var(--color-verde);
+    border-radius: 8px;
+    text-align: center;
+    background: white;
+}
+
+body .dashboard-container .field-item.occupied {
+    border-color: var(--color-rosso);
+    background: #fff5f7;
+}
+
+body .dashboard-container .field-name {
+    font-weight: bold;
+    color: #333;
+}
+
+body .dashboard-container .field-time {
+    color: #666;
+    font-size: 12px;
+}
+
+body .dashboard-container .notes-section {
+}
+
+body .dashboard-container .notes-input {
+    width: 100%;
+    background-color: white;
+    outline: none;
+    font-size: 14px;
+    min-height: 50px;
+    resize: vertical;
+    border: none;
+    border-radius: 6px;
+    padding: 10px;
+}
+
+body .dashboard-container .save-btn {
+    background-color: transparent;
+    color: var(--color-viola);
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: auto;
+    display: block;
+    will-change: color, background-color;
+    transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+body .dashboard-container .save-btn:hover {
+    background-color: var(--color-viola);
+    color: white;
+}
+
+body .dashboard-container .notes-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+body .dashboard-container .notes-list:not(:empty) {
+    margin-block: 25px;
+}
+
+body .dashboard-container .note-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 35%);
+}
+
+body .dashboard-container .note-item:last-of-type {
+    margin-bottom: 0;
+}
+
+body .dashboard-container .note-checkbox {
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgba(0, 0, 0, 35%);
+    border-radius: 100%;
+    background: transparent;
+    color: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    will-change: color, background-color;
+    transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+body .dashboard-container .note-checkbox:hover {
+    background: var(--color-viola);
+    color: white;
+}
+
+body .dashboard-container .note-content {
+    flex: 1;
+}
+
+body .dashboard-container .note-text {
+    color: black;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 500;
+}
+
+body .dashboard-container .note-date {
+    color: black;
+    font-size: 10px;
+}
+
+body .dashboard-container .empty-notes {
+    text-align: center;
+    color: #666;
+    font-size: 13px;
+    padding: 20px;
+    font-style: italic;
+}
+
+body .dashboard-container .chart-card .chart-container {
+    grid-column: unset;
+}
+
+body .dashboard-container .financial-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+body .dashboard-container .financial-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+body .dashboard-container .financial-card.income {
+    border-left: 4px solid var(--color-verde);
+}
+
+body .dashboard-container .financial-card.expense {
+    border-left: 4px solid var(--color-rosso);
+}
+
+body .dashboard-container .financial-amount {
+    font-size: 36px;
+    font-weight: bold;
+    margin: 10px 0;
+}
+
+body .dashboard-container .financial-amount.income {
+    color: var(--color-verde);
+}
+
+body .dashboard-container .financial-amount.expense {
+    color: var(--color-rosso);
+}
+
+body .dashboard-container .recent-users-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+body .dashboard-container .recent-users-table th,
+body .dashboard-container .recent-users-table td {
+    text-align: left;
+    padding: 10px 5px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+body .dashboard-container .recent-users-table th {
+    font-weight: bold;
+    color: var(--color-text);
+    font-size: 15px;
+    padding: 5px;
+}
+
+body .dashboard-container .recent-users-table td {
+    font-size: 13px;
+    color: black;
+}
+
+body .dashboard-container .transaction-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+body .dashboard-container .transaction-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+body .dashboard-container .transaction-name {
+    font-weight: 500;
+    color: #333;
+}
+
+body .dashboard-container .transaction-amount {
+    font-weight: bold;
+}
+
+body .dashboard-container .transaction-type {
+    font-size: 10px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    color: white;
+    font-weight: bold;
+}
+
+body .dashboard-container .transaction-type.income {
+    background: var(--color-verde);
+}
+
+body .dashboard-container .transaction-type.expense {
+    background: var(--color-rosso);
+}
+
+body .dashboard-container .participation-bar {
+    height: 10px;
+    background: #f0f0f0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 8px 0;
+}
+
+body .dashboard-container .participation-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+    border-radius: 10px;
+}
+
+body .dashboard-container .participation-fill.padel {
+    background: #ffd700;
+}
+
+body .dashboard-container .participation-fill.tennis {
+    background: #8b4cf7;
+}
+
+body .dashboard-container .participation-fill.pallavolo {
+    background: #ff6b35;
+}
+
+body .dashboard-container .participation-fill.yoga {
+    background: var(--color-verde);
+}
+
+body .dashboard-container .chart-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 15px;
+}
+
+body .dashboard-container .grid-4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+}
+
+body .dashboard-container .grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+
+body .dashboard-container .grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+body .dashboard-container .grid-2-1 {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 20px;
+}
+
+body .dashboard-container .grid-w-2 {
+    grid-column-end: span 2;
+}
+
+body .dashboard-container .grid-w-3 {
+    grid-column-end: span 3;
+}
+
+body .dashboard-container .full-width {
+    grid-column: span 3;
+}
+
+body .dashboard-container .half-width {
+    grid-column: span 2;
+}
+
+body .dashboard-container .fade-out {
+    opacity: 0;
+    transform: translateX(100%);
+    transition: all 0.3s ease;
+}
+
+body div.dt-button-background {
+    pointer-events: none;
+}
+
+body .chart-body {
+    padding: 0;
+}
+
+body .table-header .table-cell {
+    color: var(--color-text);
+}
+
+body .course-controls {
+    border: none;
+    background: unset;
+    background-color: var(--color-lilla);
+    padding-block: 15px;
+    border-radius: 10px;
+}
+
+body .dashboard-container .chart-card .dashboard-card-title {
+    margin-bottom: 20px;
+}

resources/views/layouts/app.blade.php

@@ -328,14 +328,35 @@
                                 <span>Corsi</span>
                             </button>
                         </h2>
-                        <div id="collapseThree" class="accordion-collapse collapse {{Request::is('course_member_one') || Request::is('course_member_two') || Request::is('course_list') || Request::is('course_member') ? 'show' : ''}}" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                        @php
+                        $iscritti_types = [];
+                        $iscritti_types[] = array('name' => 'Standard', 'type' => 'standard');
+                        $iscritti_types[] = array('name' => 'Personalizzati', 'type' => 'custom');   
+                        @endphp
+                        <div id="collapseThree" class="accordion-collapse collapse {{Request::is('course_member_one') || Request::is('course_member_two') || Request::is('course_list') || Request::is('course_member') || Request::is('rates') ? 'show' : ''}}" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                             <div class="accordion-body">
                                 <ul class="nav nav-pills flex-column align-items-center align-items-sm-start w-100" id="menu-contabilita" style="margin-top:0px;">
-                                    <li class="nav-item {{Request::is('course_member_one') || Request::is('course_member_two') || Request::is('course_member') ? "nav-item-active" : ""}}">
+                                    {{-- <li class="nav-item {{Request::is('course_member_one') || Request::is('course_member_two') || Request::is('course_member') ? "nav-item-active" : ""}}">
                                         <a href="/course_member_one" class="nav-link d-flex align-items-center linkMenu">
                                             <span class="ms-3 d-md-inline">Iscritti</span>
                                         </a>
+                                    </li> --}}
+                                    @php
+                                    $type = null;
+                                    if ((Request::is('course_member') || Request::is('rates')) && (isset($_GET["id"]) || isset($_GET["member_id"])))
+                                    {
+                                        $course_id = isset($_GET["id"]) ? $_GET["id"] : (isset($_GET["member_id"]) ? $_GET["member_id"] : 0);
+                                        $type = \App\Models\Course::findOrFail($course_id)->type;
+                                    }
+                                    @endphp
+                                    @foreach($iscritti_types as $iscritto_type)
+                                    <li class="nav-item {{(Request::is('course_member_two') && request('type') === $iscritto_type["type"]) || ((Request::is('course_member') || Request::is('rates')) && $type === $iscritto_type['type']) ? "nav-item-active" : ""}}">
+                                        <a href="/course_member_two?type={{$iscritto_type["type"]}}" class="nav-link d-flex align-items-center linkMenu">
+                                            <span class="ms-3 d-md-inline">{{$iscritto_type["name"]}}</span>
+                                        </a>
                                     </li>
+                                    @endforeach
+
                                     @if(false)
                                         <li class="nav-item {{Request::is('course_list') ? "nav-item-active" : ""}}">
                                             <a href="/course_list" class="nav-link d-flex align-items-center linkMenu">

resources/views/livewire/course_member.blade.php

@@ -706,7 +706,7 @@
 
                     { data: 'column_10',
                         render: function (data, type, row) {
-                            var html = '<a href="/rates?member_id=' + row["column_7"] + '&member_course_id=' + data + '"><b> <i class="fa-solid fa-chevron-circle-right"></i></b></a>';
+                            var html = '<a href="/rates?member_id=' + row["column_7"] + '&member_course_id=' + data + '"><b> <i class="fa-solid fa-edit"></i></b></a>';
                             return html;
                         }
                     }],

resources/views/livewire/course_member_one.blade.php

@@ -24,7 +24,7 @@
                     <tr>
                         <td>{{$record["name"]}}</td>
                         <td>
-                            <a href="/course_member_two?type={{$record["type"]}}" type="button" class="btn" ><b> <i class="fa-solid fa-chevron-circle-right"></i></b></button>
+                            <a href="/course_member_two?type={{$record["type"]}}" type="button" class="btn" ><b> <i class="fa-solid fa-chevron-right"></i></b></button>
                         </td>
                     </tr>
                 @endforeach

resources/views/livewire/course_member_two.blade.php

@@ -52,7 +52,7 @@
                         @endif
                         <td>{{$record->getins->name ?? ""}}</td>
                         <td>
-                            <a href="/course_member?id={{$record->id}}" type="button" class="btn" ><b> <i class="fa-solid fa-chevron-circle-right"></i></b></button>
+                            <a href="/course_member?id={{$record->id}}" type="button" class="btn" ><b> <i class="fa-solid fa-chevron-right"></i></b></button>
                         </td>
                     </tr>
                 @endforeach

resources/views/livewire/dashboard.blade.php

@@ -1,540 +1,107 @@
 <div class="dashboard-container">
-    <style>
-        .dashboard-container {
-            background: #F6F7FF;
-            min-height: 100vh;
-            padding: 20px;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        .dashboard-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .dashboard-section {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-        }
-
-        .stat-card {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            position: relative;
-        }
-
-        .stat-card-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .stat-card-title {
-            font-size: 14px;
-            color: #666;
-            font-weight: 500;
-        }
-
-        .stat-card-value {
-            font-size: 48px;
-            font-weight: bold;
-            color: #333;
-            margin: 10px 0;
-        }
-
-        .stat-card-change {
-            font-size: 12px;
-            color: #666;
-        }
-
-        .stat-card-change.positive {
-            color: #339E8E;
-        }
-
-        .stat-card-change.negative {
-            color: #D6234F;
-        }
-
-        .stat-icon {
-            width: 24px;
-            height: 24px;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 12px;
-        }
-
-        .courses-list {
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .course-item {
-            padding: 12px;
-            border-left: 4px solid #7438FA;
-            margin-bottom: 8px;
-            background: #F6F7FF;
-            border-radius: 0 8px 8px 0;
-        }
-
-        .course-time {
-            font-weight: bold;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .course-name {
-            font-size: 13px;
-            color: #7438FA;
-            font-weight: 600;
-        }
-
-        .course-days {
-            font-size: 12px;
-            color: #666;
-        }
-
-        .fields-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-        }
-
-        .field-item {
-            padding: 12px;
-            border: 2px solid #339E8E;
-            border-radius: 8px;
-            text-align: center;
-            background: white;
-        }
-
-        .field-item.occupied {
-            border-color: #D6234F;
-            background: #FFF5F7;
-        }
-
-        .field-name {
-            font-weight: bold;
-            color: #333;
-        }
-
-        .field-time {
-            color: #666;
-            font-size: 12px;
-        }
-
-        .notes-section {
-            background: #F6F7FF;
-            border-radius: 8px;
-            padding: 15px;
-            margin-top: 15px;
-        }
-
-        .notes-input {
-            width: 100%;
-            border: none;
-            background: transparent;
-            outline: none;
-            font-size: 14px;
-            min-height: 60px;
-            resize: vertical;
-        }
-
-        .save-btn {
-            background: #7438FA;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 6px;
-            font-size: 12px;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-
-        .save-btn:hover {
-            background: #6028E0;
-        }
-
-        .notes-list {
-            max-height: 200px;
-            overflow-y: auto;
-            margin-bottom: 15px;
-        }
-
-        .note-item {
-            display: flex;
-            align-items: flex-start;
-            gap: 10px;
-            padding: 10px;
-            background: white;
-            border-radius: 8px;
-            margin-bottom: 8px;
-            border-left: 3px solid #7438FA;
-        }
-
-        .note-checkbox {
-            width: 18px;
-            height: 18px;
-            border: 2px solid #7438FA;
-            border-radius: 4px;
-            background: white;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 12px;
-            font-weight: bold;
-            transition: all 0.2s ease;
-            flex-shrink: 0;
-            margin-top: 2px;
-        }
-
-        .note-checkbox:hover {
-            background: #7438FA;
-            transform: scale(1.1);
-        }
-
-        .note-content {
-            flex: 1;
-        }
-
-        .note-text {
-            color: #333;
-            font-size: 14px;
-            line-height: 1.4;
-            margin-bottom: 5px;
-        }
-
-        .note-date {
-            color: #666;
-            font-size: 11px;
-        }
-
-        .empty-notes {
-            text-align: center;
-            color: #666;
-            font-size: 13px;
-            padding: 20px;
-            font-style: italic;
-        }
-
-        .chart-container {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            grid-column: span 3;
-        }
-
-        .financial-cards {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .financial-card {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            text-align: center;
-        }
-
-        .financial-card.income {
-            border-left: 4px solid #339E8E;
-        }
-
-        .financial-card.expense {
-            border-left: 4px solid #D6234F;
-        }
-
-        .financial-amount {
-            font-size: 36px;
-            font-weight: bold;
-            margin: 10px 0;
-        }
-
-        .financial-amount.income {
-            color: #339E8E;
-        }
-
-        .financial-amount.expense {
-            color: #D6234F;
-        }
-
-        .recent-users-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        .recent-users-table th,
-        .recent-users-table td {
-            text-align: left;
-            padding: 12px 8px;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .recent-users-table th {
-            background: #F6F7FF;
-            font-weight: 600;
-            color: #333;
-            font-size: 12px;
-        }
-
-        .recent-users-table td {
-            font-size: 14px;
-            color: #333;
-        }
-
-        .transaction-list {
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .transaction-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 12px;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .transaction-name {
-            font-weight: 500;
-            color: #333;
-        }
-
-        .transaction-amount {
-            font-weight: bold;
-        }
-
-        .transaction-type {
-            font-size: 10px;
-            padding: 4px 8px;
-            border-radius: 12px;
-            color: white;
-            font-weight: bold;
-        }
-
-        .transaction-type.income {
-            background: #339E8E;
-        }
-
-        .transaction-type.expense {
-            background: #D6234F;
-        }
-
-        .participation-bar {
-            height: 20px;
-            background: #f0f0f0;
-            border-radius: 10px;
-            overflow: hidden;
-            margin: 8px 0;
-        }
 
-        .participation-fill {
-            height: 100%;
-            transition: width 0.3s ease;
-        }
-
-        .participation-fill.padel {
-            background: #FFD700;
-        }
-
-        .participation-fill.tennis {
-            background: #8B4CF7;
-        }
-
-        .participation-fill.pallavolo {
-            background: #FF6B35;
-        }
-
-        .participation-fill.yoga {
-            background: #339E8E;
-        }
-
-        .section-title {
-            font-size: 18px;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 20px;
-        }
-
-        .chart-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 15px;
-        }
-
-        .grid-4 {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .grid-3 {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .grid-2 {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .full-width {
-            grid-column: span 3;
-        }
-
-        .half-width {
-            grid-column: span 2;
-        }
-
-        .fade-out {
-            opacity: 0;
-            transform: translateX(100%);
-            transition: all 0.3s ease;
-        }
-    </style>
-
-    <!-- User Statistics Cards -->
-    <div class="grid-4">
-        <div class="stat-card">
-            <div class="stat-card-header">
-                <div class="stat-card-title">Utenti Totali</div>
-                <div class="stat-icon">👥</div>
+    <div class="grid-2-1">
+        <div class="grid-4">
+            <div class="dashboard-card dashboard-stat">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Utenti Totali</div>
+                    <i class="dashboard-card-icon fa-solid fa-user"></i>
+                </div>
+                <div class="dashboard-card-value">{{$activeUsers}}</div>
+                <div class="dashboard-card-info"><span {{$activeUsers> 0 ? 'class=more' : 'class=less'}}>{{$activeUsers}}</span> dal mese scorso</div>
             </div>
-            <div class="stat-card-value">{{$activeUsers}}</div>
-        </div>
 
-        <div class="stat-card">
-            <div class="stat-card-header">
-                <div class="stat-card-title">Tesserati</div>
-                <div class="stat-icon">📋</div>
+            <div class="dashboard-card dashboard-stat">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Tesserati</div>
+                    <i class="dashboard-card-icon fa-solid fa-address-card"></i>
+                </div>
+                <div class="dashboard-card-value">{{$registeredUsers}}</div>
+                <div class="dashboard-card-info"><span {{$registeredUsers> 0 ? 'class=more' : 'class=less'}}>{{$registeredUsers}}</span> dal mese scorso</div>
             </div>
-            <div class="stat-card-value">{{$registeredUsers}}</div>
-        </div>
 
-        <div class="stat-card">
-            <div class="stat-card-header">
-                <div class="stat-card-title">Certificati medici scaduti</div>
-                <div class="stat-icon">📄</div>
+            <div class="dashboard-card dashboard-stat">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Certificati scaduti</div>
+                    <i class="dashboard-card-icon fa-solid fa-file-lines"></i>
+                </div>
+                <div class="dashboard-card-value">{{$expiredCertificates}}</div>
+                <div class="dashboard-card-info"><span {{$expiredCertificates> 0 ? 'class=more' : 'class=less'}}>{{$expiredCertificates}}</span> dal mese scorso</div>
             </div>
-            <div class="stat-card-value">{{$expiredCertificates}}</div>
-        </div>
 
-        <div class="stat-card">
-            <div class="stat-card-header">
-                <div class="stat-card-title">Abbonamenti sospesi</div>
-                <div class="stat-icon">⏸️</div>
+            <div class="dashboard-card dashboard-stat">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Abbonamenti sospesi</div>
+                    <i class="dashboard-card-icon fa-solid fa-user-xmark"></i>
+                </div>
+                <div class="dashboard-card-value">{{$suspendedSubscriptions}}</div>
+                <div class="dashboard-card-info"><span {{$suspendedSubscriptions> 0 ? 'class=more' : 'class=less'}}>{{$suspendedSubscriptions}}</span> dal mese scorso</div>
             </div>
-            <div class="stat-card-value">{{$suspendedSubscriptions}}</div>
-        </div>
-    </div>
 
-    <div class="grid-3">
-        <div class="dashboard-section">
-            <div class="section-title">Ultimi utenti registrati</div>
-            @if(count($recentUsers) > 0)
-            <table class="recent-users-table">
-                <thead>
-                    <tr>
-                        <th>Cognome</th>
-                        <th>Nome</th>
-                        <th>Telefono</th>
-                        <th>Email</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @foreach($recentUsers as $user)
-                    <tr>
-                        <td>{{$user['surname']}}</td>
-                        <td>{{$user['name']}}</td>
-                        <td>{{$user['phone']}}</td>
-                        <td>{{$user['email']}}</td>
-                    </tr>
-                    @endforeach
-                </tbody>
-            </table>
-            @else
-            <div style="text-align: center; color: #666; padding: 40px;">
-                Nessun utente registrato di recente
-            </div>
-            @endif
-        </div>
 
-        <!-- Corsi Section -->
-        <div class="dashboard-section">
-            <div class="section-title">
-                Corsi
-            </div>
-            @if(count($courses) > 0)
-            <div class="courses-list">
-                @foreach($courses as $course)
-                <div class="course-item">
-                    <div class="course-time">{{$course['time']}}</div>
-                    <div class="course-name">{{$course['full_name'] ?? $course['course_name']}}</div>
-                    <div class="course-days">{{$course['days']}}</div>
-                    @if(!empty($course['level_name']) || !empty($course['frequency_name']))
-                    <div style="font-size: 11px; color: #888; margin-top: 4px;">
-                        @if(!empty($course['level_name']))
+            <!-- Corsi Section -->
+            <div class="dashboard-card">
+                <div class="dashboard-card-title">Corsi</div>
+                @if(count($courses) > 0)
+                <div class="courses-list">
+                    @foreach($courses as $course)
+                    <div class="course-item">
+                        <div class="course-time">{{$course['time']}}</div>
+                        <div class="course-name">{{$course['full_name'] ?? $course['course_name']}}</div>
+                        <div class="course-days">{{$course['days']}}</div>
+                        @if(!empty($course['level_name']) || !empty($course['frequency_name']))
+                        <div style="font-size: 11px; color: #888; margin-top: 4px;">
+                            @if(!empty($course['level_name']))
                             <span>{{$course['level_name']}}</span>
-                        @endif
-                        @if(!empty($course['level_name']) && !empty($course['frequency_name']))
+                            @endif
+                            @if(!empty($course['level_name']) && !empty($course['frequency_name']))
                             <span> • </span>
-                        @endif
-                        @if(!empty($course['frequency_name']))
+                            @endif
+                            @if(!empty($course['frequency_name']))
                             <span>{{$course['frequency_name']}}</span>
+                            @endif
+                        </div>
                         @endif
                     </div>
-                    @endif
+                    @endforeach
                 </div>
-                @endforeach
-            </div>
-            @else
-            <div style="text-align: center; color: #666; padding: 40px;">
-                Nessun corso programmato per oggi
-                <div style="font-size: 12px; margin-top: 10px; color: #999;">
-                    Oggi è: <strong>{{$dayName ?? 'N/A'}}</strong>
+                @else
+                <div style="text-align: center; color: #666; padding: 40px;">
+                    Nessun corso programmato per oggi
+                    <div style="font-size: 12px; margin-top: 10px; color: #999;">
+                        Oggi è: <strong>{{$dayName ?? 'N/A'}}</strong>
+                    </div>
                 </div>
+                @endif
             </div>
-            @endif
+
+            {{-- campi e sale --}}
+            <div class="dashboard-card">
+                <div class="dashboard-card-title">Campi e sale</div>
+            </div>
+
+            {{-- grafico --}}
+            <div class="dashboard-card grid-w-2"></div>
         </div>
 
+
         <!-- To Do Section -->
-        <div class="dashboard-section">
-            <div class="section-title">To do</div>
-            <div style="font-size: 14px; color: #666; margin-bottom: 10px;">{{date('d/m/Y')}}</div>
+        <div class="dashboard-card card-inverted">
+            <div class="dashboard-card-title">To do</div>
+            {{-- <div style="font-size: 14px; color: #666; margin-bottom: 10px;">{{date('d/m/Y')}}</div> --}}
 
             <!-- Notes List -->
             @if(count($savedNotes) > 0)
             <div class="notes-list">
                 @foreach($savedNotes as $note)
                 <div class="note-item">
-                    <div class="note-checkbox" wire:click="completeNote('{{$note['id']}}')" title="Segna come completato">
-                        ✓
-                    </div>
                     <div class="note-content">
                         <div class="note-text">{{$note['text']}}</div>
                         <div class="note-date">{{$note['created_at']}}</div>
                     </div>
+                    <div class="note-checkbox" wire:click="completeNote('{{$note['id']}}')" title="Segna come completato">
+                        ✓
+                    </div>
                 </div>
                 @endforeach
             </div>
@@ -554,15 +121,15 @@
 
     <div class="grid-2">
         <!-- Courses Participation Section -->
-        <div class="dashboard-section">
-            <div class="section-title">Corsi con più partecipazioni</div>
+        <div class="dashboard-card">
+            <div class="dashboard-card-title">Corsi con più partecipazioni</div>
             @if(count($coursesParticipation) > 0)
-            <div style="padding: 10px 0;">
+            <div style="padding: 20px 0 0;">
                 @foreach($coursesParticipation as $course)
-                <div style="margin-bottom: 20px;">
+                <div style="margin-bottom: 30px;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
-                        <span style="font-weight: 600; color: #333; font-size: 14px;">{{$course['course_name']}}</span>
-                        <span style="font-size: 12px; color: #666;">{{$course['participants']}} partecipanti</span>
+                        <span style="font-weight: bold; color: var(--color-text); font-size: 13px;">{{$course['course_name']}}</span>
+                        {{-- <span style="font-size: 12px; color: #666;">{{$course['participants']}} partecipanti</span> --}}
                     </div>
                     <div class="participation-bar">
                         <div class="participation-fill {{$course['color']}}" style="width: {{$course['percentage']}}%"></div>
@@ -577,43 +144,82 @@
             @endif
         </div>
 
-        <!-- Financial Cards moved here -->
-        <div>
-            <div class="financial-cards" style="margin-bottom: 0;">
-                <div class="financial-card income">
-                    <div style="font-size: 14px; color: #666; margin-bottom: 10px;">Incassato mese corrente</div>
-                    <div class="financial-amount income">€ {{number_format($toReceive, 2)}}</div>
+        <!-- User Statistics Cards -->
+        <div class="dashboard-card">
+            <div class="dashboard-card-title">Ultimi utenti registrati</div>
+            @if(count($recentUsers) > 0)
+            <table class="recent-users-table">
+                <thead>
+                    <tr>
+                        <th>Cognome</th>
+                        <th>Nome</th>
+                        <th>Telefono</th>
+                        <th>Email</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach($recentUsers as $user)
+                    <tr>
+                        <td>{{$user['surname']}}</td>
+                        <td>{{$user['name']}}</td>
+                        <td>{{$user['phone']}}</td>
+                        <td>{{$user['email']}}</td>
+                    </tr>
+                    @endforeach
+                </tbody>
+            </table>
+            @else
+            <div style="text-align: center; color: #666; padding: 40px;">
+                Nessun utente registrato di recente
+            </div>
+            @endif
+        </div>
+    </div>
+
+    <div class="grid-2">
+        <div class="grid-3">
+            <!-- Financial Cards moved here -->
+            <div class="dashboard-card dashboard-stat card-inverted card-income">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Da incassare</div>
+                    <i class="dashboard-card-icon fa-solid fa-money-bill-trend-up"></i>
                 </div>
+                <div class="dashboard-card-value">{{number_format($toReceive, 2, ",", ".")}}</div>
+            </div>
 
-                <div class="financial-card expense">
-                    <div style="font-size: 14px; color: #666; margin-bottom: 10px;">Pagato mese corrente</div>
-                    <div class="financial-amount expense">€ {{number_format($toPay, 2)}}</div>
+            <div class="dashboard-card dashboard-stat card-inverted card-expense">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Da pagare</div>
+                    <i class="dashboard-card-icon fa-solid fa-money-bill-transfer"></i>
                 </div>
+                <div class="dashboard-card-value">{{number_format($toPay, 2, ",", ".")}}</div>
             </div>
-        </div>
-    </div>
 
-    <div class="dashboard-section">
-        <div class="section-title">Ultimi movimenti finanziari</div>
-        @if(count($recentTransactions) > 0)
-        <div class="transaction-list">
-            @foreach($recentTransactions as $transaction)
-            <div class="transaction-item">
-                <div class="transaction-name">{{$transaction['name']}}</div>
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <div class="transaction-amount">€ {{number_format($transaction['amount'], 2)}}</div>
-                    <div class="transaction-type {{$transaction['type'] == 'ENTRATA' ? 'income' : 'expense'}}">
-                        {{$transaction['type']}}
+            <div class="dashboard-card grid-w-3">
+                <div class="dashboard-card-title">Ultimi movimenti finanziari</div>
+                @if(count($recentTransactions) > 0)
+                <div class="transaction-list">
+                    @foreach($recentTransactions as $transaction)
+                    <div class="transaction-item">
+                        <div class="transaction-name">{{$transaction['name']}}</div>
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            <div class="transaction-amount">€ {{number_format($transaction['amount'], 2)}}</div>
+                            <div class="transaction-type {{$transaction['type'] == 'ENTRATA' ? 'income' : 'expense'}}">
+                                {{$transaction['type']}}
+                            </div>
+                        </div>
                     </div>
+                    @endforeach
+                </div>
+                @else
+                <div style="text-align: center; color: #666; padding: 40px;">
+                    Nessun movimento finanziario recente
                 </div>
+                @endif
             </div>
-            @endforeach
-        </div>
-        @else
-        <div style="text-align: center; color: #666; padding: 40px;">
-            Nessun movimento finanziario recente
         </div>
-        @endif
+        
+        <div class="dashboard-card"></div>
     </div>
 </div>
 
@@ -654,4 +260,4 @@
         }
     });
 </script>
-@endpush
+@endpush

resources/views/livewire/reports.blade.php

@@ -4,85 +4,73 @@
     <link rel="stylesheet" href="{{ asset('css/chart-reports.css') }}">
 
     <div class="dashboard-container">
-        <div class="controls-section">
+        <div class="dashboard-card controls-section">
             <div class="control-group">
                 <label for="season-filter">Stagione di Riferimento:</label>
                 <select class="form-select" wire:model="seasonFilter" wire:change="updateCharts">
                     @foreach($this->getAvailableSeasons() as $season)
-                        <option value="{{ $season }}">{{ $season }}</option>
+                    <option value="{{ $season }}">{{ $season }}</option>
                     @endforeach
                 </select>
             </div>
         </div>
 
         @php
-            $summary = $this->getYearlySummary();
+        $summary = $this->getYearlySummary();
         @endphp
         <div class="summary-cards">
-            <div class="summary-card income">
-                <h3>Entrate Totali</h3>
-                <div class="value">€{{ number_format($summary['totalIncome'], 2, ',', '.') }}</div>
+            <div class="dashboard-card dashboard-stat card-inverted card-income">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Entrate totali</div>
+                    <i class="dashboard-card-icon fa-solid fa-money-bill-trend-up"></i>
+                </div>
+                <div class="dashboard-card-value">€{{number_format($summary['totalIncome'], 2, ",", ".")}}</div>
             </div>
-            <div class="summary-card expense">
-                <h3>Uscite Totali</h3>
-                <div class="value">€{{ number_format($summary['totalExpenses'], 2, ',', '.') }}</div>
+
+            <div class="dashboard-card dashboard-stat card-inverted card-expense">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Uscite totali</div>
+                    <i class="dashboard-card-icon fa-solid fa-money-bill-transfer"></i>
+                </div>
+                <div class="dashboard-card-value">€{{number_format($summary['totalExpenses'], 2, ",", ".")}}</div>
             </div>
-            <div class="summary-card delta {{ $summary['delta'] < 0 ? 'negative' : '' }}">
-                <h3>Bilancio Netto</h3>
-                <div class="value">€{{ number_format($summary['delta'], 2, ',', '.') }}</div>
+
+            <div class="dashboard-card dashboard-stat card-inverted card-delta">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Bilancio netto</div>
+                    <i class="dashboard-card-icon fa-solid fa-money-bill-transfer"></i>
+                </div>
+                {{-- {{ $summary['delta'] < 0 ? 'negative' : '' }} --}} <div class="dashboard-card-value">€{{number_format($summary['delta'], 2, ",", ".")}}
             </div>
         </div>
+    </div>
 
-        <div wire:ignore>
-            <div class="chart-row">
-                <div class="chart-card">
-                    <div class="chart-header">
-                        <h3 class="chart-title">Entrate e Uscite Mensili - <span
-                                id="monthly-season-title">{{ $seasonFilter }}</span></h3>
-                    </div>
-                    <div class="chart-body">
-                        <div style="display: grid; grid-template-columns: 1fr 300px; align-items: start;">
-                            <div class="chart-container">
-                                <canvas id="monthly-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
-                            </div>
-                            <div class="monthly-table-container" id="monthly-table">
-                            </div>
+    <div wire:ignore>
+        <div class="chart-row">
+            <div class="dashboard-card chart-card">
+                <div class="dashboard-card-title">Entrate e Uscite Mensili - <span id="causals-season-title">{{ $seasonFilter }}</span></div>
+                <div class="chart-body">
+                    <div style="display: grid; grid-template-columns: 1fr 300px; align-items: start;">
+                        <div class="chart-container">
+                            <canvas id="monthly-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
+                        </div>
+                        <div class="monthly-table-container" id="monthly-table">
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="chart-row">
-                <div class="chart-card">
-                    <div class="chart-header">
-                        <h3 class="chart-title">Causali Performanti - <span
-                                id="causals-season-title">{{ $seasonFilter }}</span></h3>
-                    </div>
-                    <div class="chart-body">
-                        <div style="display: grid; grid-template-columns: 1fr 700px; gap: 1rem; align-items: start;">
-                            <div class="causals-table-container" id="causals-table">
-                            </div>
-
-                            <div class="chart-container">
-                                <canvas id="causals-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
-                            </div>
+        <div class="chart-row">
+            <div class="dashboard-card chart-card">
+                <div class="dashboard-card-title">Causali Performanti - <span id="causals-season-title">{{ $seasonFilter }}</span></div>
+                <div class="chart-body">
+                    <div style="display: grid; grid-template-columns: 1fr 700px; gap: 1rem; align-items: start;">
+                        <div class="causals-table-container" id="causals-table">
                         </div>
-                    </div>
-                </div>
-            </div>
 
-            <div class="chart-row">
-                <div class="chart-card">
-                    <div class="chart-header">
-                        <h3 class="chart-title">Tesserati per Stagione</h3>
-                    </div>
-                    <div class="chart-body">
-                        <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>
-                            <div class="members-table-container" id="members-table">
-                            </div>
+                        <div class="chart-container">
+                            <canvas id="causals-chart-{{ str_replace('-', '', $seasonFilter) }}"></canvas>
                         </div>
                     </div>
                 </div>
@@ -90,54 +78,66 @@
         </div>
 
         <div class="chart-row">
-            <div class="chart-card modern-course-card">
-                <div class="chart-header">
-                    <h3 class="chart-title">Analisi Corsi</h3>
-                </div>
+            <div class="dashboard-card chart-card">
+                <div class="dashboard-card-title">Tesserati per Stagione</div>
                 <div class="chart-body">
-                    <div class="course-controls">
-                        <div class="control-group">
-                            <label>Seleziona Corso ({{ $seasonFilter }}):</label>
-                            <select class="form-select modern-select" wire:model.live="selectedCourse">
-                                <option value="">Seleziona un Corso</option>
-                                @foreach($this->getCoursesForSelect() as $course)
-                                    <option value="{{ $course['id'] }}">{{ $course['full_name'] }}</option>
-                                @endforeach
-                            </select>
+                    <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>
+                        <div class="members-table-container" id="members-table">
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="chart-row">
+        <div class="dashboard-card chart-card modern-course-card">
+            <div class="dashboard-card-title">Analisi Corsi</div>
+            <div class="chart-body">
+                <div class="course-controls">
+                    <div class="control-group">
+                        <label>Seleziona Corso ({{ $seasonFilter }}):</label>
+                        <select class="form-select modern-select" wire:model.live="selectedCourse">
+                            <option value="">Seleziona un Corso</option>
+                            @foreach($this->getCoursesForSelect() as $course)
+                            <option value="{{ $course['id'] }}">{{ $course['full_name'] }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                </div>
 
-                    @if($selectedCourse)
-                        <div wire:ignore wire:key="course-chart-{{ $seasonFilter }}-{{ $selectedCourse }}">
-                            <div class="modern-chart-layout">
-                                <div class="course-delta-table"
-                                    id="course-delta-table-{{ str_replace('-', '', $seasonFilter) }}-{{ $selectedCourse }}">
-                                </div>
-
-                                <div class="modern-chart-container">
-                                    <canvas
-                                        id="courses-chart-{{ str_replace('-', '', $seasonFilter) }}-{{ $selectedCourse }}"></canvas>
-                                </div>
-                            </div>
+                @if($selectedCourse)
+                <div wire:ignore wire:key="course-chart-{{ $seasonFilter }}-{{ $selectedCourse }}">
+                    <div class="modern-chart-layout">
+                        <div class="course-delta-table" id="course-delta-table-{{ str_replace('-', '', $seasonFilter) }}-{{ $selectedCourse }}">
                         </div>
-                    @else
-                        <div class="chart-placeholder">
-                            <div style="text-align: center;">
-                                <div style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;">📊</div>
-                                <p style="font-size: 1.25rem; font-weight: 600; margin: 0;">Seleziona un corso per
-                                    visualizzare il grafico</p>
-                                <p style="font-size: 1rem; opacity: 0.7; margin-top: 0.5rem;">Usa il menu a tendina sopra
-                                    per scegliere un corso</p>
-                            </div>
+
+                        <div class="modern-chart-container">
+                            <canvas id="courses-chart-{{ str_replace('-', '', $seasonFilter) }}-{{ $selectedCourse }}"></canvas>
                         </div>
-                    @endif
+                    </div>
                 </div>
+                @else
+                <div class="chart-placeholder">
+                    <div style="text-align: center;">
+                        <div style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;">📊</div>
+                        <p style="font-size: 1.25rem; font-weight: 600; margin: 0;">Seleziona un corso per
+                            visualizzare il grafico</p>
+                        <p style="font-size: 1rem; opacity: 0.7; margin-top: 0.5rem;">Usa il menu a tendina sopra
+                            per scegliere un corso</p>
+                    </div>
+                </div>
+                @endif
             </div>
         </div>
     </div>
+</div>
 
-    <script>
-        window.ReportsChartManager = window.ReportsChartManager || {
+<script>
+    window.ReportsChartManager = window.ReportsChartManager || {
             charts: {},
             currentSeason: null,
 
@@ -231,47 +231,68 @@
                                 data: monthlyData.datasets[0].data,
                                 backgroundColor: incomeGradient,
                                 borderColor: '#00b894',
-                                borderWidth: 2,
-                                borderRadius: 12,
+                                borderWidth: 0,
+                                borderRadius: {
+                                    topLeft: 8,
+                                    topRight: 8,
+                                    bottomLeft: 0,
+                                    bottomRight: 0,
+                                },
                                 borderSkipped: false,
+                                barThickness: "flex",
+                                barPercentage: 0.65,
+                                categoryPercentage: 0.4,
                             },
                             {
                                 label: 'Uscite',
                                 data: monthlyData.datasets[1].data,
                                 backgroundColor: expenseGradient,
                                 borderColor: '#ff6b6b',
-                                borderWidth: 2,
-                                borderRadius: 12,
+                                borderWidth: 0,
+                                borderRadius: {
+                                    topLeft: 8,
+                                    topRight: 8,
+                                    bottomLeft: 0,
+                                    bottomRight: 0,
+                                },
                                 borderSkipped: false,
+                                barThickness: "flex",
+                                barPercentage: 0.65,
+                                categoryPercentage: 0.4,
                             }
                         ]
                     },
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
+                        interaction: {
+                            mode: 'index',
+                            intersect: false,
+                        },
                         plugins: {
                             legend: {
-                                position: 'top',
+                                position: 'bottom',
                                 labels: {
                                     usePointStyle: true,
                                     padding: 20,
+                                    pointStyle: "rect",
                                     font: { weight: '500' }
                                 }
                             },
                             tooltip: {
-                                backgroundColor: 'rgba(255, 255, 255,1)',
+                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                 titleColor: '#212529',
                                 bodyColor: '#495057',
                                 borderColor: '#e9ecef',
-                                borderWidth: 12,
-                                cornerRadius: 8,
+                                borderWidth: 2,
+                                cornerRadius: 0,
                                 callbacks: {
                                     label: function (context) {
                                         return context.dataset.label + ': €' +
                                             new Intl.NumberFormat('it-IT').format(context.parsed.y);
                                     }
                                 }
-                            }
+                            },
                         },
                         scales: {
                             x: {
@@ -291,8 +312,8 @@
                         elements: {
                             bar: {
                                 borderRadius: {
-                                    topLeft: 12,
-                                    topRight: 12,
+                                    topLeft: 8,
+                                    topRight: 8,
                                     bottomLeft: 0,
                                     bottomRight: 0
                                 }
@@ -349,10 +370,10 @@
                         cutout: '30%',
                         layout: {
                             padding: {
-                                top: 10,
-                                right: 10,
-                                bottom: 10,
-                                left: 10
+                                top: 30,
+                                right: 30,
+                                bottom: 30,
+                                left: 30
                             }
                         },
                         plugins: {
@@ -360,12 +381,12 @@
                                 display: false
                             },
                             tooltip: {
-                                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                 titleColor: '#212529',
                                 bodyColor: '#495057',
                                 borderColor: '#e9ecef',
-                                borderWidth: 1,
-                                cornerRadius: 8,
+                                borderWidth: 2,
+                                cornerRadius: 0,
                                 titleFont: {
                                     size: 13,
                                     weight: 'bold'
@@ -461,30 +482,30 @@
                     if (dataset.label === 'Totale Membri Tesserati') {
                         return {
                             ...dataset,
-                            backgroundColor: gradient,
-                            borderColor: '#3b5bdb',
-                            borderWidth: 3,
-                            pointBackgroundColor: '#3b5bdb',
-                            pointBorderColor: '#ffffff',
+                            borderColor: '#8979ff',
+                            borderWidth: 2,
+                            pointBackgroundColor: '#ffffff',
+                            pointBorderColor: '#8979ff',
                             pointBorderWidth: 2,
-                            pointRadius: 6,
-                            pointHoverRadius: 8,
+                            pointRadius: 3,
+                            pointHoverRadius: 3,
                             type: 'line',
                             order: 1,
+                            backgroundColor: "#8979ff40",
                             fill: true
                         };
                     } else {
                         return {
                             ...dataset,
+                            backgroundColor: dataset.backgroundColor,
                             borderWidth: 2,
-                            pointRadius: 4,
-                            pointHoverRadius: 6,
-                            pointBorderColor: '#ffffff',
-                            pointBorderWidth: 1,
+                            pointRadius: 3,
+                            pointHoverRadius: 3,
+                            pointBackgroundColor: '#ffffff',
+                            pointBorderWidth: 2,
                             type: 'line',
                             order: 2,
-                            fill: false,
-                            backgroundColor: 'transparent'
+                            fill: true
                         };
                     }
                 });
@@ -504,21 +525,21 @@
                         },
                         plugins: {
                             legend: {
-                                display: true,
-                                position: 'top',
+                                position: 'bottom',
                                 labels: {
                                     usePointStyle: true,
-                                    padding: 15,
-                                    font: { weight: '500', size: 12 }
+                                    padding: 20,
+                                    pointStyle: "rect",
+                                    font: { weight: '500' }
                                 }
                             },
                             tooltip: {
-                                backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                 titleColor: '#212529',
                                 bodyColor: '#495057',
                                 borderColor: '#e9ecef',
-                                borderWidth: 1,
-                                cornerRadius: 8,
+                                borderWidth: 2,
+                                cornerRadius: 0,
                                 callbacks: {
                                     title: function (context) {
                                         return 'Stagione: ' + context[0].label;
@@ -731,11 +752,11 @@
                         },
                         plugins: {
                             legend: {
-                                display: true,
-                                position: 'top',
+                                position: 'bottom',
                                 labels: {
                                     usePointStyle: true,
                                     padding: 20,
+                                    pointStyle: "rect",
                                     font: { weight: '500' }
                                 }
                             },
@@ -744,8 +765,8 @@
                                 titleColor: '#212529',
                                 bodyColor: '#495057',
                                 borderColor: '#e9ecef',
-                                borderWidth: 1,
-                                cornerRadius: 8,
+                                borderWidth: 2,
+                                cornerRadius: 0,
                                 callbacks: {
                                     label: function (context) {
                                         return context.dataset.label + ': €' +
@@ -862,27 +883,39 @@
                                     backgroundColor: earnedGradient,
                                     borderColor: 'rgba(16, 185, 129, 1)',
                                     borderWidth: 0,
-                                    borderRadius: 8,
-                                    borderSkipped: false,
+                                    borderRadius: {
+                                        topLeft: 8,
+                                        topRight: 8,
+                                        bottomLeft: 0,
+                                        bottomRight: 0,
+                                    },
+                                    borderSkipped: true,
                                     data: earnedData,
                                     type: 'bar',
-                                    order: 2
+                                    barThickness: "flex",
+                                    barPercentage: 0.65,
+                                    categoryPercentage: 0.4,
+                                    order: 2,
                                 },
                                 {
                                     label: 'Pagamenti Attesi',
-                                    backgroundColor: 'transparent',
+                                    backgroundColor: 'rgba(59, 130, 246, 1)',
                                     borderColor: 'rgba(59, 130, 246, 1)',
-                                    borderWidth: 3,
-                                    pointBackgroundColor: 'rgba(59, 130, 246, 1)',
-                                    pointBorderColor: '#ffffff',
-                                    pointBorderWidth: 3,
-                                    pointRadius: 7,
-                                    pointHoverRadius: 9,
+                                    borderWidth: 0,
+                                    borderRadius: {
+                                        topLeft: 8,
+                                        topRight: 8,
+                                        bottomLeft: 0,
+                                        bottomRight: 0,
+                                    },
+                                    borderSkipped: true,
                                     data: totalData,
-                                    type: 'line',
-                                    tension: 0.3,
+                                    type: 'bar',
+                                    barThickness: "flex",
+                                    barPercentage: 0.65,
+                                    categoryPercentage: 0.4,
                                     order: 1,
-                                    participantData: participantData
+                                    participantData: participantData,
                                 }
                             ]
                         },
@@ -903,6 +936,7 @@
                             },
                             scales: {
                                 x: {
+                                    stacked: true,
                                     grid: {
                                         display: false
                                     },
@@ -918,6 +952,7 @@
                                     }
                                 },
                                 y: {
+                                    stacked: true,
                                     beginAtZero: true,
                                     grid: {
                                         color: 'rgba(156, 163, 175, 0.15)',
@@ -943,21 +978,21 @@
                             },
                             plugins: {
                                 legend: {
-                                    display: true,
-                                    position: 'top',
+                                    position: 'bottom',
                                     labels: {
                                         usePointStyle: true,
-                                        padding: 15,
-                                        font: { weight: '500', size: 12 },
+                                        padding: 20,
+                                        pointStyle: "rect",
+                                        font: { weight: '500' }
                                     }
                                 },
                                 tooltip: {
-                                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                     titleColor: '#111827',
                                     bodyColor: '#374151',
                                     borderColor: 'rgba(229, 231, 235, 0.8)',
-                                    borderWidth: 1,
-                                    cornerRadius: 12,
+                                    borderWidth: 2,
+                                    cornerRadius: 0,
                                     titleFont: {
                                         weight: 'bold',
                                         size: 15
@@ -1019,8 +1054,8 @@
                                     borderJoinStyle: 'round'
                                 },
                                 point: {
-                                    hoverBorderWidth: 4,
-                                    borderWidth: 3
+                                    hoverBorderWidth: 2,
+                                    borderWidth: 1
                                 }
                             }
                         }
@@ -1126,5 +1161,5 @@
                 }, 200);
             });
         });
-    </script>
-</div>
+</script>
+</div>

resources/views/livewire/settings.blade.php

@@ -24,21 +24,21 @@
                 <a href="/categories">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Gruppi di appartenenza</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/disciplines">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Discipline</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/cards">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Tesseramenti</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
@@ -50,42 +50,42 @@
                 <a href="/course_subscriptions">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Abbonamenti</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/courses">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Corsi</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/course_durations">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Durata</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/course_frequencies">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Frequenza</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/course_levels">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Livelli</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/course_types">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Tipologie</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
@@ -97,28 +97,28 @@
                 <a href="/banks">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Banche</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/causals">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Causali</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/vats">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Iva</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/payment_methods">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Metodi di pagamento</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
@@ -130,14 +130,14 @@
                 <a href="/mail_comunications">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Email</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">
                 <a href="/sms_comunications">
                     <div class="row">
                         <div class="col-md-11 p-2"><h5>Sms</h5></div>
-                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-circle-right"></i></div>
+                        <div class="col-md-1 p-2"><i class="fa-solid fa-chevron-right"></i></div>
                     </div>
                 </a>
                 <hr size="1">