- aggiornamenti guida RIS, FAQ

- Editor HTML aggiunto CSS e Script
- Statistiche
- CRISBalanceBar
- Inizio Sync... (ma disattivato)

src/components/Riso_Home_Modern/Riso_Home_Modern.scss

@@ -227,10 +227,18 @@ $gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
   margin-bottom: $s-lg;
 }
 
+.avviso-card {
+  background: $gradient-orange;
+  border-radius: $r-md;
+  padding: $s-md;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+  color: white;
+}
+
 .wallet-card {
   background: $gradient-primary;
-  border-radius: $r-lg;
-  padding: $s-lg;
+  border-radius: $r-md;
+  padding: $s-md;
   color: white;
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
 
@@ -832,13 +840,13 @@ $gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
   }
 
   .dialog-content {
-    padding: $s-lg;
+    padding: $s-md;
   }
 
   .annunci-options-mobile {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: $s-md;
+    gap: $s-sm;
   }
 
   .annuncio-option {
@@ -846,7 +854,7 @@ $gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
     flex-direction: column;
     align-items: center;
     gap: $s-sm;
-    padding: $s-lg;
+    padding: $s-md;
     border-radius: $r-lg;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -886,14 +894,14 @@ $gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
     }
 
     .option-title {
-      font-size: 1.1rem;
+      font-size: 1.5rem;
       font-weight: 700;
       text-align: center;
       line-height: 1.2;
     }
 
     .option-subtitle {
-      font-size: 0.9rem;
+      font-size: 1rem;
       opacity: 0.9;
       text-align: center;
       line-height: 1.3;
@@ -926,11 +934,11 @@ $gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
       }
 
       .option-title {
-        font-size: 1rem;
+        font-size: 1.3rem;
       }
 
       .option-subtitle {
-        font-size: 0.7rem;
+        font-size: 0.9rem;
       }
     }
   }
