myprojplanet_vite/src/components/Riso_Home_Modern/Riso_Home_Modern.vue

<template>
  <div class="riso-modern-home">
    <!-- Header -->
    <header class="riso-header">
      <div class="header-left">
        <q-avatar
          size="44px"
          class="header-avatar"
        >
          <span class="header-avatar-text">
            {{ (userStore.my.username || 'R').slice(0, 1).toUpperCase() }}
          </span>
        </q-avatar>

        <div class="header-text">
          <div class="header-greeting">
            Ciao, <span class="u-strong">{{ userStore.my.username }}</span>
          </div>
          <div class="header-sub">Rete Italiana Scambio Orizzontale</div>
        </div>
      </div>

      <div class="header-actions">
        <q-btn
          flat
          round
          dense
          icon="help_outline"
          class="header-action-btn"
          aria-label="Guida"
          @click="openGuide"
        />
      </div>
    </header>

    <!-- Hero Section: Azioni principali -->
    <section class="hero-cards">
      <!-- Annunci -->
      <div
        class="hero-card gradient-primary"
        role="button"
        tabindex="0"
        v-ripple
        @click="openAnnunciDialog"
        @keyup.enter="openAnnunciDialog"
        @keyup.space.prevent="openAnnunciDialog"
      >
        <div class="hero-card-top">
          <div class="hero-icon">
            <q-icon
              name="campaign"
              size="1.6rem"
            />
          </div>
          <q-icon
            name="chevron_right"
            size="sm"
            class="hero-chevron"
          />
        </div>

        <div class="hero-card-body">
          <div class="card-title">Annunci</div>
          <div class="card-subtitle">Beni · Servizi · Ospitalità</div>
        </div>
      </div>

      <!-- Circuiti -->
      <div
        class="hero-card gradient-secondary"
        role="button"
        tabindex="0"
        v-ripple
        @click="goToCircuits"
        @keyup.enter="goToCircuits"
        @keyup.space.prevent="goToCircuits"
      >
        <div class="hero-card-top">
          <div class="hero-icon">
            <q-img
              src="/images/1ris_rosso_100.png"
              width="1.6rem"
            />
          </div>

          <q-badge
            class="hero-badge"
            color="white"
            text-color="primary"
            rounded
          >
            {{ circuitStore.quantiCircuitiSonoDentro() }}
          </q-badge>
        </div>

        <div class="hero-card-body">
          <div class="card-title">Circuiti RIS</div>
          <div class="card-subtitle">Saldi · Limiti · Movimenti</div>
        </div>
      </div>

      <!-- Eventi -->
      <div
        class="hero-card gradient-accent"
        role="button"
        tabindex="0"
        v-ripple
        @click="goToEvents"
        @keyup.enter="goToEvents"
        @keyup.space.prevent="goToEvents"
      >
        <div class="hero-card-top">
          <div class="hero-icon">
            <q-icon
              name="event"
              size="1.6rem"
            />
          </div>

          <!--<q-badge
            class="hero-badge"
            color="white"
            text-color="primary"
            rounded
          >
            {{ upcomingEventsCount }}
          </q-badge>-->
        </div>

        <div class="hero-card-body">
          <div class="card-title">Eventi</div>
          <div class="card-subtitle">I prossimi nella rete</div>
        </div>
      </div>

      <!-- Profilo -->
      <div
        class="hero-card gradient-orange"
        role="button"
        tabindex="0"
        v-ripple
        @click="goToProfile"
        @keyup.enter="goToProfile"
        @keyup.space.prevent="goToProfile"
      >
        <div class="hero-card-top">
          <div class="hero-icon">
            <q-icon
              name="account_circle"
              size="1.6rem"
            />
          </div>

          <q-icon
            name="chevron_right"
            size="sm"
            class="hero-chevron"
          />
        </div>

        <div class="hero-card-body">
          <div class="card-title">Il mio profilo</div>
          <div class="card-subtitle text-italic">@{{ userStore.my.username }}</div>
        </div>
      </div>
    </section>

    <!-- Dialog Annunci -->
    <q-dialog
      v-model="showAnnunciDialog"
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card class="annunci-dialog">
        <q-card-section class="dialog-header">
          <h3 class="dialog-title">Scegli Categoria</h3>
          <q-btn
            flat
            round
            dense
            icon="close"
            v-close-popup
          />
        </q-card-section>

        <q-card-section class="dialog-content">
          <div class="annunci-options-mobile">
            <div
              class="annuncio-option gradient-indigo"
              @click="goToGoods"
            >
              <q-icon
                name="fas fa-tshirt"
                size="2.5rem"
              />
              <span class="option-title">Beni</span>
              <span class="option-subtitle">Autoproduzioni · Cibo · Oggetti</span>
            </div>

            <div
              class="annuncio-option gradient-red"
              @click="goToServices"
            >
              <q-icon
                name="fas fa-house-user"
                size="2.5rem"
              />
              <span class="option-title">Servizi</span>
              <span class="option-subtitle">Competenze · Aiuti · Consulenze</span>
            </div>

            <div
              class="annuncio-option gradient-lime"
              @click="goToHospitality"
            >
              <q-icon
                name="fas fa-bed"
                size="2.5rem"
              />
              <span class="option-title">Ospitalità</span>
              <span class="option-subtitle">Ospitare · Viaggi · Accoglienza</span>
            </div>

            <div class="annuncio-option gradient-teal">
              <q-icon
                name="directions_car"
                size="2.5rem"
              />
              <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>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./Riso_Home_Modern.ts"></script>

<style lang="scss" scoped>
@import './Riso_Home_Modern.scss';
</style>