- invio RIS...

quasar.config.ts

@@ -82,7 +82,7 @@ export default defineConfig((ctx) => {
           ...(viteConf.css || {}),
           preprocessorOptions: {
             scss: {
-              additionalData: `@use "sass:color"; @use "@/css/variables.scss" as *;`,
+              additionalData: `@use "sass:color"; @use "src/css/variables.scss" as *;`,
             },
           },
         };

src/components/CFindUsers/CFindUsers.ts

@@ -35,6 +35,7 @@ import { colmyUserPeople, colmyUserGroup } from '@store/Modules/fieldsTable';
 
 export default defineComponent({
   name: 'CFindUsers',
+  emits: ['clickContact'],
   props: {
     actionType: {
       type: Number,
@@ -46,6 +47,11 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    enableContactClick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   components: {
     CMyUser,
@@ -57,7 +63,7 @@ export default defineComponent({
     CGridTableRec,
     CQRCode,
   },
-  setup(props) {
+  setup(props, { emit }) {
     const userStore = useUserStore();
     const globalStore = useGlobalStore();
     const circuitStore = useCircuitStore();
@@ -253,6 +259,10 @@ export default defineComponent({
       usersList.value.listgroup = receiveRislistgroup;
     }
 
+    function clickContact(data: any) {
+      emit('clickContact', data)
+    }
+
     return {
       userStore,
       tools,
@@ -277,6 +287,7 @@ export default defineComponent({
       extraparams_groups,
       filtercustom,
       arrfilterand,
+      clickContact,
     };
   },
 });

src/components/CFindUsers/CFindUsers.vue

@@ -65,6 +65,9 @@
           :showCol="false"
           :extraparams="extraparams()"
           :actionType="actionType"
+          @clickContact="clickContact"
+          :enableContactClick="enableContactClick"
+
         >
         </CGridTableRec>
       </div>
@@ -99,6 +102,8 @@
           :extraparams="extraparams_groups()"
           :actionType="actionType"
           :visufind="costanti.FIND_GROUP"
+          @clickContact="clickContact"
+          :enableContactClick="enableContactClick"
         >
         </CGridTableRec>
       </div>

src/components/CGridTableRec/CGridTableRec.ts

@@ -71,7 +71,7 @@ import { isMap } from 'util/types';
 
 export default defineComponent({
   name: 'CGridTableRec',
-  emits: ['clickButtBar', 'savefilter'],
+  emits: ['clickButtBar', 'savefilter', 'clickContact'],
   props: {
     prop_mytitle: {
       type: String,
@@ -377,6 +377,11 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    enableContactClick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   components: {
     CMyPopupEdit,
@@ -3230,6 +3235,10 @@ export default defineComponent({
       return false;
     }
 
+    function clickContact(data: any) {
+      emit('clickContact', data);
+    }
+
     created();
 
     return {
@@ -3368,6 +3377,7 @@ export default defineComponent({
       getisDettagliByCatalog,
       getisDettagliByRaccolta,
       hidewindowEdit,
+      clickContact,
     };
   },
 });

src/components/CGridTableRec/CGridTableRec.vue

@@ -679,6 +679,8 @@
                     col_footer ? tools.getLabelFooterByRow(row, col_footer, tablesel) : ''
                   "
                   @showInnerDialog="showInnerDialog"
+                  @clickContact="clickContact"
+                  :enableContactClick="enableContactClick"
                 >
                 </CMyUser>
 
@@ -701,6 +703,8 @@
                   :finder="false"
                   :mygrp="row"
                   :visu="visufind ? visufind : costanti.FIND_GROUP"
+                  @clickContact="clickContact"
+                  :enableContactClick="enableContactClick"
                 />
               </div>
             </div>

src/components/CMenuItem/CMenuItem.scss

@@ -1,20 +1,72 @@
 // ==========================================
-// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO
+// CMENUITEM.SCSS
-// Mantiene tutto il codice originale + stile moderno
 // ==========================================
 
+// ==========================================
+// VARIABILI COLORI MENU
+// ==========================================
+$menu-border-color: #dedede;
+$menu-border-color-dark: #404040;
+
+$menu-active-color: #027be3;
+$menu-active-color-dark: #4da3ff;
+$menu-active-bg: #dadada;
+$menu-active-bg-dark: #2a3a4a;
+
+$menu-hover-bg: rgba(0, 0, 0, 0.04);
+$menu-hover-bg-dark: rgba(255, 255, 255, 0.08);
+
+$menu-text-color: rgba(0, 0, 0, 0.87);
+$menu-text-color-dark: rgba(255, 255, 255, 0.87);
+
+$menu-icon-color: rgba(0, 0, 0, 0.5);
+$menu-icon-color-dark: rgba(255, 255, 255, 0.5);
+
+$subtitle-color: #666;
+$subtitle-color-dark: #aaa;
+
+// Colori ruoli
+$color-admin: #d32f2f;
+$color-admin-dark: #ef5350;
+$color-manager: #388e3c;
+$color-manager-dark: #66bb6a;
+$color-socio: #1b5e20;
+$color-socio-dark: #4caf50;
+$color-facilitatore: #4a148c;
+$color-facilitatore-dark: #9c27b0;
+$color-collaboratore: #f57c00;
+$color-collaboratore-dark: #ffb74d;
+$color-editor: #6a1b9a;
+$color-editor-dark: #ab47bc;
+$color-commerciale: #e65100;
+$color-commerciale-dark: #ff9800;
+$color-grafico: #00796b;
+$color-grafico-dark: #26a69a;
+$color-doc: #42a5f5;
+$color-doc-dark: #64b5f6;
+
+// ==========================================
+// DEBUG CLASS
+// ==========================================
 .prova {
   color: red;
 }
 
+// ==========================================
+// BASE MENU STYLES
+// ==========================================
 .q-list-header {
   min-height: 12px;
   padding: 5px 8px;
 }
 
 .menu-hr {
-  border-color: #dedede;
+  border-color: $menu-border-color;
   height: 0.5px;
+
+  .body--dark & {
+    border-color: $menu-border-color-dark;
+  }
 }
 
 .list-label:first-child {
@@ -23,90 +75,266 @@
   margin: 1px;
 }
 
+// ==========================================
+// ROUTER LINK ACTIVE
+// ==========================================
 .router-link-active {
-  color: #027be3;
+  color: $menu-active-color;
-  background-color: #dadada !important;
+  background-color: $menu-active-bg !important;
-  border-right: 2px solid #027be3;
+  border-right: 2px solid $menu-active-color;
-}
+
-
+  .body--dark & {
-.router-link-active .item-primary {
+    color: $menu-active-color-dark;
-  color: #027be3;
+    background-color: $menu-active-bg-dark !important;
+    border-right-color: $menu-active-color-dark;
+  }
+
+  .item-primary {
+    color: $menu-active-color;
+
+    .body--dark & {
+      color: $menu-active-color-dark;
+    }
+  }
 }
 
+// ==========================================
+// MENU ARROW
+// ==========================================
 .menu_freccina {
   position: absolute;
   right: 10px;
   display: inline-block;
-  padding: 0 0 0 0;
+  padding: 0;
-  -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 
+// ==========================================
+// MENU SIZES
+// ==========================================
 .my-menu,
-.my-menu>i {
+.my-menu > i {
   min-height: 40px;
   min-width: 26px;
   font-size: 1rem;
 }
 
 .my-menu-small,
-.my-menu-small>i {
+.my-menu-small > i {
   min-height: 40px;
   min-width: 26px;
   font-size: 0.75rem;
 }
 
-.isAdmin {
-  color: red !important;
-}
-
-.isSocioResidente {
-  color: darkgreen;
-}
-
-.isCalendar {}
-
-.isManager {
-  color: green !important;
-}
-
-.isFacilitatore {
-  color: #201a80;
-}
-
-.onlyCollaboratore {
-  color: #bd7b10;
-}
-
 .my-menu-icon {
   min-width: 2px;
   font-size: 1rem;
+
+  > i {
+    min-width: 26px;
+    font-size: 1.25rem;
+  }
 }
 
-.my-menu-icon>i {
+.my-menu-separat > i {
-  min-width: 26px;
-  font-size: 1.25rem;
-}
-
-.clexpansion {
-  min-width: 0 !important;
-}
-
-.my-menu-active {
-  background-color: rgba(174, 189, 241, 0.71);
-}
-
-.my-menu-separat>i {
   min-width: 26px;
   font-size: 1rem;
 }
 
-.my-menu-icon-none>i {
+.my-menu-icon-none > i {
   display: none;
 }
 
-.clicon img,
+// ==========================================
-.clicon {
+// ROLE COLORS - Con Dark Mode
+// ==========================================
+.isAdmin {
+  color: $color-admin !important;
+  border-left: 3px solid $color-admin;
+  background: linear-gradient(90deg, rgba($color-admin, 0.08) 0%, rgba($color-admin, 0.02) 100%);
+
+  .body--dark & {
+    color: $color-admin-dark !important;
+    border-left-color: $color-admin-dark;
+    background: linear-gradient(90deg, rgba($color-admin-dark, 0.15) 0%, rgba($color-admin-dark, 0.05) 100%);
+  }
+
+  .q-avatar {
+    background: rgba($color-admin, 0.12) !important;
+
+    .q-icon {
+      color: $color-admin;
+    }
+
+    .body--dark & {
+      background: rgba($color-admin-dark, 0.2) !important;
+
+      .q-icon {
+        color: $color-admin-dark;
+      }
+    }
+  }
+
+  &:hover {
+    background: linear-gradient(90deg, rgba($color-admin, 0.12) 0%, rgba($color-admin, 0.04) 100%);
+
+    .body--dark & {
+      background: linear-gradient(90deg, rgba($color-admin-dark, 0.2) 0%, rgba($color-admin-dark, 0.08) 100%);
+    }
+  }
+}
+
+.isManager {
+  color: $color-manager !important;
+  border-left: 3px solid $color-manager;
+  background: linear-gradient(90deg, rgba($color-manager, 0.08) 0%, rgba($color-manager, 0.02) 100%);
+
+  .body--dark & {
+    color: $color-manager-dark !important;
+    border-left-color: $color-manager-dark;
+    background: linear-gradient(90deg, rgba($color-manager-dark, 0.15) 0%, rgba($color-manager-dark, 0.05) 100%);
+  }
+
+  .q-avatar {
+    background: rgba($color-manager, 0.12) !important;
+
+    .q-icon {
+      color: $color-manager;
+    }
+
+    .body--dark & {
+      background: rgba($color-manager-dark, 0.2) !important;
+
+      .q-icon {
+        color: $color-manager-dark;
+      }
+    }
+  }
+
+  &:hover {
+    background: linear-gradient(90deg, rgba($color-manager, 0.12) 0%, rgba($color-manager, 0.04) 100%);
+
+    .body--dark & {
+      background: linear-gradient(90deg, rgba($color-manager-dark, 0.2) 0%, rgba($color-manager-dark, 0.08) 100%);
+    }
+  }
+}
+
+.isSocioResidente {
+  color: $color-socio !important;
+
+  .body--dark & {
+    color: $color-socio-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-socio;
+
+    .body--dark & {
+      color: $color-socio-dark;
+    }
+  }
+}
+
+.isFacilitatore {
+  color: $color-facilitatore !important;
+
+  .body--dark & {
+    color: $color-facilitatore-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-facilitatore;
+
+    .body--dark & {
+      color: $color-facilitatore-dark;
+    }
+  }
+}
+
+.onlyCollaboratore {
+  color: $color-collaboratore !important;
+
+  .body--dark & {
+    color: $color-collaboratore-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-collaboratore;
+
+    .body--dark & {
+      color: $color-collaboratore-dark;
+    }
+  }
+}
+
+.isEditor {
+  color: $color-editor !important;
+
+  .body--dark & {
+    color: $color-editor-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-editor;
+
+    .body--dark & {
+      color: $color-editor-dark;
+    }
+  }
+}
+
+.isCommerciale {
+  color: $color-commerciale !important;
+
+  .body--dark & {
+    color: $color-commerciale-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-commerciale;
+
+    .body--dark & {
+      color: $color-commerciale-dark;
+    }
+  }
+}
+
+.isGrafico {
+  color: $color-grafico !important;
+
+  .body--dark & {
+    color: $color-grafico-dark !important;
+  }
+
+  .q-avatar .q-icon {
+    color: $color-grafico;
+
+    .body--dark & {
+      color: $color-grafico-dark;
+    }
+  }
+}
+
+.isDoc {
+  border-left: 3px solid $color-doc;
+  background: linear-gradient(90deg, rgba($color-doc, 0.08) 0%, rgba($color-doc, 0.02) 100%);
+
+  .body--dark & {
+    border-left-color: $color-doc-dark;
+    background: linear-gradient(90deg, rgba($color-doc-dark, 0.15) 0%, rgba($color-doc-dark, 0.05) 100%);
+  }
+}
+
+.isCalendar {
+  // Placeholder per eventuali stili calendario
+}
+
+// ==========================================
+// ICONS & AVATARS
+// ==========================================
+.clicon,
+.clicon img {
   font-size: 16px;
 }
 
@@ -114,100 +342,151 @@
   min-width: 30px;
 }
 
-.OLD_q-item__section--side {
-  padding-right: 8px;
-}
-
 .imgicon img {
   font-size: 2.5rem !important;
   border-radius: 8px;
 }
 
-/*
+.clexpansion {
-.menu-enter-active, .scale-enter {
+  min-width: 0 !important;
-    -webkit-animation: moveFromTopFade .5s ease both;
-    animation: moveFromTopFade .5s ease both;
 }
 
-.menu-leave-to, .scale-leave-active {
+// ==========================================
-    -webkit-animation: moveToBottom .5s ease both;
+// MENU ACTIVE STATE
-    animation: moveToBottom .5s ease both;
+// ==========================================
-}
+.my-menu-active {
-*/
+  background: linear-gradient(90deg, rgba($menu-active-color, 0.12) 0%, rgba($menu-active-color, 0.05) 100%) !important;
+  border-radius: 8px;
+  border-right: 3px solid $menu-active-color;
 
+  .body--dark & {
+    background: linear-gradient(90deg, rgba($menu-active-color-dark, 0.2) 0%, rgba($menu-active-color-dark, 0.08) 100%) !important;
+    border-right-color: $menu-active-color-dark;
+  }
+
+  span {
+    color: $menu-active-color;
+    font-weight: 600;
+
+    .body--dark & {
+      color: $menu-active-color-dark;
+    }
+  }
+
+  .q-avatar {
+    background: rgba($menu-active-color, 0.1) !important;
+
+    .body--dark & {
+      background: rgba($menu-active-color-dark, 0.2) !important;
+    }
+
+    .q-icon {
+      color: $menu-active-color;
+
+      .body--dark & {
+        color: $menu-active-color-dark;
+      }
+    }
+  }
+
+  &:hover {
+    background: linear-gradient(90deg, rgba($menu-active-color, 0.16) 0%, rgba($menu-active-color, 0.08) 100%) !important;
+
+    .body--dark & {
+      background: linear-gradient(90deg, rgba($menu-active-color-dark, 0.25) 0%, rgba($menu-active-color-dark, 0.12) 100%) !important;
+    }
+  }
+}
+
+// ==========================================
+// BIG MENU - Titoli grandi
+// ==========================================
 .bigmenu {
-  font-size: 1.25rem;
+  font-size: 1.2rem;
-  font-weight: bold;
+  font-weight: 700;
-  text-shadow: 0.0512rem 0.052rem .01rem #555;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  letter-spacing: -0.01em;
+
+  .body--dark & {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
 }
 
+// ==========================================
+// SUBTITLE
+// ==========================================
 .subtitle {
-  font-size: 0.85em;
+  font-size: 0.8rem;
-  color: #666;
+  color: $subtitle-color;
+  font-style: italic;
+  margin-top: 2px;
+  opacity: 0.85;
+  line-height: 1.3;
+
+  .body--dark & {
+    color: $subtitle-color-dark;
+  }
 }
 
 // ==========================================
-// MIGLIORAMENTI STILE RISO - AGGIUNTI
+// QUASAR COMPONENT OVERRIDES
 // ==========================================
 
-// ==========================================
+// Q-SEPARATOR
-// INDENTAZIONE LIVELLI - Più compatta
-// ==========================================
-[style*="paddingLeft"] {
-  transition: all 0.3s ease;
-}
-
-// ==========================================
-// Q-SEPARATOR - Divisore migliorato
-// ==========================================
 .q-separator {
-  background: linear-gradient(90deg, 
+  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
-    transparent 0%, 
-    rgba(0, 0, 0, 0.1) 50%, 
-    transparent 100%);
   margin: 6px 0;
   height: 1px;
+
+  .body--dark & {
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
+  }
 }
 
-// ==========================================
+// Q-EXPANSION-ITEM
-// Q-EXPANSION-ITEM - Espandibile migliorato
-// ==========================================
 .q-expansion-item {
   border-radius: 8px;
   margin-bottom: 2px;
   overflow: hidden;
-  
+
-  // Header dell'expansion
   > .q-item {
     border-radius: 8px;
     padding: 6px 10px;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    
+
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background: $menu-hover-bg;
       transform: translateX(2px);
+
+      .body--dark & {
+        background: $menu-hover-bg-dark;
+      }
     }
   }
-  
+
-  // Label header
   .q-item__label {
     font-size: 0.95rem;
     font-weight: 500;
   }
-  
+
-  // Icona expand/collapse
   .q-icon {
     transition: all 0.3s ease;
     font-size: 0.9rem;
-    color: rgba(0, 0, 0, 0.5);
+    color: $menu-icon-color;
-  }
-}
 
-// Quando espanso
+    .body--dark & {
-.q-expansion-item--expanded {
+      color: $menu-icon-color-dark;
-  > .q-item {
+    }
+  }
+
+  // Expanded state
+  &--expanded > .q-item {
     background: rgba(0, 0, 0, 0.02);
-    
+
+    .body--dark & {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
     .q-icon {
       color: var(--q-primary);
       transform: rotate(0deg);
@@ -215,52 +494,55 @@
   }
 }
 
-// ==========================================
+// Q-ITEM
-// Q-ITEM FOGLIA - Voce menu semplice
-// ==========================================
 .q-item {
   border-radius: 8px;
   padding: 6px 10px;
   margin-bottom: 2px;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   min-height: 42px;
-  
+
   &:hover {
-    background: rgba(0, 0, 0, 0.05);
+    background: $menu-hover-bg;
     transform: translateX(3px);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+    .body--dark & {
+      background: $menu-hover-bg-dark;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
   }
-  
+
   &:active {
     transform: translateX(1px);
   }
-  
+
-  // Sezione thumbnail con avatar
   .q-item__section--thumbnail {
     min-width: 36px;
     padding-right: 10px;
   }
-  
+
-  // Label principale
   > .q-item__section > span:not(.subtitle) {
     font-size: 0.95rem;
     font-weight: 500;
-    color: rgba(0, 0, 0, 0.87);
+    color: $menu-text-color;
+
+    .body--dark & {
+      color: $menu-text-color-dark;
+    }
   }
 }
 
-// ==========================================
+// Q-AVATAR
-// Q-AVATAR - Icone migliorate
-// ==========================================
 .q-avatar {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: transparent !important;
-  
+
   &.rounded {
     border-radius: 8px;
     overflow: hidden;
   }
-  
+
   .q-icon {
     font-size: 1.3rem;
     transition: all 0.3s ease;
@@ -269,212 +551,28 @@
 
 .q-item:hover .q-avatar {
   transform: scale(1.08);
-  
+
   .q-icon {
     transform: rotate(-5deg);
   }
 }
 
 // ==========================================
-// MY-MENU-ACTIVE - Stato attivo
+// INDENTATION TRANSITION
 // ==========================================
-.my-menu-active {
+[style*="paddingLeft"] {
-  background: linear-gradient(90deg, 
+  transition: all 0.3s ease;
-    rgba(2, 123, 227, 0.12) 0%, 
-    rgba(2, 123, 227, 0.05) 100%) !important;
-  border-radius: 8px;
-  border-right: 3px solid #027be3;
-  
-  span {
-    color: #027be3;
-    font-weight: 600;
-  }
-  
-  .q-avatar {
-    background: rgba(2, 123, 227, 0.1) !important;
-    
-    .q-icon {
-      color: #027be3;
-    }
-  }
-  
-  &:hover {
-    background: linear-gradient(90deg, 
-      rgba(2, 123, 227, 0.16) 0%, 
-      rgba(2, 123, 227, 0.08) 100%) !important;
-  }
 }
 
 // ==========================================
-// CLASSI PERMESSI - Badge colorati
+// EXTRA CLASSES
-// ==========================================
-.isAdmin {
-  color: #d32f2f !important;
-  border-left: 3px solid #d32f2f;
-  background: linear-gradient(90deg, 
-    rgba(211, 47, 47, 0.08) 0%, 
-    rgba(211, 47, 47, 0.02) 100%);
-  
-  .q-avatar {
-    background: rgba(211, 47, 47, 0.12) !important;
-    
-    .q-icon {
-      color: #d32f2f;
-    }
-  }
-  
-  &:hover {
-    background: linear-gradient(90deg, 
-      rgba(211, 47, 47, 0.12) 0%, 
-      rgba(211, 47, 47, 0.04) 100%);
-  }
-}
-
-.isManager {
-  color: #388e3c !important;
-  border-left: 3px solid #388e3c;
-  background: linear-gradient(90deg, 
-    rgba(56, 142, 60, 0.08) 0%, 
-    rgba(56, 142, 60, 0.02) 100%);
-  
-  .q-avatar {
-    background: rgba(56, 142, 60, 0.12) !important;
-    
-    .q-icon {
-      color: #388e3c;
-    }
-  }
-  
-  &:hover {
-    background: linear-gradient(90deg, 
-      rgba(56, 142, 60, 0.12) 0%, 
-      rgba(56, 142, 60, 0.04) 100%);
-  }
-}
-
-.isSocioResidente {
-  color: #1b5e20 !important;
-  
-  .q-avatar .q-icon {
-    color: #1b5e20;
-  }
-}
-
-.isFacilitatore {
-  color: #4a148c !important;
-  
-  .q-avatar .q-icon {
-    color: #4a148c;
-  }
-}
-
-.onlyCollaboratore {
-  color: #f57c00 !important;
-  
-  .q-avatar .q-icon {
-    color: #f57c00;
-  }
-}
-
-.isEditor {
-  color: #6a1b9a !important;
-  
-  .q-avatar .q-icon {
-    color: #6a1b9a;
-  }
-}
-
-.isCommerciale {
-  color: #e65100 !important;
-  
-  .q-avatar .q-icon {
-    color: #e65100;
-  }
-}
-
-.isGrafico {
-  color: #00796b !important;
-  
-  .q-avatar .q-icon {
-    color: #00796b;
-  }
-}
-
-.isDoc {
-  border-left: 3px solid #42a5f5;
-  background: linear-gradient(90deg, 
-    rgba(66, 165, 245, 0.08) 0%, 
-    rgba(66, 165, 245, 0.02) 100%);
-}
-
-// ==========================================
-// SUBTITLE - Testo secondario
-// ==========================================
-.subtitle {
-  font-size: 0.8rem;
-  color: #757575;
-  font-style: italic;
-  margin-top: 2px;
-  opacity: 0.85;
-  line-height: 1.3;
-}
-
-// ==========================================
-// BIGMENU - Titoli grandi
-// ==========================================
-.bigmenu {
-  font-size: 1.2rem;
-  font-weight: 700;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  letter-spacing: -0.01em;
-}
-
-// ==========================================
-// CLASSI EXTRA - Supporto customizzazioni
 // ==========================================
 .extraclass {
   // Placeholder per classi custom
 }
 
 // ==========================================
-// RESPONSIVE
+// ANIMATIONS
-// ==========================================
-@media screen and (max-width: 600px) {
-  .q-item {
-    padding: 5px 8px;
-    min-height: 40px;
-  }
-  
-  .q-expansion-item > .q-item {
-    padding: 5px 8px;
-  }
-  
-  .q-avatar {
-    width: 1.8rem !important;
-    height: 1.8rem !important;
-    font-size: 1.8rem !important;
-    
-    .q-icon {
-      font-size: 1.1rem;
-    }
-  }
-  
-  .q-item__section--thumbnail {
-    min-width: 32px;
-    padding-right: 8px;
-  }
-  
-  .bigmenu {
-    font-size: 1.1rem;
-  }
-  
-  .subtitle {
-    font-size: 0.75rem;
-  }
-}
-
-// ==========================================
-// ANIMAZIONI ENTRATA
 // ==========================================
 @keyframes fadeSlideIn {
   from {
@@ -493,11 +591,50 @@
 }
 
 // ==========================================
-// FOCUS ACCESSIBILITA
+// ACCESSIBILITY - Focus States
 // ==========================================
-.q-item:focus-visible,
+.q-item,
-.q-expansion-item:focus-visible {
+.q-expansion-item {
-  outline: 2px solid var(--q-primary);
+  &:focus-visible {
-  outline-offset: 2px;
+    outline: 2px solid var(--q-primary);
-  border-radius: 8px;
+    outline-offset: 2px;
+    border-radius: 8px;
+  }
+}
+
+// ==========================================
+// RESPONSIVE
+// ==========================================
+@media screen and (max-width: 600px) {
+  .q-item {
+    padding: 5px 8px;
+    min-height: 40px;
+  }
+
+  .q-expansion-item > .q-item {
+    padding: 5px 8px;
+  }
+
+  .q-avatar {
+    width: 1.8rem !important;
+    height: 1.8rem !important;
+    font-size: 1.8rem !important;
+
+    .q-icon {
+      font-size: 1.1rem;
+    }
+  }
+
+  .q-item__section--thumbnail {
+    min-width: 32px;
+    padding-right: 8px;
+  }
+
+  .bigmenu {
+    font-size: 1.1rem;
+  }
+
+  .subtitle {
+    font-size: 0.75rem;
+  }
 }

src/components/CMyUser/CMyUser.ts

@@ -17,7 +17,7 @@ import { useCircuitStore } from '@store/CircuitStore'
 export default defineComponent({
   name: 'CMyUser',
   components: { CSendCoins, CSaldo, CUserInfoAccount },
-  emits: ['setCmd', 'showInnerDialog'],
+  emits: ['setCmd', 'showInnerDialog', 'clickContact'],
   props: {
     mycontact: {
       type: Object as PropType<IUserFields | null>,
@@ -72,6 +72,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false,
+    },
+    enableContactClick: {
+      type: Boolean,
+      required: false,
+      default: false,
     }
   },
 
@@ -128,13 +133,17 @@ export default defineComponent({
       emit('showInnerDialog', showsendCoinTo.value)
     }
 
-    function clickToUser(username: string) {
+    function clickToUser(username: string, recuser: any) {
-      if (props.actionType === costanti.ACTIONTYPE.SEND_RIS)
+      if (props.enableContactClick) {
-        naviga(`/my/` + username + '?sr=0')
+        emit('clickContact', { username, recuser })
-      else if (props.actionType === costanti.ACTIONTYPE.LINK_REG)
+      } else {
-        naviga(`/registrati/` + username)
+        if (props.actionType === costanti.ACTIONTYPE.SEND_RIS)
-      else
+          naviga(`/my/` + username + '?sr=0')
-        naviga(`/my/` + username)
+        else if (props.actionType === costanti.ACTIONTYPE.LINK_REG)
+          naviga(`/registrati/` + username)
+        else
+          naviga(`/my/` + username)
+      }
     }
 
     onMounted(mounted)

src/components/CMyUser/CMyUser.vue

@@ -6,7 +6,7 @@
     >
       <q-item-section
         avatar
-        @click="clickToUser(contact.username)"
+        @click="clickToUser(contact.username, contact)"
       >
         <q-avatar size="60px">
           <q-img
@@ -18,7 +18,7 @@
         </q-avatar>
       </q-item-section>
 
-      <q-item-section @click="clickToUser(contact.username)">
+      <q-item-section @click="clickToUser(contact.username, contact)">
         <q-item-label v-if="labelextra && labelextra !== contact.username"
           ><strong>{{ labelextra }}</strong></q-item-label
         >

src/components/CSendCoins/CSendCoins.ts

@@ -362,9 +362,7 @@ export default defineComponent({
           }
         } finally {
           loading.value = false;
-          if (load) {
+          fine_caricamento();
-            fine_caricamento();
-          }
         }
       }
     }

src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss

@@ -1,8 +1,15 @@
-
 /* =========================================================
    RISO Home (parte finale) — refresh estetico coerente
    ========================================================= */
 
+$space-xs: 4px;
+$space-sm: 8px;
+$space-md: 12px;
+$space-lg: 16px;
+$space-xl: 20px;
+$space-xxl: 24px;
+
+
 .riso-modern-home {
   padding: $s-md;
   padding-bottom: calc(#{$s-md} + env(safe-area-inset-bottom));
@@ -28,6 +35,7 @@
 }
 
 :global(body.body--dark) {
+
   .content-section,
   .community-actions-section,
   .footer-section-modern {
@@ -82,10 +90,12 @@
   &::-webkit-scrollbar {
     height: 8px;
   }
+
   &::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.12);
     border-radius: 999px;
   }
+
   &::-webkit-scrollbar-track {
     background: transparent;
   }
@@ -373,3 +383,56 @@
     border: 1px solid rgba(255, 255, 255, 0.10);
   }
 }
+
+// ========================================
+// Community Actions Grid
+// ========================================
+.community-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $space-md;
+  margin-bottom: $space-lg;
+
+  // Mobile: colonna singola se necessario
+  @media (max-width: 400px) {
+    grid-template-columns: 1fr;
+    gap: $space-sm;
+  }
+}
+
+.community-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-sm;
+  padding: $space-md $space-lg;
+  min-height: 48px;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: none;
+  box-shadow: var(--cm-shadow-sm);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--cm-shadow-md);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  // Quasar icon spacing fix
+  :deep(.q-icon) {
+    margin-right: $space-xs;
+  }
+
+  // Dark mode adjustments
+  .body--dark & {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    }
+  }
+}

src/components/pageris/pageris.scss

@@ -998,15 +998,23 @@ $space-xxl: 24px;
 // ========================================
 // Send/Receive/Confirm Dialogs
 // ========================================
+// ========================================
+// Send/Receive/Confirm Dialogs - MODIFICATO
+// ========================================
 .send-dialog,
 .confirm-dialog {
   max-width: 500px;
   width: 100%;
   border-radius: $radius-xl;
   overflow: hidden;
+  display: flex;              // AGGIUNTO
+  flex-direction: column;     // AGGIUNTO
+  max-height: 100vh;          // AGGIUNTO
 
   @media (max-width: 599px) {
     max-width: 100%;
+    height: 100vh;            // AGGIUNTO
+    max-height: 100vh;        // AGGIUNTO
     border-radius: 0;
   }
 }
@@ -1017,6 +1025,7 @@ $space-xxl: 24px;
   align-items: center;
   padding: $space-lg $space-xl;
   color: white;
+  flex-shrink: 0;             // AGGIUNTO - impedisce compressione
 
   &.send {
     background: $gradient-send;
@@ -1037,32 +1046,41 @@ $space-xxl: 24px;
 
 .dialog-content {
   padding: $space-xl;
+  flex: 1;                    // AGGIUNTO - occupa spazio disponibile
+  overflow-y: auto;           // AGGIUNTO - abilita scroll
+  overflow-x: hidden;         // AGGIUNTO
+  
+  // AGGIUNTO - Scrollbar styling
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
 }
 
 .dialog-actions {
   padding: $space-md $space-xl $space-xl;
+  flex-shrink: 0;             // AGGIUNTO - impedisce compressione
+  border-top: 1px solid var(--cm-border);  // AGGIUNTO - separatore visivo
 }
 
-.info-banner {
+// ========================================
-  display: flex;
+// Contacts Section - MODIFICATO
-  gap: $space-md;
+// ========================================
-  align-items: flex-start;
-  padding: $space-md;
-  background: rgba(59, 130, 246, 0.1);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: $radius-md;
-  margin-bottom: $space-lg;
-
-  p {
-    margin: 0;
-    font-size: 13px;
-    color: #2563eb;
-  }
-}
-
-// Contacts
 .contacts-section {
   margin-bottom: $space-lg;
+  // Rimosso max-height - ora gestito dal parent
 
   .contacts-title {
     display: flex;
@@ -1074,14 +1092,45 @@ $space-xxl: 24px;
     letter-spacing: 0.5px;
     color: var(--cm-text-hint);
     margin-bottom: $space-md;
+    position: sticky;         // AGGIUNTO - titolo sticky
+    top: 0;                   // AGGIUNTO
+    background: var(--cm-bg-card);  // AGGIUNTO
+    padding: $space-sm 0;     // AGGIUNTO
+    z-index: 1;               // AGGIUNTO
   }
 }
 
 .contacts-scrollable {
-  max-height: 300px;
+  // Rimosso max-height e overflow - gestito dal parent .dialog-content
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: $space-sm;
 }
 
+// ========================================
+// Dark Mode per Scrollbar - AGGIUNTO
+// ========================================
+.body--dark {
+  .dialog-content {
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+
+  .contacts-section .contacts-title {
+    background: #1e293b;
+  }
+}
+
+
 .contact-item {
   display: flex;
   align-items: center;
@@ -2237,4 +2286,5 @@ $space-xxl: 24px;
       }
     }
   }
-}
+}
+

src/components/pageris/pageris.vue

@@ -999,6 +999,7 @@
       transition-hide="slide-down"
     >
       <q-card class="send-dialog">
+        <!-- HEADER FISSO -->
         <q-card-section class="dialog-header send">
           <div class="dialog-title">
             <q-icon
@@ -1017,123 +1018,151 @@
           />
         </q-card-section>
 
+        <!-- CONTENUTO SCROLLABILE -->
         <q-card-section class="dialog-content">
+          <!-- TOGGLE SELEZIONE VISTA CONTATTI -->
+          <q-btn-toggle
+            v-model="contactViewMode"
+            spread
+            no-caps
+            rounded
+            unelevated
+            toggle-color="primary"
+            color="grey-3"
+            text-color="grey-8"
+            class="contact-view-toggle q-mb-md"
+            :options="contactViewOptions"
+          />
+
+          <!-- CAMPO DI RICERCA -->
           <q-input
+            v-if="contactViewMode === 'recent'"
             v-model="sendSearch"
-            label="Cerca destinatario..."
+            :label="searchPlaceholder"
             outlined
             dense
             clearable
             class="search-input"
             @update:model-value="searchRecipients"
           >
-            <template v-slot:prepend>
+            <template #prepend>
               <q-icon name="search" />
             </template>
           </q-input>
 
-          <!-- Contatti recenti -->
+          <!-- VISTA: CONTATTI RECENTI -->
           <div
-            v-if="recentContacts.length && !sendSearch"
+            v-if="contactViewMode === 'recent'"
             class="contacts-section"
           >
-            <div class="contacts-title">
+            <!-- Lista contatti recenti -->
-              <q-icon
+            <template v-if="filteredRecentContacts.length">
-                name="history"
+              <div class="contacts-title">
-                size="16px"
-              />
-              <span>Usati di recente</span>
-            </div>
-            <div
-              v-for="contact in recentContacts"
-              :key="contact.username"
-              class="contact-item recent"
-              @click="selectRecipient(contact)"
-            >
-              <q-avatar
-                round
-                size="44px"
-              >
-                <img :src="userStore.getImgByProfile(contact)" />
-                <q-badge
-                  v-if="tools.isUserOnline(contact)"
-                  floating
-                  color="green"
-                  rounded
-                />
-              </q-avatar>
-              <div class="contact-info">
-                <div
-                  v-if="contact.name"
-                  class="contact-name"
-                >
-                  {{ contact.name }}
-                  <span v-if="contact.surname">{{ contact.surname }}</span>
-                </div>
-                <div class="contact-username">@{{ contact.username }}</div>
-              </div>
-              <q-icon
-                name="chevron_right"
-                size="20px"
-                color="grey-6"
-              />
-            </div>
-          </div>
-
-          <!-- Risultati ricerca -->
-          <div
-            v-if="sendSearch && filteredContacts.length"
-            class="contacts-section"
-          >
-            <div class="contacts-title">
-              <q-icon
-                name="people"
-                size="16px"
-              />
-              <span>Risultati ricerca</span>
-            </div>
-            <div class="contacts-scrollable">
-              <div
-                v-for="contact in filteredContacts"
-                :key="contact.id"
-                class="contact-item"
-                @click="selectRecipient(contact)"
-              >
-                <q-avatar
-                  size="44px"
-                  :color="contact.avatarColor"
-                  text-color="white"
-                >
-                  {{ contact.initials }}
-                </q-avatar>
-                <div class="contact-info">
-                  <div class="contact-name">{{ contact.name }}</div>
-                  <div class="contact-username">@{{ contact.username }}</div>
-                </div>
                 <q-icon
-                  name="chevron_right"
+                  name="history"
-                  size="20px"
+                  size="16px"
-                  color="grey-6"
+                />
+                <span>Usati di recente</span>
+                <q-badge
+                  color="primary"
+                  :label="filteredRecentContacts.length"
+                  class="q-ml-sm"
                 />
               </div>
+
+              <div class="contacts-scrollable">
+                <div
+                  v-for="contact in filteredRecentContacts"
+                  :key="contact.username"
+                  class="contact-item recent"
+                  @click="selectRecipient(contact)"
+                >
+                  <q-avatar
+                    round
+                    size="44px"
+                  >
+                    <img :src="userStore.getImgByProfile(contact)" />
+                    <q-badge
+                      v-if="tools.isUserOnline(contact)"
+                      floating
+                      color="green"
+                      rounded
+                    />
+                  </q-avatar>
+                  <div class="contact-info">
+                    <div
+                      v-if="contact.name"
+                      class="contact-name"
+                    >
+                      {{ contact.name }}
+                      <span v-if="contact.surname">{{ contact.surname }}</span>
+                    </div>
+                    <div class="contact-username">@{{ contact.username }}</div>
+                  </div>
+                  <q-icon
+                    name="chevron_right"
+                    size="20px"
+                    color="grey-6"
+                  />
+                </div>
+              </div>
+            </template>
+
+            <!-- Nessun contatto recente -->
+            <div
+              v-else
+              class="no-results"
+            >
+              <q-icon
+                :name="sendSearch ? 'search_off' : 'history'"
+                size="56px"
+                color="grey-5"
+              />
+              <p>
+                {{
+                  sendSearch
+                    ? 'Nessun contatto recente trovato'
+                    : 'Nessun contatto recente'
+                }}
+              </p>
+              <q-btn
+                v-if="!sendSearch"
+                flat
+                color="primary"
+                label="Cerca in tutti i contatti"
+                icon="people"
+                no-caps
+                @click="contactViewMode = 'all'"
+              />
             </div>
           </div>
 
+          <!-- VISTA: TUTTI I CONTATTI -->
           <div
-            v-if="sendSearch && !filteredContacts.length"
+            v-else-if="contactViewMode === 'all'"
-            class="no-results"
+            class="contacts-section"
           >
-            <q-icon
+            <CTitleBanner
-              name="search_off"
+              class="q-pa-xs"
-              size="56px"
+              :title="$t('circuit.sendcoins')"
-              color="grey-5"
+              bgcolor="white"
-            />
+              bgcolor2="lightblue"
-            <p>Nessun contatto trovato</p>
+              clcolor="text-indigo"
+              :canopen="true"
+              :small="true"
+              :open="true"
+            >
+              <CFindUsers
+                v-show="contactViewMode === 'all'"
+                :actionType="costanti.ACTIONTYPE.SEND_RIS"
+                :enableContactClick="true"
+                @clickContact="clickContact"
+              />
+            </CTitleBanner>
           </div>
         </q-card-section>
       </q-card>
     </q-dialog>
-
     <CSendCoins
       v-if="showReceiveDialog"
       mode="receive"
@@ -1238,6 +1267,7 @@ import { CRISBalanceBar } from '@/components/CRISBalanceBar';
 import { CSingleMovement } from '@/components/CSingleMovement';
 import { CSendCoins } from '@/components/CSendCoins';
 import { CTitleBanner } from '@/components/CTitleBanner';
+import { CFindUsers } from '@/components/CFindUsers';
 import { CQRCode } from '@/components/CQRCode';
 import { CCopyBtnSmall } from '@/components/CCopyBtnSmall';
 import { CFinder } from '@/components/CFinder';
@@ -1272,6 +1302,61 @@ const exploreSearch = ref('');
 // Transactions
 const allTransactions = ref<IMovVisu[]>([]);
 
+// ============================================
+// STATE
+// ============================================
+const contactViewMode = ref('recent'); // 'recent' | 'all'
+const sendSearch = ref('');
+
+// ============================================
+// COMPUTED
+// ============================================
+
+// Opzioni per il toggle
+const contactViewOptions = computed(() => [
+  {
+    label: 'Recenti',
+    value: 'recent',
+    icon: 'history',
+    slot: 'recent',
+  },
+  {
+    label: 'Tutti',
+    value: 'all',
+    icon: 'people',
+    slot: 'all',
+  },
+]);
+
+// Placeholder dinamico per la ricerca
+const searchPlaceholder = computed(() => {
+  return contactViewMode.value === 'recent'
+    ? 'Cerca nei contatti recenti...'
+    : 'Cerca in tutti i contatti...';
+});
+
+// Contatti recenti filtrati
+const filteredRecentContacts = computed(() => {
+  if (!sendSearch.value) {
+    return recentContacts.value;
+  }
+
+  const search = sendSearch.value.toLowerCase().trim();
+
+  return recentContacts.value.filter((contact) => {
+    const name = contact.name?.toLowerCase() || '';
+    const surname = contact.surname?.toLowerCase() || '';
+    const username = contact.username?.toLowerCase() || '';
+
+    return (
+      name.includes(search) ||
+      surname.includes(search) ||
+      username.includes(search) ||
+      `${name} ${surname}`.includes(search)
+    );
+  });
+});
+
 function configureShowcase() {
   // Naviga alla configurazione vetrina
   closeReceiveDialog();
@@ -1400,7 +1485,6 @@ const showConfirmSendDialog = ref(false);
 const showConfirmReceiveDialog = ref(false);
 
 // Send states
-const sendSearch = ref('');
 const selectedRecipient = ref<any>(null);
 
 const filteredContacts = computed(() => {
@@ -1694,8 +1778,8 @@ const getOtherUserUsername = computed(() => {
   if (!selectedMov.value) return '';
   // Adatta in base alla tua struttura dati
   return isSelectedMovSent.value
-    ? selectedMov.value.to_username || getOtherUserName.value
+    ? selectedMov.value.userto.username || getOtherUserName.value
-    : selectedMov.value.from_username || getOtherUserName.value;
+    : selectedMov.value.userfrom.username || getOtherUserName.value;
 });
 
 const getOtherUserAvatar = computed(() => {
@@ -1744,6 +1828,15 @@ const openPresentazione = () => {
 const openGuidaRIS = () => {
   $router.push('/faq_ris');
 };
+
+const clickContact = (data: any) => {
+  const recuser = data.recuser;
+  if (recuser) {
+    selectRecipient(recuser);
+
+  }
+
+};
 </script>
 
 <style lang="scss" scoped>