- Griglia Orizzontale a Carosello

- Aggiornato Tabella Eventi - Lista Ultimi Movimenti - Ultime strette di mano - Ultimi Invitanti alla App
2024-10-17 00:35:29 +02:00
parent ec356c70d9
commit eb2cadb490
32 changed files with 2107 additions and 490 deletions
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
    "jest": "^29.7.0",
    "json-loader": "^0.5.7",
    "node-sass": "^9.0.0",
+    "nodemon": "^3.1.7",
    "npm-check-updates": "^17.1.3",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "parcel": "^2.12.0",
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -167,6 +167,7 @@ export const shared_consts = {
    MAPPACOMUNI: 370,
    MAPPAGETCOORDINATE: 380,
    EDITADDRESSBYCOORD: 390,
+    GRID_ORIZ: 400,
  },

  QUERYTYPE_MYGROUP: 1,
@@ -310,8 +311,8 @@ export const shared_consts = {
  TABLES_WITH_SORTING: ['mybachecas', 'myhosps'],
  TABLES_REC_ID: ['skills', 'goods', 'subskills', 'myskills', 'mybachecas', 'myhosps', 'mygoods'],

-  // costanti.VISUTABLE_SCHEDA_USER, VISUTABLE_SCHEDA_GROUP, VISUTABLE_USER_TABGROUP, VISUTABLE_USER_TABCIRCUIT, VISUTABLE_GROUP_CIRCUIT
-  VERTIC_SHOW_GRID: [-1, 2, -3, -4, -5, -6],
+  // costanti.VISUTABLE_SCHEDA_USER, VISUTABLE_SCHEDA_GROUP, VISUTABLE_USER_TABGROUP, VISUTABLE_USER_TABCIRCUIT, VISUTABLE_GROUP_CIRCUIT, VISUTABLE_
+  VERTIC_SHOW_GRID: [-1, 2, -3, -4, -5, -6, -10],

  TABLES_UPDATE_LASTIFIED: ['myskills', 'mybachecas', 'myhosps', 'mygoods', 'bots'],
  TABLES_FINDER: ['myskills', 'mybachecas', 'myhosps', 'mygoods', 'mygroups'],
@@ -1668,6 +1669,10 @@ export const shared_consts = {
      value: 280,
      label: 'Tutorial',
    },
+    {
+      value: 400,
+      label: 'Griglia Tabelle',
+    },
  ],

  TypesElemAdminTools: [
--- a/src/components/CGridOriz/CGridOriz.scss
+++ b/src/components/CGridOriz/CGridOriz.scss
@@ -0,0 +1,29 @@
+
+.cltitlebg{
+
+}
+
+.titletext {
+  color: white;
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 3rem;
+  text-shadow: .25rem .25rem .5rem black;
+  letter-spacing: .00937em;
+  opacity: 0.9;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .titletext {
+    color: white;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 2rem;
+    text-shadow: .25rem .25rem .5rem black;
+  }
+}
+
+.q-img__content > div{
+  background: rgba(0,0,0,0.17) !important;
+}
--- a/src/components/CGridOriz/CGridOriz.ts
+++ b/src/components/CGridOriz/CGridOriz.ts
--- a/src/components/CGridOriz/CGridOriz.vue
+++ b/src/components/CGridOriz/CGridOriz.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="q-ma-xs">
+    <CGridTableRec
+      ref="myGridRef"
+      v-if="searchList.length > 0 && table"
+      :prop_mytable="table"
+      :options="tools.optionsTable(table)"
+      :prop_mytitlenew="tools.getTitleAnnuncio(table)"
+      prop_mytitle=""
+      :prop_mycolumns="col"
+      :prop_colkey="prop_colkey"
+      :col_title="col_title"
+      :col_footer="col_footer"
+      :col_tabfooter="col_tabfooter"
+      :vertical="tipovisu"
+      :prop_pagination="mypagination"
+      :showType="showType"
+      :hint="hint"
+      :nodataLabel="noMsgRecord"
+      :prop_search="prop_search"
+      :finder="true"
+      labelElemFind="trovati"
+      :choose_visutype="visuType"
+      :butt_modif_new="false"
+      :noresultLabel="
+        t('grid.nosearchfound') + ' ' + (showMap ? t('grid.intheareamap') : '')
+      "
+      :arrfilters="arrfilterand"
+      :filtercustom="filtercustom"
+      :prop_searchList="searchList"
+      labelBtnAddRow="NONE"
+      :prop_SortFieldsAvailable="mySortFieldsAvailable"
+      labelBtnAddExtra=""
+      :extraparams="tools.extraparams(table, { myrecfiltertoggle })"
+      :prop_showMap="showMap"
+      @clickButtBar="clickButtBar"
+    >
+    </CGridTableRec>
+  </div>
+</template>
+
+<script lang="ts" src="./CGridOriz.ts">
+</script>
+<style lang="scss" scoped>
+@import './CGridOriz.scss';
+</style>
--- a/src/components/CGridOriz/index.ts
+++ b/src/components/CGridOriz/index.ts
@@ -0,0 +1 @@
+export { default as CGridOriz } from './CGridOriz.vue'
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -69,3 +69,10 @@
 .hint_search{
  color: gray;
 }
+
+.clOrizzontal{
+
+}
+.q-carousel__slide{
+  padding: 8px !important;
+}
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted } from 'vue'
+import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted, nextTick } from 'vue'
 import { useI18n } from '@src/boot/i18n'

 import { tools } from '../../store/Modules/tools'