@@ -1284,6 +1292,24 @@ section {
 .circuit-selector {
   margin-bottom: $s-lg;
 
+  .selector-label {
+    display: flex;
+    align-items: center;
+    gap: $s-xs;
+    margin-bottom: $s-sm;
+
+    .selector-emoji {
+      font-size: 1.2rem;
+      animation: pointRight 1.5s ease-in-out infinite;
+    }
+
+    .selector-text {
+      font-size: 0.85rem;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+  }
+
   .circuit-toggle {
     width: 100%;
 
@@ -1299,6 +1325,19 @@ section {
   }
 }
 
+// Animazione puntamento
+@keyframes pointRight {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(4px);
+  }
+}
+
 // Overview saldi circuiti
 .circuits-balance-overview {
   display: grid;
@@ -1492,4 +1531,42 @@ section {
     position: absolute;
     left: 16px;
   }
+}
+
+.close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: rgba(255, 255, 255, 0.7);
+
+  &:hover {
+    color: white;
+  }
+}
+
+// Header transazioni con toggle
+.transactions-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $s-md;
+
+  .transactions-title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    opacity: 0.95;
+  }
+}
+
+// Transazioni community con 2 avatar
+.transaction-users {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.transaction-amount.community {
+  color: #a78bfa; // Viola per transazioni community
+  font-weight: 700;
 }

src/components/Riso_Home_Modern/Riso_Home_Modern.ts

@@ -1,6 +1,8 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { CRISBalanceBar } from '@src/components/CRISBalanceBar';
+import { tools } from '@tools';
+import { useUserStore } from 'app/src/store';
 
 const isTest = true; // Cambia a false in produzione
 
@@ -12,10 +14,16 @@ export default defineComponent({
 
     // State
     const showAnnunciDialog = ref(false);
+    const showBannScambio = ref(true);
 
     const selectedCircuit = ref<'provinciale' | 'italia'>('provinciale');
     const handshakesView = ref<'mine' | 'all'>('mine');
 
+    const transactionsView = ref<'mine' | 'all'>('mine');
+
+    // Transazioni globali community
+    const allTransactions = ref<any[]>([]);
+
     // Dati wallet (da collegare allo store)
     const availableBalance = ref(0); // Saldo utilizzabile (include fido)
     const realBalance = ref(0); // Saldo reale effettivo
@@ -51,6 +59,8 @@ export default defineComponent({
     const uniqueMembers = ref(0);
     const lastTradeTime = ref('Mai');
 
+    const userStore = useUserStore()
+
     // Organizzazioni
     const organizations = ref<any[]>([
       // Esempio struttura:
@@ -73,26 +83,22 @@ export default defineComponent({
     // Dialog Annunci
     const openAnnunciDialog = () => {
       showAnnunciDialog.value = true;
-      // TODO: implementare logica apertura dialog
     };
 
     // Navigazione Annunci
     const goToGoods = () => {
       showAnnunciDialog.value = false;
-      // TODO: navigare a /goods
-      // $router.push('/goods')
+      $router.push('/goods')
     };
 
     const goToServices = () => {
       showAnnunciDialog.value = false;
-      // TODO: navigare a /services
-      // $router.push('/services')
+      $router.push('/services')
     };
 
     const goToHospitality = () => {
       showAnnunciDialog.value = false;
-      // TODO: navigare a /hosps
-      // $router.push('/hosps')
+      $router.push('/hosps')
     };
 
     const goToTransport = () => {
@@ -109,17 +115,17 @@ export default defineComponent({
 
     const goToCircuits = () => {
       // TODO: navigare ai circuiti RIS
-      // $router.push('/circuits')
+      $router.push('/circuits')
     };
 
     const goToEvents = () => {
       // TODO: navigare alla lista eventi
-      // $router.push('/events')
+      $router.push('/events')
     };
 
     const goToProfile = () => {
       // TODO: navigare al profilo utente
-      // $router.push('/profile')
+      $router.push('/my/' + userStore.my.username)
     };
 
     // Azioni Rapide
@@ -153,7 +159,7 @@ export default defineComponent({
     // Eventi
     const goToAllEvents = () => {
       // TODO: navigare a tutti gli eventi
-      // $router.push('/events')
+      $router.push('/events')
     };
 
     const openEvent = (event: any) => {
@@ -192,18 +198,18 @@ export default defineComponent({
 
     const goToAllOrganizations = () => {
       // TODO: navigare a lista completa organizzazioni
-      // $router.push('/groups')
+      $router.push('/groups')
     };
 
     // Footer
     const openFAQ = () => {
       // TODO: navigare a FAQ
-      // $router.push('/faq')
+      $router.push('/faq_ris')
     };
 
     const openGuide = () => {
       // TODO: navigare a guida
-      // $router.push('/guide')
+      $router.push('/guida')
     };
 
     const openInfo = () => {
@@ -277,6 +283,33 @@ export default defineComponent({
         ],
       };
 
+      // Transazioni community (tutti)
+      allTransactions.value = [
+        {
+          fromInitial: 'M',
+          toInitial: 'L',
+          fromName: 'Mario',
+          toName: 'Laura',
+          amount: 25,
+          time: '1h fa',
+        },
+        {
+          fromInitial: 'G',
+          toInitial: 'C',
+          fromName: 'Giovanni',
+          toName: 'Chiara',
+          amount: 40,
+          time: '2h fa',
+        },
+        {
+          fromInitial: 'P',
+          toInitial: 'A',
+          fromName: 'Paolo',
+          toName: 'Anna',
+          amount: 15,
+          time: '3h fa',
+        },
+      ];
       // Community
       invitesSent.value = 7;
 
@@ -504,15 +537,16 @@ export default defineComponent({
 
     loadTestData();
 
-    // ========== LIFECYCLE (da implementare) ==========
-    // onMounted(() => {
-    //   loadWalletData()
-    //   loadRecentEvents()
-    //   loadRecentActivity()
-    //   loadStats()
-    //   loadOrganizations()
-    //   loadTelegramLinks()
-    // })
+    onMounted(() => {
+      showBannScambio.value = tools.getCookieBool('bann_scambio', true);
+
+      //   loadWalletData()
+      //   loadRecentEvents()
+      //   loadRecentActivity()
+      //   loadStats()
+      //   loadOrganizations()
+      //   loadTelegramLinks()
+    });
 
     return {
       // State
@@ -583,6 +617,11 @@ export default defineComponent({
       openTransaction,
       openHandshake,
       goToAllCircuits,
+      showBannScambio,
+      tools,
+      transactionsView,
+      allTransactions,
+      userStore,
     };
   },
 });

src/components/Riso_Home_Modern/Riso_Home_Modern.vue

@@ -50,8 +50,8 @@
           name="account_circle"
           size="2.5rem"
         />
-        <span class="card-title">Profilo</span>
-        <span class="card-subtitle">Gestisci account</span>
+        <span class="card-title">Il mio Profilo</span>
+        <span class="card-subtitle text-italic">({{ userStore.my.username }})</span>
       </div>
     </section>
 
@@ -83,7 +83,7 @@
         <div class="wallet-header">
           <h2 class="section-title-white">
             <q-icon name="fas fa-coins" />
-            I Tuoi RIS - Circuiti di Scambio
+            I Tuoi Scambi in RIS
           </h2>
           <q-btn
             flat
@@ -103,6 +103,7 @@
               :min-limit="circuits.provinciale.trustLimit"
               :max-limit="circuits.provinciale.maxAccumulation"
               :label="circuits.provinciale.title"
+              small
             />
           </div>
           <div class="circuit-balance-mini">
@@ -111,12 +112,17 @@
               :min-limit="circuits.italia.trustLimit"
               :max-limit="circuits.italia.maxAccumulation"
               :label="circuits.italia.title"
+              small
             />
           </div>
         </div>
 
         <!-- Selettore Circuito -->
         <div class="circuit-selector">
+          <div class="selector-label">
+            <span class="selector-emoji">👉🏻</span>
+            <span class="selector-text">Seleziona il Circuito</span>
+          </div>
           <q-btn-toggle
             v-model="selectedCircuit"
             dense
@@ -143,6 +149,14 @@
             <span class="stat-number">{{ currentCircuitData.totalTransactions }}</span>
             <span class="stat-label">Transazioni</span>
           </div>
+          <div class="transaction-stat members">
+            <q-icon
+              name="people"
+              size="sm"
+            />
+            <span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
+            <span class="stat-label">Membri coinvolti</span>
+          </div>
           <div class="transaction-stat sent">
             <q-icon
               name="arrow_upward"
@@ -159,25 +173,10 @@
             <span class="stat-number">{{ currentCircuitData.receivedCount }}</span>
             <span class="stat-label">Ricevute</span>
           </div>
-          <div class="transaction-stat members">
-            <q-icon
-              name="people"
-              size="sm"
-            />
-            <span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
-            <span class="stat-label">Membri coinvolti</span>
-          </div>
         </div>
 
         <!-- Saldi compatti circuito selezionato -->
         <div class="wallet-balances-compact">
-          <div class="balance-row">
-            <span class="balance-label-compact">Saldo:</span>
-            <span class="balance-value-compact"
-              >{{ currentCircuitData.realBalance }} RIS</span
-            >
-          </div>
-
           <CRISBalanceBar
             :current-balance="currentCircuitData.realBalance"
             :min-limit="currentCircuitData.trustLimit"
@@ -187,9 +186,31 @@
         </div>
 
         <!-- Ultime 3 transazioni del circuito selezionato -->
+        <!-- SOSTITUISCI la sezione recent-transactions -->
+
         <div class="recent-transactions">
-          <h4 class="transactions-title">Ultime Tue Transazioni</h4>
-          <div class="transaction-list">
+          <div class="transactions-header">
+            <h4 class="transactions-title">Ultimi Scambi</h4>
+            <q-btn-toggle
+              v-model="transactionsView"
+              dense
+              no-caps
+              unelevated
+              rounded
+              size="md"
+              toggle-color="primary"
+              :options="[
+                { label: 'Personali', value: 'mine' },
+                { label: 'Della Community', value: 'all' },
+              ]"
+            />
+          </div>
+
+          <!-- Tue Transazioni -->
+          <div
+            v-if="transactionsView === 'mine'"
+            class="transaction-list"
+          >
             <div
               v-for="(tx, idx) in currentCircuitData.recentTransactions.slice(0, 3)"
               :key="idx"
@@ -214,27 +235,51 @@
               </span>
             </div>
           </div>
+
+          <!-- Transazioni Community -->
+          <div
+            v-if="transactionsView === 'all'"
+            class="transaction-list"
+          >
+            <div
+              v-for="(tx, idx) in allTransactions.slice(0, 3)"
+              :key="idx"
+              class="transaction-item"
+              @click="openTransaction(tx)"
+            >
+              <div class="transaction-users">
+                <q-avatar
+                  size="28px"
+                  color="primary"
+                  text-color="white"
+                >
+                  {{ tx.fromInitial }}
+                </q-avatar>
+                <q-icon
+                  name="arrow_forward"
+                  size="xs"
+                  color="grey-6"
+                />
+                <q-avatar
+                  size="28px"
+                  color="secondary"
+                  text-color="white"
+                >
+                  {{ tx.toInitial }}
+                </q-avatar>
+              </div>
+              <div class="transaction-content">
+                <span class="transaction-desc">{{ tx.fromName }} → {{ tx.toName }}</span>
+                <span class="transaction-time">{{ tx.time }}</span>
+              </div>
+              <span class="transaction-amount community">
+                {{ tx.amount > 0 ? '+' : '' }}{{ tx.amount }}
+              </span>
+            </div>
+          </div>
         </div>
 
         <!-- Focus su attività di scambio -->
-        <div class="wallet-activity-focus">
-          <div class="activity-message">
-            <q-icon
-              name="swap_horiz"
-              size="lg"
-            />
-            <span class="activity-text"
-              >Continua a scambiare con più persone per far crescere la comunità!</span
-            >
-          </div>
-          <div class="last-trade">
-            <q-icon
-              name="schedule"
-              size="sm"
-            />
-            <span>Ultimo scambio: {{ currentCircuitData.lastTradeTime }}</span>
-          </div>
-        </div>
         <q-btn
           unelevated
           rounded
@@ -244,6 +289,34 @@
           @click="goToTransactions"
         />
       </div>
+      <div
+        v-if="showBannScambio"
+        class="avviso-card"
+      >
+        <div class="wallet-activity-focus">
+          <q-btn
+            flat
+            dense
+            round
+            icon="close"
+            class="close-btn"
+            @click="
+              showBannScambio = false;
+              tools.setCookie('bann_scambio', '0');
+            "
+          />
+          <div class="activity-message">
+            <q-icon
+              name="people_outline"
+              size="lg"
+            />
+            <span class="activity-text"
+              >Continua a scambiare con più persone per far crescere la tua
+              comunità!</span
+            >
+          </div>
+        </div>
+      </div>
     </section>
     <!-- Prossimi Eventi -->
     <section
@@ -300,6 +373,87 @@
       </div>
     </section>
 
+    <!-- Organizzazioni -->
+    <section
+      v-if="hasOrganizations"
+      class="content-section"
+    >
+      <div class="section-header">
+        <h2 class="section-title">
+          <q-icon name="fas fa-users" />
+          Organizzazioni
+        </h2>
+        <q-btn
+          flat
+          dense
+          round
+          icon="arrow_forward"
+          @click="goToAllOrganizations"
+        />
+      </div>
+
+      <div class="org-scroll">
+        <div
+          v-for="(org, idx) in organizations.slice(0, 10)"
+          :key="idx"
+          class="org-card-scroll"
+          @click="openOrganization(org)"
+        >
+          <q-avatar
+            size="50px"
+            color="blue-6"
+            text-color="white"
+          >
+            {{ org.initial }}
+          </q-avatar>
+          <span class="org-name">{{ org.name }}</span>
+          <span class="org-members">{{ org.membersCount }} membri</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Circuiti RIS Overview -->
+    <!--<section class="circuits-overview-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <q-icon name="account_balance" />
+          Circuiti RIS
+        </h2>
+      </div>
+
+      <div class="circuits-cards">
+        <div class="circuit-info-card">
+          <q-icon
+            name="check_circle"
+            color="positive"
+            size="lg"
+          />
+          <span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
+          <span class="circuit-stat-label">Circuiti Attivi</span>
+        </div>
+        <div class="circuit-info-card">
+          <q-icon
+            name="public"
+            color="primary"
+            size="lg"
+          />
+          <span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
+          <span class="circuit-stat-label">Circuiti Disponibili</span>
+        </div>
+      </div>
+
+      <q-btn
+        unelevated
+        rounded
+        class="view-all-btn"
+        label="Esplora tutti i Circuiti"
+        icon-right="arrow_forward"
+        color="primary"
+        @click="goToAllCircuits"
+      />
+    </section>
+    -->
+
     <!-- Community Actions -->
     <section class="community-actions-section">
       <h2 class="section-title">
@@ -348,126 +502,9 @@
       </div>
     </section>
 
-    <!-- Organizzazioni -->
-    <section
-      v-if="hasOrganizations"
-      class="content-section"
-    >
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="fas fa-users" />
-          Organizzazioni
-        </h2>
-        <q-btn
-          flat
-          dense
-          round
-          icon="arrow_forward"
-          @click="goToAllOrganizations"
-        />
-      </div>
 
-      <div class="org-scroll">
-        <div
-          v-for="(org, idx) in organizations.slice(0, 10)"
-          :key="idx"
-          class="org-card-scroll"
-          @click="openOrganization(org)"
-        >
-          <q-avatar
-            size="50px"
-            color="blue-6"
-            text-color="white"
-          >
-            {{ org.initial }}
-          </q-avatar>
-          <span class="org-name">{{ org.name }}</span>
-          <span class="org-members">{{ org.membersCount }} membri</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- Statistiche Generali -->
-    <section class="stats-section">
-      <h2 class="section-title-center">
-        <q-icon name="analytics" />
-        Statistiche RISO
-      </h2>
-      <div class="stats-grid">
-        <div class="stat-card">
-          <q-icon
-            name="people"
-            color="primary"
-            size="lg"
-          />
-          <span class="stat-number">{{ totalMembers }}</span>
-          <span class="stat-text">Membri</span>
-        </div>
-        <div class="stat-card">
-          <q-icon
-            name="swap_horiz"
-            color="positive"
-            size="lg"
-          />
-          <span class="stat-number">{{ totalTrades }}</span>
-          <span class="stat-text">Scambi</span>
-        </div>
-        <div class="stat-card">
-          <q-icon
-            name="event"
-            color="accent"
-            size="lg"
-          />
-          <span class="stat-number">{{ totalEvents }}</span>
-          <span class="stat-text">Eventi</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- Circuiti RIS Overview -->
-    <section class="circuits-overview-section">
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="account_balance" />
-          Circuiti RIS
-        </h2>
-      </div>
-
-      <div class="circuits-cards">
-        <div class="circuit-info-card">
-          <q-icon
-            name="check_circle"
-            color="positive"
-            size="lg"
-          />
-          <span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
-          <span class="circuit-stat-label">Circuiti Attivi</span>
-        </div>
-        <div class="circuit-info-card">
-          <q-icon
-            name="public"
-            color="primary"
-            size="lg"
-          />
-          <span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
-          <span class="circuit-stat-label">Circuiti Disponibili</span>
-        </div>
-      </div>
-
-      <q-btn
-        unelevated
-        rounded
-        class="view-all-btn"
-        label="Esplora tutti i Circuiti"
-        icon-right="arrow_forward"
-        color="primary"
-        @click="goToAllCircuits"
-      />
-    </section>
-
-    <!-- Attività Community -->
+    <!-- Attività Community
     <section class="community-section">
-      <!-- Strette di Mano -->
       <div class="community-card">
         <div class="community-header">
           <h3 class="community-title">
@@ -557,9 +594,10 @@
           </div>
         </div>
       </div>
+      -->
 
       <!-- Ultimi Scambi -->
-      <div class="community-card">
+      <!--<div class="community-card">
         <div class="community-header">
           <h3 class="community-title">
             <q-icon name="swap_horiz" />
@@ -599,10 +637,10 @@
           </div>
         </div>
       </div>
-    </section>
+    </section>-->
 
     <!-- Canali Telegram -->
-    <section
+    <!--<section
       v-if="hasTelegramLinks"
       class="content-section"
     >
@@ -655,6 +693,7 @@
         </a>
       </div>
     </section>
+    -->
 
     <!-- Footer Links -->
     <section class="footer-section-modern">
@@ -745,7 +784,6 @@
 
             <div
               class="annuncio-option gradient-teal"
-              @click="goToTransport"
             >
               <q-icon
                 name="directions_car"
@@ -753,6 +791,7 @@
               />
               <span class="option-title">Trasporti</span>
               <span class="option-subtitle">Condivisione viaggi</span>
+              <span class="option-subtitle">⚠️ (IN ARRIVO...)</span>
             </div>
           </div>
         </q-card-section>