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">
          <div class="dialog-title-row">
            <h3 class="dialog-title">Scegli categoria</h3>
            <q-btn
              flat
              round
              dense
              icon="close"
              aria-label="Chiudi"
              @click="showAnnunciDialog = false"
            />
          </div>
          <div class="dialog-subtitle">Apri la sezione giusta in un tap.</div>
        </q-card-section>

        <q-separator />

        <q-list class="annunci-list">
          <q-item
            clickable
            v-ripple
            class="annunci-item gradient-green"
            @click="goToGoods"
          >
            <q-item-section avatar>
              <div class="annunci-icon">
                <q-icon
                  name="fas fa-tshirt"
                  size="1.4rem"
                />
              </div>
            </q-item-section>
            <q-item-section>
              <q-item-label class="option-title">Beni</q-item-label>
              <q-item-label
                caption
                class="option-subtitle"
              >
                Autoproduzioni · Cibo · Oggetti
              </q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="chevron_right" />
            </q-item-section>
          </q-item>

          <q-item
            clickable
            v-ripple
            class="annunci-item gradient-red"
            @click="goToServices"
          >
            <q-item-section avatar>
              <div class="annunci-icon">
                <q-icon
                  name="fas fa-house-user"
                  size="1.4rem"
                />
              </div>
            </q-item-section>
            <q-item-section>
              <q-item-label class="option-title">Servizi</q-item-label>
              <q-item-label
                caption
                class="option-subtitle"
              >
                Competenze · Aiuti · Consulenze
              </q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="chevron_right" />
            </q-item-section>
          </q-item>

          <q-item
            clickable
            v-ripple
            class="annunci-item gradient-lime"
            @click="goToHospitality"
          >
            <q-item-section avatar>
              <div class="annunci-icon">
                <q-icon
                  name="fas fa-bed"
                  size="1.4rem"
                />
              </div>
            </q-item-section>
            <q-item-section>
              <q-item-label class="option-title">Ospitalità</q-item-label>
              <q-item-label
                caption
                class="option-subtitle"
              >
                Ospitare · Viaggi · Accoglienza
              </q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="chevron_right" />
            </q-item-section>
          </q-item>

          <q-item
            class="annunci-item gradient-blue disabled"
            disable
          >
            <q-item-section avatar>
              <div class="annunci-icon">
                <q-icon
                  name="commute"
                  size="1.4rem"
                />
              </div>
            </q-item-section>
            <q-item-section>
              <q-item-label class="option-title">Trasporti</q-item-label>
              <q-item-label
                caption
                class="option-subtitle"
              >
                In arrivo…
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </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>