@@ -361,6 +361,8 @@ export default defineComponent({
    const showMap = ref(false)
    const showMapAtLeast1 = ref(false)
    const mapInitialized = ref(false)
+    const slideGridOriz = ref(0)
+    const autoplay = ref(true)


    const newRecordBool = ref(false)
@@ -371,6 +373,12 @@ export default defineComponent({
    const recModif = ref(<any>{})
    const showInnerDialog = ref(false)

+    const carouselTabRef = ref(<any>null)
+    const isAtStart = ref(true)
+    const isAtEnd = ref(false)
+    const activeIndex = ref(0)
+    const addEventScroll = ref(false)
+
    const mytable = ref('')
    const mytitle = ref('')
    const mytitlenew = ref('')
@@ -1209,6 +1217,8 @@ export default defineComponent({
        spinner_visible.value = false
        changetable.value = false
        startsearch.value = false
+
+        checkScrollPosition()
      })
    }

@@ -1306,6 +1316,8 @@ export default defineComponent({
          // console.log('   ...DONE ')
          done(pagination.value.rowsNumber === 0 ? true : false)

+          checkScrollPosition()
+
          alreadymounting.value = true
        })
      } else {
@@ -1660,13 +1672,55 @@ export default defineComponent({

        myvertical.value = props.vertical

+        if (props.prop_search) {
          showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
+        } else {
+          showfilter.value = props.prop_showfilter
+        }

      } catch (e) {
        console.error('ERRORE', e)
      }
    }

+    const checkScrollPosition = () => {
+      console.log('checkScrollPosition')
+      const container = carouselTabRef.value
+      if (!container ) return
+
+      if (!addEventScroll.value && carouselTabRef.value) {
+        carouselTabRef.value?.addEventListener('scroll', checkScrollPosition)
+        addEventScroll.value = true
+      }
+
+      if (carouselTabRef.value) {
+        console.log('carouselTabRef LISTEN')
+      } else {
+        console.log('carouselTabRef NO !')
+      }
+      console.log('  .... >>> AVANTI ', container.scrollLeft, container.clientWidth)
+    
+      isAtStart.value = container.scrollLeft <= 0
+      isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
+    
+      if (serverData.value.length > 0) { // Assicurarsi che ci siano elementi
+        console.log('entro dentro...')
+        const cardWidth = container.scrollWidth / serverData.value.length
+        activeIndex.value = Math.round(container.scrollLeft / cardWidth)
+      }
+    }
+
+    const scroll = (direction: any) => {
+      const container = carouselTabRef.value;
+      if (!container || !serverData.value.length) return;
+
+      const cardWidth = container.scrollWidth / serverData.value.length;
+      container.scrollBy({
+        left: direction * cardWidth,
+        behavior: 'smooth',
+      });
+    };
+    
    function mounted() {
      // console.log('mounted...')
      try {
@@ -1713,6 +1767,10 @@ export default defineComponent({

        changeTable(tablesel.value, true)

+        nextTick(() => {
+          checkScrollPosition()
+        })
+
        // Aggiungi gli listener agli eventi della tastiera
        document.addEventListener('keydown', onEscapeKey);
        // window.addEventListener('popstate', onBackButton);
@@ -2476,6 +2534,10 @@ export default defineComponent({
    // Rimuovi i listener al distruggere del componente
    onBeforeUnmount(() => {
      document.removeEventListener('keydown', onEscapeKey);
+
+      carouselTabRef.value?.removeEventListener('scroll', checkScrollPosition)
+
+
      // window.removeEventListener('popstate', onBackButton);
    });

@@ -2700,6 +2762,13 @@ export default defineComponent({
      gotoCurrentLocation,
      showInMap,
      showMapAtLeast1,
+      carouselTabRef,
+      isAtStart,
+      isAtEnd,
+      activeIndex,
+      scroll,      
+      slideGridOriz,
+      autoplay,
    }
  }
 })
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -269,10 +269,15 @@
            debounce="500"
            :hint="!hintinbtnsearch ? hint : ''"
            :error-message="noresultLabel"
-            :error="(getNumRecFromQuery() === 0 && !startsearch) && myfilter !== ''"
+            :error="
+              getNumRecFromQuery() === 0 && !startsearch && myfilter !== ''
+            "
            :label="hintinbtnsearch ? hint : $t('grid.search')"
            @keyup.enter="doSearch"
-            @clear="myfilter = ''; doSearch()"
+            @clear="
+              myfilter = '';
+              doSearch();
+            "
            @update:model-value="findByDebounce ? doSearch() : null"
            :clearable="!!myfilter"
            class="col q-mx-xs"
@@ -284,10 +289,10 @@
          </q-input>

          <q-btn
-            v-if="prop_search && myfilter || search"
+            v-if="(prop_search && myfilter) || search"
            color="primary"
            icon="fas fa-search"
-            @click="showSearchOnTop ? showSearchDialog = true : doSearch()"
+            @click="showSearchOnTop ? (showSearchDialog = true) : doSearch()"
          />

          <q-btn-toggle
@@ -400,6 +405,87 @@
          </div>
        </div>

+        <div v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ">
+          <q-carousel
+            swipeable
+            animated
+            :autoplay="autoplay"
+            v-model="slideGridOriz"
+            navigation
+            control-color="blue-4"
+            control-text-color="white"
+            arrows
+            ref="carousel"
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            height="500px"
+            width="100%"
+            control-type="push"
+            class="bg-grey-2 shadow-2 rounded-borders"
+            @mouseenter="autoplay = false"
+            @mouseleave="autoplay = true"
+          >
+            <q-carousel-slide
+              v-for="(rec, indexrow) in serverData"
+              :key="indexrow"
+              :name="indexrow"
+            >
+              <CMyRecCard
+                :table="tablesel"
+                :prop_myrec="rec"
+                @cmdext="cmdExt"
+                :editOn="editOn"
+                :margin_right="margin_right"
+              >
+              </CMyRecCard>
+            </q-carousel-slide>
+          </q-carousel>
+
+          <div v-if="false">
+            <div class="card-carousel-container">
+              <div class="card-carousel" ref="carouselTabRef">
+                <q-card
+                  v-for="(rec, indexrow) in serverData"
+                  :key="indexrow"
+                  :class="`my-card-elem center_img bordered ` + ' titolo_card'"
+                  :style="`height: auto; !important; width: 350px !important;`"
+                >
+                  <CMyRecCard
+                    :table="tablesel"
+                    :prop_myrec="rec"
+                    @cmdext="cmdExt"
+                    :editOn="editOn"
+                    :margin_right="margin_right"
+                  >
+                  </CMyRecCard>
+                </q-card>
+              </div>
+              <div
+                class="swipe-indicator left"
+                v-if="!isAtStart"
+                @click="scroll(-1)"
+              >
+                <q-icon name="chevron_left" size="2rem" color="white" />
+              </div>
+              <div
+                class="swipe-indicator right"
+                v-if="!isAtEnd"
+                @click="scroll(1)"
+              >
+                <q-icon name="chevron_right" size="2rem" color="white" />
+              </div>
+              <div class="scroll-indicator">
+                <div
+                  v-for="(_, index) in serverData"
+                  :key="index"
+                  :class="['dot', { active: index === activeIndex }]"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else>
          <div v-for="(row, indexrow) in serverData" :key="indexrow">
            <div
              v-if="
@@ -414,7 +500,9 @@
                <div v-if="setShowMonth(row, indexrow)">
                  <div>
                    <div v-if="row.dateTimeStart">
-                    <strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
+                      <strong>{{
+                        tools.getstrMonth(row.dateTimeStart)
+                      }}</strong>
                    </div>
                    <div>
                      <q-separator />
@@ -502,81 +590,9 @@
              "
            >
              <CSingleMovement :mov="row" />
-            <!--<div v-if="false" class="q-pa-xs row items-start q-gutter-xs">
-              <q-card class="my-card text-black">
-                <q-toolbar
-                  class="bg-primary text-white"
-                  style="min-height: 30px"
-                >
-                  <q-toolbar-title>
-                    <span class="q-ma-sm">
-                      <q-icon
-                        v-if="tools.isEntrataByRecMov(row)"
-                        name="fas fa-box-tissue"
-                        color="green"
-                      ></q-icon>
-                      <q-icon
-                        v-else-if="tools.isUscitaByRecMov(row)"
-                        name="fas fa-share-square"
-                        color="red"
-                      ></q-icon>
-                    </span>
-                    {{
-                      tools.isEntrataByRecMov(row)
-                        ? t('movement.movin')
-                        : tools.isUscitaByRecMov(row)
-                        ? t('movement.movout')
-                        : ''
-                    }}
-                  </q-toolbar-title>
-                </q-toolbar>
-                <q-card-section>
-                  <div v-for="col in mycolumns" :key="col.name">
-                    <div
-                      v-if="
-                        showColCheck(
-                          col,
-                          tools.TIPOVIS_SHOW_RECORD,
-                          true,
-                          1,
-                          row
-                        )
-                      "
-                      :class="
-                        !col.extrafield ||
-                        (col.extrafield &&
-                          (col.tipovisu !== costanti.TipoVisu.LINK ||
-                            (col.tipovisu === costanti.TipoVisu.LINK &&
-                              userStore.getImgByProfile(row, true, col))))
-                          ? `tdclass`
-                          : ``
-                      "
-                    >
-                      <div :class="getclrow(row)">
-                        <CMyPopupEdit
-                          :table="mytable"
-                          :canEdit="false"
-                          :canModify="false"
-                          :disable="false"
-                          :mycol="col"
-                          :row="row"
-                          :field="col.field"
-                          :visulabel="true"
-                          :subfield="col.subfield"
-                          minuteinterval="1"
-                          @save="SaveValue"
-                          @show="selItem(row, col)"
-                          @showandsave="showandsave"
-                        >
-                        </CMyPopupEdit>
            </div>
          </div>
        </div>
-                </q-card-section>
-              </q-card>
-            </div>-->
-          </div>
-        </div>
        <template v-slot:loading>
          <div class="row justify-center q-my-md">
            <q-spinner-dots color="primary" size="40px" />
--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -1158,6 +1158,57 @@
          >
          </q-input>
        </div>
+        <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
+          <div v-if="enableEdit" class="row">
+            <q-select
+              v-model="myel.container"
+              :options="[
+                { label: 'Eventi', value: 'mybachecas' },
+                { label: 'Servizi', value: 'myskills' },
+              ]"
+              label="Tabella"
+              emit-value
+              map-options
+              @input="saveElem"
+              style="min-width: 120px"
+            >
+            </q-select>
+            <br />
+            <q-select
+              v-model="myel.number"
+              :options="[
+                { label: 'Orizzontale', value: costanti.VISUTABLE_GRID_ORIZ },
+                { label: 'Griglia', value: costanti.VISUTABLE_LISTA },
+                { label: 'Scheda User', value: costanti.VISUTABLE_SCHEDA_USER },
+                { label: 'User Info', value: costanti.SHOW_USERINFO },
+              ]"
+              label="Visualizzazione"
+              emit-value
+              map-options
+              style="min-width: 120px"
+              @input="saveElem"
+            >
+            </q-select>
+            <q-toggle
+              v-model="myel.parambool"
+              color="positive"
+              label="Search"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-toggle
+              v-model="myel.parambool2"
+              color="positive"
+              label="Finder"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-toggle
+              v-model="myel.parambool3"
+              color="positive"
+              label="Mostra Mappa"
+              @update:model-value="modifElem"
+            ></q-toggle>
+          </div>
+        </div>
        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
          <div v-if="enableEdit" class="row">
            <q-input
--- a/src/components/CMyElem/CMyElem.ts
+++ b/src/components/CMyElem/CMyElem.ts
@@ -9,6 +9,7 @@ import { useGlobalStore } from '@store/globalStore'
 import { CImgTitle } from '../CImgTitle/index'
 import { CImgPoster } from '@/components/CImgPoster'
 import { CTitle } from '@/components/CTitle/index'
+import { CGridOriz } from '@/components/CGridOriz/index'
 import { tools } from '@store/Modules/tools'
 import { shared_consts } from '@/common/shared_vuejs'
 import { LandingFooter } from '@/components/LandingFooter'
@@ -66,7 +67,7 @@ export default defineComponent({
    CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
    CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
    CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup, CMovements,
+    CDashGroup, CMovements, CGridOriz,
    // ,  //CMapMarker, 
  },
  emits: ['selElemClick'],
--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -325,7 +325,13 @@
                :key="index"
                :name="index"
                :img-src="
-                  getsrcbyimg(costanti.DIR_UPLOAD + `pages/` + myel.path + `/` + rec.imagefile)
+                  getsrcbyimg(
+                    costanti.DIR_UPLOAD +
+                      `pages/` +
+                      myel.path +
+                      `/` +
+                      rec.imagefile
+                  )
                "
                :alt="rec.alt"
                class="carousel_slide"
@@ -482,6 +488,16 @@
        <div v-if="editOn" class="elemEdit">CSendRISTo</div>
        <CSendRISTo></CSendRISTo>
      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
+        <div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
+        <CGridOriz
+          :table="myel.container"
+          :tipovisu="myel.number"
+          :prop_search="myel.parambool"
+          :finder="myel.parambool2"
+          :showMap="myel.parambool3"
+        ></CGridOriz>
+      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
        <div v-if="editOn" class="elemEdit">CStatusReg</div>
        <CStatusReg> </CStatusReg>
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -164,6 +164,9 @@
                    <q-item-label caption>{{
                      tools.getUserNameOnlyIfToShow(row, col)
                    }}</q-item-label>
+                    <q-item-label v-if="row.profile.resid_province" style="text-align:right;">
+                      ({{ row.profile.resid_province }})
+                    </q-item-label>
                  </q-item-section>
                  <q-item-section side></q-item-section>
                </q-item>
--- a/src/components/CMyRecCard/CMyRecCard.scss
+++ b/src/components/CMyRecCard/CMyRecCard.scss
@@ -21,7 +21,7 @@
  /* Arrotonda leggermente gli angoli */
  border-radius: 8px;
  /* Aggiungi un po' di spazio interno intorno ai contenuti */
-  padding: 16px;
+  padding: 8px;
  /* Colore di sfondo bianco per separare dal resto del contenuto */
  background-color: #eff;

--- a/src/components/CMyRecCard/CMyRecCard.vue
+++ b/src/components/CMyRecCard/CMyRecCard.vue
@@ -1,10 +1,6 @@
 <!--suppress ALL -->
 <template>
-
-  <div
-    class="q-py-xs centermydiv cardrec"
-    :style="{ maxWidth: computedWidth }"
-  >
+  <div class="q-py-xs centermydiv cardrec" :style="{ maxWidth: computedWidth }">
    <div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
      <div class="row">
        <div class="col-2 q-my-sm">
@@ -18,6 +14,66 @@
            <span class="ev_month">{{
              tools.getstrMonth3Letters(myrec.dateTimeStart)
            }}</span>
+            <span class="ev_hour">{{
+              tools.getstrTime(myrec.dateTimeStart)
+            }}</span>
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) ===
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_hour_end"
+              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
+            >
+            <div
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="q-mx-sm"
+            >
+              ------
+            </div>
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_dayofweek"
+              >{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_day"
+              >{{ tools.getstrDay(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_month"
+              >{{ tools.getstrMonth3Letters(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_hour_end"
+              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
+            >
+            <q-avatar size="50px" class="q-my-sm">
+              <q-img
+                :src="getImgUser(myrec)"
+                :alt="myrec.username"
+                img-class="imgprofile"
+                height="50px"
+              />
+            </q-avatar>
          </div>
        </div>
        <div class="col-10">
@@ -28,12 +84,12 @@
            :alt="myrec.descr"
            img-class="imgprofile"
            height="270px"
-            fit="contain"
+            fit="cover"
            @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
          />
-          <div class="event_date">
+          <!--<div class="event_date">
            <span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
-          </div>
+          </div>-->
        </div>
      </div>
    </div>
@@ -101,7 +157,7 @@
      </q-item-section>

      <q-item-section
-        v-else-if="!myrec.organisedBy"
+        v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
        avatar
        @click="naviga(`/my/` + myrec.username)"
      >
@@ -158,7 +214,10 @@
            style="vertical-align: middle"
          >
            <q-badge
-              v-if="(recstatus === shared_consts.STATUSSKILL_ONLINE) || myrec.idStatusSkill.length > 1"
+              v-if="
+                recstatus === shared_consts.STATUSSKILL_ONLINE ||
+                myrec.idStatusSkill.length > 1
+              "
              dense
              :color="globalStore.getColByStatusSkills(recstatus)"
              text-color="white"
@@ -166,11 +225,9 @@
              <q-icon
                :name="globalStore.getStatusSkillIconById(recstatus)"
                color="white"
-                
              />&nbsp;
              {{ globalStore.getStatusSkillById(recstatus) }}
            </q-badge>
-            
          </span>

          <!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
--- a/src/components/CProductCard/CProductCard.ts
+++ b/src/components/CProductCard/CProductCard.ts
@@ -10,6 +10,8 @@ import { CCopyBtn } from '../CCopyBtn'
 import { CMyFieldRec } from '../CMyFieldRec'
 import { CMyValueDb } from '../CMyValueDb'

+import VueBarcode from 'vue-barcode'
+
 import { func_tools, toolsext } from '@store/Modules/toolsext'

 import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct } from '@src/model'
--- a/src/components/CProductCard/CProductCard.vue
+++ b/src/components/CProductCard/CProductCard.vue
@@ -223,6 +223,11 @@
          <div class="product_code">
            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
          </div>
+          <div v-if="false" class="barcode">
+            <barcode :value="myproduct.productInfo.code" format="EAN-13">
+            </barcode>
+            <vue-barcode ></vue-barcode>
+          </div>
          <div
            v-if="
              myproduct.productInfo.subcatprods &&
--- a/src/components/CSingleMovement/CSingleMovement.scss
+++ b/src/components/CSingleMovement/CSingleMovement.scss
@@ -23,13 +23,28 @@
    font-style: italic;
 }

-.causale {
-    font-style: italic; /* Testo in corsivo */
-    color: #555;        /* Colore del testo (può essere un grigio o un altro colore per le citazioni) */
-    border-left: 4px solid #ccc; /* Linea a sinistra per emulare lo stile di una citazione */
-    padding-left: 10px; /* Spazi a sinistra per il padding */
-    margin: 8px 0; /* Spaziatura sopra e sotto */
+:root {
+    --causale-text-color: #555;
+    --causale-bg-color: #f9f9f9;
 }
+
+body.body--dark {
+    --causale-text-color: #bbb;
+    --causale-bg-color: #333;
+}
+
+.causale {
+    position: relative;
+    /* Necessario per il posizionamento corretto del pseudo-elemento */
+    font-style: italic;
+    color: #555;
+    padding-left: 0px;
+    margin: 8px 0;
+    color: var(--causale-text-color);
+    background-color: var(--causale-bg-color);
+}
+
+
 .userto,
 .userfrom {
    white-space: pre-wrap;
--- a/src/components/CSingleMovement/CSingleMovement.vue
+++ b/src/components/CSingleMovement/CSingleMovement.vue
@@ -9,8 +9,6 @@
        'background-odd': index % 2 !== 0,
      },
    ]"
-    clickable
-    v-ripple
  >
    <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
      <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
@@ -31,9 +29,6 @@
      <q-item-label class="causalDest" v-if="mov.causalDest">{{
        mov.causalDest
      }}</q-item-label>
-      <q-item-label class="causale" v-if="mov.causal">&quot;{{
-        mov.causal
-      }}&quot;</q-item-label>
      <q-item-label v-if="visu !== 1" lines="3">
        {{ t('movement.from') }}
        <span class="userfrom">{{
@@ -49,7 +44,11 @@
      <q-item-label caption lines="1" v-if="mov.circuitfrom" class="circuit">{{
        mov.circuitfrom.name
      }}</q-item-label>
-      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date">{{
+      <q-item-label class="causale" v-if="mov.causal">
+        <q-icon name="fas fa-star" color="orange"></q-icon>
+        &quot;{{ mov.causal }}&quot;</q-item-label
+      >
+      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date text-right">{{
        tools.getstrDateTime(mov.transactionDate)
      }}</q-item-label>
    </q-item-section>
--- a/src/components/CStatusReg/CStatusReg.scss
+++ b/src/components/CStatusReg/CStatusReg.scss
@@ -7,3 +7,17 @@
    justify-content: space-between;
    /* Distribuisce gli elementi uniformemente */
 }
+
+.clDateStrette{
+    color: white;
+    font-style: italic;
+}
+.iscritto_da, .iscritto_da_name{
+    font-style: italic;
+    font-size: 0.85rem;
+    color: lightgray;
+}
+
+.iscritto_da_name{
+    color: white !important;
+}
--- a/src/components/CStatusReg/CStatusReg.ts
+++ b/src/components/CStatusReg/CStatusReg.ts
@@ -231,6 +231,7 @@ export default defineComponent({
      getImgUserByUsername,
      gotoPage,
      userStore,
+      t,
    }

  }
--- a/src/components/CStatusReg/CStatusReg.vue
+++ b/src/components/CStatusReg/CStatusReg.vue
@@ -102,32 +102,16 @@
                       :myval="datastat.num_teleg_pending" mycol="negative"></CCardStat>-->
          </div>

-          <div class="column animazione">
-            <q-tabs v-model="mytab" class="text-blue">
-              <q-tab
-                name="reg"
-                :label="$t('statusreg.newreg')"
+          <q-list bordered>
+            <q-expansion-item
+              group="somegroup"
              icon="fas fa-user-plus"
-              />
-              <q-tab
-                name="online"
-                :label="$t('statusreg.onlineusers')"
-                icon="fas fa-wifi"
-              />
-              <q-tab
-                name="diffusori"
-                :label="$t('statusreg.diffusori')"
-                icon="fas fa-medal"
-              />
-              <q-tab
-                name="strettelist"
-                :label="$t('statusreg.strettelist')"
-                icon="fas fa-handshake"
-              />
-            </q-tabs>
-
-            <q-tab-panels v-model="mytab" animated>
-              <q-tab-panel name="reg">
+              :label="$t('statusreg.newreg')"
+              default-opened
+              header-class="text-primary"
+            >
+              <q-card>
+                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <transition-group
                      name="fade"
@@ -139,34 +123,112 @@
                      <q-item
                        v-for="(user, index) in lastsreg"
                        :key="index"
-                      class="animated"
+                        class="animated chip_shadow q-ma-sm"
                        v-ripple
+                        clickable
+                        @click="gotoPage(`/my/${user.username}`)"
                      >
-                      <q-item-section>
-                        <q-item-label lines="1">
-                          <CMyFieldRec
-                            table="users"
-                            :id="user._id"
-                            :rec="user"
-                            field="username"
-                            :canEdit="false"
-                            :canModify="false"
-                            :fieldtype="costanti.FieldType.username_chip"
+                        <q-item-section avatar>
+                          <q-avatar round size="48px">
+                            <img :src="userStore.getImgByProfile(user)" />
+                            <q-badge
+                              v-if="tools.isUserOnline(user)"
+                              align="top"
+                              floating
+                              color="green"
+                              >online</q-badge
                            >
-                          </CMyFieldRec>
+                          </q-avatar>
+                        </q-item-section>
+                        <q-item-section class="">
+                          <q-item-label>
+                            {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
+                          </q-item-label>
+                          <q-item-label caption>{{
+                            tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
+                          }}</q-item-label>
+                          <q-item-label class="iscritto_da">
+                            {{ t('statusreg.invite_by') }}:
+                            <span class="iscritto_da_name">{{
+                              tools.getNameToShow(user.user_aportador)
+                            }}</span>
                          </q-item-label>
                        </q-item-section>
-
                        <q-item-section side>
-                        <q-item-label>{{
-                          tools.getstrDateTimeShort(user.date_reg)
+                          <q-item-label style="color: white">{{
+                            tools.getstrshortDate(user.date_reg)
                          }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </transition-group>
                  </div>
-              </q-tab-panel>
-              <q-tab-panel name="online">
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+
+            <q-separator />
+
+            <q-expansion-item
+              expand-separator
+              group="somegroup"
+              icon="fas fa-medal"
+              :label="$t('statusreg.lastsharedlink')"
+              header-class="text-purple"
+            >
+              <div>
+                <div class="text-center text-bold text-h6">Unisciti a RISO</div>
+                <div class="text-center">
+                  Se ancora non sei registrato a RISO, scegli un invitante che
+                  conosci. Questa persona dovrà ammetterti per permetterti di
+                  accedere alle funzionalità.
+                </div>
+              </div>
+
+              <q-item
+                v-for="(user, index) in lastssharedlink"
+                :key="index"
+                class="animated chip_shadow q-ma-sm"
+                clickable
+                v-ripple
+                @click="gotoPage(`/registrati/${user.user_aportador.username}`)"
+              >
+                <q-item-section avatar>
+                  <q-avatar round size="48px">
+                    <img
+                      :src="userStore.getImgByProfile(user.user_aportador)"
+                    />
+                  </q-avatar>
+                </q-item-section>
+                <q-item-section class="">
+                  <q-item-label>
+                    {{ tools.getNameToShow(user.user_aportador, null, {showprov: true, html: true}) }}
+                  </q-item-label>
+                  <q-item-label caption>{{
+                    tools.getUserNameOnlyIfToShow(user.user_aportador, null, {showprov: true, html: true})
+                  }}</q-item-label>
+                  <q-item-label class="iscritto_da">
+                    {{ t('statusreg.has_invited') }}:
+                    <span class="iscritto_da_name">{{
+                      tools.getNameToShow(user)
+                    }}</span>
+                  </q-item-label>
+                </q-item-section>
+                <q-item-section side
+                  ><span class="text-h6 q-mr-sm"></span
+                ></q-item-section>
+              </q-item>
+            </q-expansion-item>
+
+            <q-expansion-item
+              group="somegroup"
+              icon="fas fa-wifi"
+              :label="
+                $t('statusreg.onlineusers', { today: datastat.online_today })
+              "
+              header-class="text-teal"
+            >
+              <q-card>
+                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <q-list bordered>
                      <transition-group
@@ -197,11 +259,11 @@
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
-                          <q-item-label>{{
-                            tools.getNameToShow(user)
-                          }}</q-item-label>
+                            <q-item-label
+                              >{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
+                            </q-item-label>
                            <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
+                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side>
@@ -219,8 +281,22 @@
                      </transition-group>
                    </q-list>
                  </div>
-              </q-tab-panel>
-              <q-tab-panel name="diffusori">
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+
+            <q-separator />
+
+            <q-expansion-item
+              v-if="false"
+              expand-separator
+              group="somegroup"
+              icon="fas fa-medal"
+              :label="$t('statusreg.diffusori')"
+              header-class="text-purple"
+            >
+              <q-card>
+                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Aiuta RISO a crescere
@@ -259,13 +335,15 @@
                          </q-item-section>
                          <q-item-section class="">
                            <q-item-label overline>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
+                              <div class="index_diffusore">
+                                {{ index + 1 }}°
+                              </div>
                            </q-item-label>
                            <q-item-label>
-                            {{ tools.getNameToShow(user) }}</q-item-label
-                          >
+                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
+                            </q-item-label>
                            <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
+                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                            }}</q-item-label>
                          </q-item-section>
                          <q-item-section side
@@ -282,8 +360,21 @@
                      </transition-group>
                    </q-list>
                  </div>
-              </q-tab-panel>
-              <q-tab-panel name="strettelist">
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+
+            <q-separator />
+
+            <q-expansion-item
+              group="somegroup"
+              icon="fas fa-handshake"
+              :label="$t('handshake.last_strettedimano')"
+              header-class="bg-teal text-white"
+              expand-icon-class="text-white"
+            >
+              <q-card class="bg-teal-2">
+                <q-card-section>
                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
                    <div class="text-center text-bold text-h6">
                      Strette di Mano
@@ -306,10 +397,13 @@
                          class="animated chip_shadow q-ma-sm"
                          clickable
                          v-ripple
+                        >
+                          <q-item-section avatar>
+                            <q-avatar
+                              round
+                              size="48px"
                              @click="gotoPage(`/my/${user.username}`)"
                            >
-                        <q-item-section avatar>
-                          <q-avatar round size="48px">
                              <img :src="userStore.getImgByProfile(user)" />
                              <q-badge
                                v-if="tools.isUserOnline(user)"
@@ -321,60 +415,37 @@
                            </q-avatar>
                          </q-item-section>
                          <q-item-section class="">
-                          <q-item-label overline>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
-                          </q-item-label>
-                          <q-item-label>
-                            {{ tools.getNameToShow(user) }}</q-item-label
+                            <q-item-label class="clDateStrette">
+                              {{
+                                tools.getstrDateTimeLong(
+                                  user.profile.handshake.date
+                                )
+                              }}</q-item-label
+                            >
+                            <q-item-label>
+                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
+                            </q-item-label>
+
+                            <q-item-label style="text-align: right">
+                              {{ tools.getNameToShow(user.userfriend, null, {showprov: true, html: true}) }}
+                              </q-item-label
                            >
-                          <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
-                          }}</q-item-label>
                          </q-item-section>
-                        <q-item-section side
-                          ><div
-                            :class="
-                              `text-h6 q-mx-sm q-px-sm text-bold ` +
-                              ($q.dark.isActive ? `text-white` : `text-black`)
+                          <q-item-section side>
+                            <q-avatar
+                              round
+                              size="48px"
+                              @click="
+                                gotoPage(`/my/${user.userfriend.username}`)
                              "
                            >
-                            {{ user.count }}
-                          </div></q-item-section
-                        >
-                      </q-item>
-                    </transition-group>
-                  </q-list>
-                </div>
-              </q-tab-panel>
-              <q-tab-panel name="sharedlink">
-                <div class="q-pa-md" style="max-width: 300px">
-                  <div class="text-center text-bold text-h6">
-                    Registrati con questi invitanti:
-                  </div>
-                  <div class="text-center">
-                    Cliccare sulla persona per procedere alla registrazione
-                  </div>
-                  <q-list bordered>
-                    <transition-group
-                      name="fade"
-                      mode="out-in"
-                      appear
-                      enter-active-class="animazione fadeIn"
-                      leave-active-class="animazione fadeOut"
-                    >
-                      <q-item
-                        v-for="(user, index) in lastssharedlink"
-                        :key="index"
-                        class="animated chip_shadow q-ma-sm"
-                        clickable
-                        v-ripple
-                        @click="gotoPage(`/registrati/${user.username}`)"
-                      >
-                        <q-item-section avatar>
-                          <q-avatar round size="48px">
-                            <img :src="userStore.getImgByProfile(user)" />
+                              <img
+                                :src="
+                                  userStore.getImgByProfile(user.userfriend)
+                                "
+                              />
                              <q-badge
-                              v-if="tools.isUserOnline(user)"
+                                v-if="tools.isUserOnline(user.userfriend)"
                                align="top"
                                floating
                                color="green"
@@ -382,27 +453,14 @@
                              >
                            </q-avatar>
                          </q-item-section>
-                        <q-item-section class="">
-                          <q-item-label overline>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
-                          </q-item-label>
-                          <q-item-label>
-                            {{ tools.getNameToShow(user) }}</q-item-label
-                          >
-                          <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
-                          }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section side
-                          ><span class="text-h6 q-mr-sm"></span
-                        ></q-item-section>
                        </q-item>
                      </transition-group>
                    </q-list>
                  </div>
-              </q-tab-panel>
-            </q-tab-panels>
-          </div>
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+          </q-list>

          <!--<CGeoChart :mydata="datastat.arr_nations">

--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1132,8 +1132,9 @@ h3 {
 .imgprofile {
  border: 0px solid rgb(29, 118, 13);
  border-radius: 16px;
-  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
  margin: 1px;
+  object-position: 50% 5% !important;
 }

 .imgprofile_small {
@@ -1404,8 +1405,10 @@ h3 {
 .chip_shadow {
  border-radius: 20px;
  background: #1729ea;
-  background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
-  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
+  background: -webkit-linear-gradient(45deg, #1e90ff, #3742fa) !important; /* A combination of lighter blues */
+  background: linear-gradient(45deg, #3a90e7, #8e92e4) !important;
+  box-shadow: 1px 1px 3px #5f6f8b;
+  color: #ffffff; /* Ensure the text is white for better contrast */
 }

 .last_access {
@@ -1948,6 +1951,20 @@ h3 {
  text-align: center;
 }

+.ev_hour, .ev_hour_end {
+  color: black;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.ev_hour{
+  color: green;
+}
+
+.ev_hour_end{
+  color: red;
+}
+
 .col-105 {
  height: auto;
  width: 90%;
@@ -2314,6 +2331,13 @@ $coloreprincipale: lightblue;
  --background-odd-light: white;
  --background-even-dark: rgba(45, 45, 45, 0.7); /* Aggiustare per il tema dark */
  --background-odd-dark: rgba(30, 30, 30, 1); /* Aggiustare per il tema dark */
+  --text-color: #555;
+  --bg-color: #f9f9f9;
+}
+
+body.body--dark {
+  --text-color: #bbb;
+  --bg-color: #333;
 }

 .background-even {
@@ -2347,3 +2371,21 @@ $coloreprincipale: lightblue;
  }  
 }

+.citation {
+  font-style: italic; /* Testo in corsivo per indicare una citazione */
+  border-left: 4px solid #cccccc; /* Barra verticale per evidenziare la citazione */
+  margin: 10px 0; /* Spaziatura verticale */
+  padding: 10px 20px; /* Spaziatura interna */
+  color: #555555; /* Colore del testo leggermente attenuato */
+  background-color: #f9f9f9; /* Sfondo leggero per evidenziare la citazione */
+}
+
+.comment {
+  font-size: 0.9em; /* Testo leggermente più piccolo */
+  color: #666666; /* Colore del testo attenuato */
+  background-color: #f4f4f4; /* Sfondo neutro */
+  padding: 10px; /* Spaziatura interna */
+  border-radius: 5px; /* Angoli arrotondati */
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* Leggera ombra per effetto di profondità */
+  margin: 10px 0; /* Spaziatura verticale */
+}
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -140,6 +140,7 @@ export interface IMyElem {
  parambool2?: boolean
  parambool3?: boolean
  number?: number
+  num2?: number
  imgback?: string
  ratio?: string
  containerHtml?: string
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -313,7 +313,7 @@ const msg_it = {
      domanda_removefriend: 'Rimuovi dagli Amici {username}?',
      domanda_removehandshake: 'Rimuovi dalla lista Strette di Mano {username}?',
      domanda_exit_fromgroup: 'Uscire dal Gruppo {groupname} ?',
-      domanda_addadminofmygroup: 'Aggiungere {username} come Amministratore del Gruppo {groupname} ?',
+      domanda_addadminofmygroup: 'Aggiungere {username} come Amministratore / Amministratrice del Gruppo {groupname} ?',
      domanda_removeadminofmygroup: 'Rimuovere {username} dall\' incarico di Amministratore del Gruppo {groupname} ?',
      removedfriend: 'Rimosso dalla lista di Amici',
      removedhandshake: 'Rimosso dalla lista Strette di Mano',
@@ -1255,6 +1255,7 @@ const msg_it = {
    handshake: {
      strettadimano: 'Stretta di mano',
      strettedimano: 'Strette di mano',
+      last_strettedimano: 'Ultime Strette di mano',
      received: 'Ricevute',
      incommon: 'Strette in Comune',
      accept_trust: 'Accetta la Stretta di mano',
@@ -1452,7 +1453,7 @@ const msg_it = {
      remove_from_mylist: 'Rimuovi dal Circuito',
      reject_ask: 'Rifiuta l\'ingresso dal Circuito',
      domanda_exit_fromcircuit: 'Sei veramente sicuro di voler uscire dal {circuitname} ?',
-      domanda_addadminofcircuit: 'Aggiungere {username} come Amministratore del {circuitname} ?',
+      domanda_addadminofcircuit: 'Aggiungere {username} come Amministratore/Amministratrice del {circuitname} ?',
      domanda_removeadminofcircuit: 'Rimuovere {username} dall\' incarico di Amministratore del {circuitname} ?',
      domanda_refuse_circuit: 'Rifiutare la richiesta di {username} per entrare nel {circuitname}?',
      refusedcircuit: 'Rifiutato a {username} la richiesta di entrare nel Circuito',
@@ -1673,6 +1674,8 @@ const msg_it = {
    },

    statusreg: {
+      invite_by: 'Invitata da',
+      has_invited: 'ha invitato',
      reg: 'Utenti Attivi',
      verifieds: 'Verificati',
      online_today: 'On Line Oggi',
@@ -1681,11 +1684,12 @@ const msg_it = {
      autorizzare: 'In attesa di Abilitazione',
      passeggeri: 'Passeggeri Navi',
      giainlista: 'Gia in Lista',
-      newreg: 'Iscritti',
-      onlineusers: 'OnLine',
+      newreg: 'Ultimi Iscritti',
+      onlineusers: 'OnLine ({today} oggi)',
      diffusori: 'Diffusori',
      strettelist: 'Strette',
      sharedlink: 'Diffusori',
+      lastsharedlink: 'Ultimi invitanti alla App',
      nationality: 'Nazionalità',
      nationality_born: 'Nazione di Nascita',
      verified: 'Verificata',
--- a/src/store/Modules/costanti.ts
+++ b/src/store/Modules/costanti.ts
@@ -310,6 +310,7 @@ export const costanti = {
  VISUTABLE_USER_TABGROUP: -4,
  VISUTABLE_USER_TABCIRCUIT: -5,
  VISUTABLE_GROUP_CIRCUIT: -6,
+  VISUTABLE_GRID_ORIZ: -10,

  DIR_UPLOAD: 'upload/',

--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -165,6 +165,7 @@ export const colmyelems = [
  AddCol({ name: 'parambool2', label_trans: 'myelems.parambool2', fieldtype: costanti.FieldType.boolean }),
  AddCol({ name: 'parambool3', label_trans: 'myelems.parambool3', fieldtype: costanti.FieldType.boolean }),
  AddCol({ name: 'number', label_trans: 'myelems.number', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'num2', label_trans: 'myelems.num2', fieldtype: costanti.FieldType.number }),
  AddCol({ name: 'imgback', label_trans: 'myelems.imgback' }),
  AddCol({ name: 'size', label_trans: 'myelems.size' }),
  AddCol({ name: 'ratio', label_trans: 'myelems.ratio' }),
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -3309,6 +3309,11 @@ export const tools = {
    if (mytimestamp) return date.formatDate(mytimestamp, 'DD/MM HH:mm')
    return ''
  },
+  getstrDateTimeLong(mytimestamp: Date | number | string | undefined) {
+    // console.log('getstrDate', mytimestamp)
+    if (mytimestamp) return date.formatDate(mytimestamp, 'DD/MMM/YYYY HH:mm')
+    return ''
+  },

  getstrDateMonthTimeShort(mytimestamp: Date | number | string | undefined) {
    // console.log('getstrDate', mytimestamp)
--- a/src/store/UserStore.ts
+++ b/src/store/UserStore.ts
@@ -773,7 +773,7 @@ export const useUserStore = defineStore('UserStore', {
      return myrec
    },

-    getNameToShow(user: any, col: any = null): string {
+    getNameToShow(user: any, col: any = null, options: any = {}): string {
      let name = ''
      let myrec = this.getRecByCol(user, col)

@@ -812,14 +812,27 @@ export const useUserStore = defineStore('UserStore', {
      if (!name && myrec.extrarec && myrec.extrarec.hasOwnProperty('contoComDest'))
        return myrec.extrarec.contoComDest

-      return name
+      return name + (options && options.showprov ? this.getProvinceByUser(myrec, options ? options.html : false) : '')
+
    },

-    getUserNameOnlyIfToShow(user: any, col: any = null): string {
+    getProvinceByUser(user: IUserFields, html: boolean = false) {
+      let mystr = ''
+      if (user && user.profile && user.profile.resid_province)
+        mystr = `(${user.profile.resid_province})`
+
+      if (html) {
+        mystr = `<span style='text-align: right'>${mystr}</span>`
+      }
+
+      return mystr
+    },
+
+    getUserNameOnlyIfToShow(user: any, col: any = null, options: any): string {
      let myrec = this.getRecByCol(user, col)

      if (myrec.name || myrec.surname) {
-        return myrec.username
+        return myrec.username + ((options && options.showprov) ? this.getProvinceByUser(myrec, options.html) : '')
      }

      return ''
--- a/src/views/user/myprofile/myprofile.scss
+++ b/src/views/user/myprofile/myprofile.scss
@@ -14,5 +14,9 @@
 .qualifica{
  border: solid 2px #4198ef;
  border-radius: 1rem;
-  padding: 5px;
+  padding: 4px;
+  margin: 2px;
+  text-align: center;
+  box-shadow: 0 0 0 1px #4A89F3;
+  text-shadow: .05rem .05rem .15rem #878787;
 }
--- a/src/views/user/myprofile/myprofile.vue
+++ b/src/views/user/myprofile/myprofile.vue
@@ -129,9 +129,9 @@
        <div v-if="userStore.userprofile._id" class="col-12 text-h8 q-mt-sm">
          <span v-if="userStore.userprofile.profile.qualifica">
            <em
-              ><span class="qualifica">{{
+              ><div class="qualifica">{{
                userStore.userprofile.profile.qualifica
-              }}</span></em
+              }}</div></em
            >
          </span>
        </div>
@@ -247,9 +247,9 @@
          >
            <span v-if="userStore.userprofile.profile.qualifica">
              <em
-                ><span class="qualifica">{{
+                ><div class="qualifica">{{
                  userStore.userprofile.profile.qualifica
-                }}</span></em
+                }}</div></em
              >
            </span>
          </div>
--- a/yarn.lock
+++ b/yarn.lock
@@ -4843,7 +4843,7 @@ chart.js@^4.4.4:
  dependencies:
    "@kurkle/color" "^0.3.0"

-chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@^3.5.3:
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -5676,7 +5676,7 @@ debug@2.6.9:
  dependencies:
    ms "2.0.0"

-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
+debug@4, debug@^4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
  version "4.3.7"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -7782,6 +7782,11 @@ ieee754@^1.1.13:
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==

+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
 ignore-walk@^6.0.4:
  version "6.0.5"
  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.5.tgz#ef8d61eab7da169078723d1f82833b36e200b0dd"
@@ -8736,6 +8741,11 @@ js-yaml@~3.7.0:
    argparse "^1.0.7"
    esprima "^2.6.0"

+jsbarcode@^3.5.8:
+  version "3.11.6"
+  resolved "https://registry.yarnpkg.com/jsbarcode/-/jsbarcode-3.11.6.tgz#96e8fbc3395476e162982a6064b98a09b5ea02c0"
+  integrity sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==
+
 jsbn@1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
@@ -9949,6 +9959,22 @@ node-sass@^9.0.0:
    stdout-stream "^1.4.0"
    "true-case-path" "^2.2.1"

+nodemon@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-3.1.7.tgz#07cb1f455f8bece6a499e0d72b5e029485521a54"
+  integrity sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^4"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.1.2"
+    pstree.remy "^1.1.8"
+    semver "^7.5.3"
+    simple-update-notifier "^2.0.0"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+
 nopt@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
@@ -11358,6 +11384,11 @@ pseudomap@^1.0.2:
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==

+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
 public-encrypt@^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -12258,6 +12289,13 @@ sigstore@^2.2.0:
    "@sigstore/tuf" "^2.3.4"
    "@sigstore/verify" "^1.2.1"

+simple-update-notifier@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
+  integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==
+  dependencies:
+    semver "^7.5.3"
+
 sirv@^2.0.3:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -12798,7 +12836,7 @@ supports-color@^3.2.3:
  dependencies:
    has-flag "^1.0.0"

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -13025,6 +13063,11 @@ totalist@^3.0.0:
  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==

+touch@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
+  integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
+
 tr46@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -13255,6 +13298,11 @@ unbox-primitive@^1.0.2:
    has-symbols "^1.0.3"
    which-boxed-primitive "^1.0.2"

+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
 undici-types@~6.19.2:
  version "6.19.8"
  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
@@ -13473,6 +13521,13 @@ vendors@^1.0.0:
  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==

+vue-barcode@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vue-barcode/-/vue-barcode-1.3.0.tgz#c1a4fede73b2d45cdd154a176d6fd0e20fb32df0"
+  integrity sha512-DxQ0hxes/dP6GajsJumpW6jV14VwlnTwStZbtE6G0wkewuJVDoDOdxUr5seGuxsMT9fJ0aty4X47Z5TG0M/gxg==
+  dependencies:
+    jsbarcode "^3.5.8"
+
 vue-class-component@^6.0.0, vue-class-component@^6.2.0:
  version "6.3.2"
  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"
				`@@ -0,0 +1 @@`
				`export { default as CGridOriz } from './CGridOriz.vue'`