From 8b6a636a9688c1519a2866594b46aad9aab5d403 Mon Sep 17 00:00:00 2001 From: Surya Paolo Date: Sat, 29 Nov 2025 21:14:26 +0100 Subject: [PATCH] - Nuova Home Page RISO Moderna! Passo 1 - la struttura --- src/common/shared_vuejs.ts | 6 + src/components/CBigBtn/CBigBtn.scss | 214 ++- src/components/CBigBtn/CBigBtn.vue | 80 +- .../CGridTableRec/CGridTableRec.vue | 2 +- src/components/CMainView/CMainView.scss | 333 ++++ src/components/CMainView/CMainView.vue | 41 +- src/components/CMyElem/CMyElem.ts | 2 + src/components/CMyElem/CMyElem.vue | 6 + .../CRISBalanceBar/CRISBalanceBar.scss | 235 +++ .../CRISBalanceBar/CRISBalanceBar.ts | 87 + .../CRISBalanceBar/CRISBalanceBar.vue | 87 + src/components/CRISBalanceBar/index.ts | 1 + .../Riso_Home_Modern/Riso_Home_Modern.scss | 1495 +++++++++++++++++ .../Riso_Home_Modern/Riso_Home_Modern.ts | 588 +++++++ .../Riso_Home_Modern/Riso_Home_Modern.vue | 768 +++++++++ src/components/Riso_Home_Modern/index.ts | 1 + src/components/index.ts | 1 + 17 files changed, 3865 insertions(+), 82 deletions(-) create mode 100755 src/components/CRISBalanceBar/CRISBalanceBar.scss create mode 100755 src/components/CRISBalanceBar/CRISBalanceBar.ts create mode 100755 src/components/CRISBalanceBar/CRISBalanceBar.vue create mode 100755 src/components/CRISBalanceBar/index.ts create mode 100644 src/components/Riso_Home_Modern/Riso_Home_Modern.scss create mode 100644 src/components/Riso_Home_Modern/Riso_Home_Modern.ts create mode 100644 src/components/Riso_Home_Modern/Riso_Home_Modern.vue create mode 100644 src/components/Riso_Home_Modern/index.ts diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts index 6e2d15ce..cfa6e859 100755 --- a/src/common/shared_vuejs.ts +++ b/src/common/shared_vuejs.ts @@ -190,6 +190,7 @@ export const shared_consts = { PAGE_SECTION: 1500, PROFILE_COMPLETITION: 1510, RISOHOME: 1600, + RISOHOME_MODERN: 1610 }, QUERYTYPE_MYGROUP: 1, @@ -1943,6 +1944,11 @@ export const shared_consts = { label: 'HomePage RISO', icon: 'fas fa-home', }, + { + value: 1610, // RISOHOME_MODERN + label: 'RISO Home Modern', + icon: 'fas fa-home', + }, { value: 258, label: 'Registration', diff --git a/src/components/CBigBtn/CBigBtn.scss b/src/components/CBigBtn/CBigBtn.scss index 64cfa721..7022a68e 100755 --- a/src/components/CBigBtn/CBigBtn.scss +++ b/src/components/CBigBtn/CBigBtn.scss @@ -1,42 +1,188 @@ -.text-cls{ - font-weight: bold; +// Spacing ridotto +$s-xs: 4px; +$s-sm: 6px; +$s-md: 8px; + +// Wrapper moderno +.modern-btn-wrapper { + padding: $s-xs; + + &.modern-btn-col-3 { + flex: 0 0 33.333%; + max-width: 33.333%; + + @media (max-width: 599px) { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + @media (min-width: 600px) and (max-width: 1023px) { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + @media (min-width: 1024px) and (max-width: 1439px) { + flex: 0 0 25%; + max-width: 25%; + } + + @media (min-width: 1440px) { + flex: 0 0 16.666%; + max-width: 16.666%; + } + } + + &.modern-btn-col-2 { + flex: 0 0 50%; + max-width: 50%; + + @media (min-width: 600px) and (max-width: 1023px) { + flex: 0 0 50%; + max-width: 50%; + } + + @media (min-width: 1024px) and (max-width: 1439px) { + flex: 0 0 33.333%; + max-width: 33.333%; + } + + @media (min-width: 1440px) { + flex: 0 0 25%; + max-width: 25%; + } + } } -.my-text { - font-size: 1rem; - font-weight: bold; - line-height: 1.5rem; - letter-spacing: 0.0125em; -} - -.my-text_3 { - font-size: 1rem; - font-weight: bold; - line-height: 1.5rem; - letter-spacing: 0.0125em; -} - -.my-text-small { - font-size: 1rem; - line-height: 1rem; - letter-spacing: 0.0125em; -} - -.mybox_3 { - min-width: 100px; - min-height: 100px; - +// Bottoni moderni +.modern-bigbtn { width: 100%; + min-height: 90px; + min-width: 90px; + padding: $s-sm; + flex-direction: column; + gap: $s-xs; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; + } + + &:hover::before { + left: 100%; + } + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + } + + .btn-icon { + margin: $s-xs; + font-size: 2rem; + } + + .btn-icon-large { + margin: $s-xs; + } + + .btn-label, + .btn-label-large { + margin: $s-xs; + font-size: 0.95rem; + font-weight: 700; + line-height: 1.3; + letter-spacing: 0.01em; + text-align: center; + white-space: normal; + word-break: break-word; + } + + .btn-label-large { + font-size: 1.1rem; + } } -.mybox { - min-width: 112px; - min-height: 112px; - +.modern-smallbtn { width: 100%; + min-height: 70px; + min-width: 80px; + padding: $s-sm; + flex-direction: column; + gap: $s-xs; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; + } + + &:hover::before { + left: 100%; + } + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); + } + + .btn-icon-small { + margin: $s-xs; + } + + .btn-label-small { + margin: $s-xs; + font-size: 0.85rem; + font-weight: 600; + line-height: 1.2; + letter-spacing: 0.01em; + text-align: center; + white-space: normal; + word-break: break-word; + } } -.mybox_small { - min-width: 110px; - width: 100%; -} +// Responsive adjustments +@media (max-width: 599px) { + .modern-bigbtn { + min-height: 85px; + min-width: 85px; + + .btn-icon { + font-size: 1.8rem; + } + + .btn-label { + font-size: 0.85rem; + } + + .btn-label-large { + font-size: 1rem; + } + } + + .modern-smallbtn { + min-height: 65px; + min-width: 70px; + + .btn-label-small { + font-size: 0.75rem; + } + } +} \ No newline at end of file diff --git a/src/components/CBigBtn/CBigBtn.vue b/src/components/CBigBtn/CBigBtn.vue index a15730f4..45d291a7 100755 --- a/src/components/CBigBtn/CBigBtn.vue +++ b/src/components/CBigBtn/CBigBtn.vue @@ -1,27 +1,63 @@ diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue index 371641d4..d6351005 100755 --- a/src/components/CGridTableRec/CGridTableRec.vue +++ b/src/components/CGridTableRec/CGridTableRec.vue @@ -7,9 +7,9 @@
-
-
+ +
- -
-
+ + + +
- -
+ /> +
- - + diff --git a/src/components/CRISBalanceBar/index.ts b/src/components/CRISBalanceBar/index.ts new file mode 100755 index 00000000..c8c1e43d --- /dev/null +++ b/src/components/CRISBalanceBar/index.ts @@ -0,0 +1 @@ +export {default as CRISBalanceBar} from './CRISBalanceBar.vue' diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.scss b/src/components/Riso_Home_Modern/Riso_Home_Modern.scss new file mode 100644 index 00000000..2512729d --- /dev/null +++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.scss @@ -0,0 +1,1495 @@ +// Spacing ridotto 40-50% +$s-xs: 4px; +$s-sm: 8px; +$s-md: 12px; +$s-lg: 16px; +$s-xl: 20px; + +$r-sm: 8px; +$r-md: 12px; +$r-lg: 16px; +$r-xl: 20px; + +// Gradienti +$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +$gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); +$gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); +$gradient-info: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); +$gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%); +$gradient-indigo: linear-gradient(135deg, #5a67d8 0%, #667eea 100%); +$gradient-red: linear-gradient(135deg, #f56565 0%, #ed64a6 100%); +$gradient-lime: linear-gradient(135deg, #84cc16 0%, #10b981 100%); +$gradient-teal: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); + +// Container principale +.riso-modern-home { + padding: $s-sm; + max-width: 1200px; + margin: 0 auto; + background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%); + min-height: 100vh; +} + +// ========== HERO CARDS ========== +.hero-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + margin-bottom: $s-lg; + + @media (min-width: 600px) { + grid-template-columns: repeat(4, 1fr); + } +} + +.hero-card { + background: $gradient-primary; + border-radius: $r-lg; + padding: $s-lg; + display: flex; + flex-direction: column; + align-items: center; + gap: $s-sm; + color: white; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + position: relative; + overflow: hidden; + min-height: 140px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.6s ease; + } + + &:hover::before { + left: 100%; + } + + &:hover { + transform: translateY(-4px) scale(1.02); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + } + + &:active { + transform: translateY(-2px) scale(1); + } + + .q-icon { + opacity: 0.95; + } + + .card-title { + font-size: 1.1rem; + font-weight: 700; + text-align: center; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + .card-subtitle { + font-size: 1rem; + opacity: 0.9; + text-align: center; + } + + &.gradient-success { + background: $gradient-success; + } + + &.gradient-accent { + background: $gradient-accent; + } + + &.gradient-info { + background: $gradient-info; + } + + &.gradient-orange { + background: $gradient-orange; + } +} + +// ========== SECTION TITLE ========== +.section-title { + font-size: 1.2rem; + font-weight: 700; + margin: 0; + display: flex; + align-items: center; + gap: $s-sm; + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + .q-icon { + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +.section-title-white { + font-size: 1.2rem; + font-weight: 700; + margin: 0; + display: flex; + align-items: center; + gap: $s-sm; + color: white; + + .q-icon { + color: white; + } +} + +.section-title-center { + font-size: 1.3rem; + font-weight: 700; + margin: 0 0 $s-lg 0; + display: flex; + align-items: center; + justify-content: center; + gap: $s-sm; + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + .q-icon { + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +// ========== QUICK ACTIONS ========== +.quick-actions-section { + background: white; + border-radius: $r-lg; + padding: $s-md; + margin-bottom: $s-lg; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + + .actions-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-sm; + margin-top: $s-md; + + @media (min-width: 600px) { + grid-template-columns: repeat(4, 1fr); + } + } + + .action-btn { + padding: $s-md $s-sm; + font-size: 1rem; + font-weight: 600; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + } + } +} + +// ========== STATS SECTION ========== +.stats-section { + background: white; + border-radius: $r-lg; + padding: $s-lg; + margin-bottom: $s-lg; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + + .stats-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: $s-md; + + @media (max-width: 599px) { + grid-template-columns: repeat(3, 1fr); + gap: $s-sm; + } + } +} + +// ========== WALLET SECTION ========== +.wallet-section { + margin-bottom: $s-lg; +} + +.wallet-card { + background: $gradient-primary; + border-radius: $r-lg; + padding: $s-lg; + color: white; + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); + + .wallet-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $s-lg; + } + + .wallet-balances { + margin-bottom: $s-lg; + + .balance-primary { + display: flex; + flex-direction: column; + gap: 4px; + margin-bottom: $s-md; + + .balance-label { + font-size: 0.95rem; + opacity: 0.9; + } + + .balance-value { + font-size: 2.8rem; + font-weight: 800; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + letter-spacing: -0.5px; + } + + .balance-hint { + font-size: 0.8rem; + opacity: 0.75; + font-style: italic; + } + } + + .balance-secondary { + display: flex; + align-items: baseline; + gap: $s-sm; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + padding: $s-sm $s-md; + border-radius: $r-sm; + + .balance-label-small { + font-size: 1rem; + opacity: 0.9; + } + + .balance-value-small { + font-size: 1.3rem; + font-weight: 700; + } + } + } + + .wallet-limits { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-sm; + margin-bottom: $s-lg; + + .limit-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + padding: $s-sm; + border-radius: $r-sm; + border: 2px solid rgba(255, 255, 255, 0.2); + + &.negative { + border-color: rgba(239, 68, 68, 0.4); + } + + &.positive { + border-color: rgba(16, 185, 129, 0.4); + } + + .q-icon { + opacity: 0.8; + } + + .limit-label { + font-size: 0.9rem; + opacity: 0.85; + text-align: center; + } + + .limit-value { + font-size: 1.1rem; + font-weight: 700; + } + } + } + + .wallet-stats { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + margin-bottom: $s-lg; + + .stat-item { + display: flex; + align-items: center; + gap: $s-sm; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + padding: $s-md; + border-radius: $r-md; + + .q-icon { + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + padding: $s-xs; + } + + .stat-content { + display: flex; + flex-direction: column; + gap: 2px; + + .stat-value { + font-size: 1.3rem; + font-weight: 700; + } + + .stat-label { + font-size: 0.8rem; + opacity: 0.9; + } + } + } + } + + .wallet-detail-btn { + width: 100%; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + color: white; + font-weight: 600; + + &:hover { + background: rgba(255, 255, 255, 0.3); + } + } +} + +// ========== CONTENT SECTION ========== +.content-section { + background: white; + border-radius: $r-lg; + padding: $s-md; + margin-bottom: $s-md; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); + } + + .section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $s-md; + padding-bottom: $s-sm; + border-bottom: 2px solid rgba(0, 0, 0, 0.05); + } +} + +// ========== EVENTS ========== +.events-scroll { + display: flex; + gap: $s-md; + overflow-x: auto; + padding-bottom: $s-sm; + scroll-behavior: smooth; + + &::-webkit-scrollbar { + height: 4px; + } + + &::-webkit-scrollbar-thumb { + background: $gradient-primary; + border-radius: 2px; + } +} + +.event-card { + display: flex; + align-items: center; + gap: $s-md; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); + border: 2px solid rgba(102, 126, 234, 0.2); + border-radius: $r-md; + padding: $s-md; + min-width: 280px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2); + border-color: rgba(102, 126, 234, 0.4); + } + + .event-date { + display: flex; + flex-direction: column; + align-items: center; + background: $gradient-primary; + color: white; + border-radius: $r-sm; + padding: $s-sm; + min-width: 50px; + + .event-day { + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + } + + .event-month { + font-size: 0.9rem; + font-weight: 600; + text-transform: uppercase; + } + } + + .event-info { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + + .event-title { + font-size: 1rem; + font-weight: 600; + color: #1a202c; + } + + .event-location { + font-size: 1rem; + color: #718096; + display: flex; + align-items: center; + gap: 4px; + + &::before { + content: '📍'; + } + } + } +} + +// ========== ACTIVITY ========== +.activity-list { + display: flex; + flex-direction: column; + gap: $s-sm; +} + +.activity-item { + display: flex; + align-items: center; + gap: $s-md; + padding: $s-md; + background: rgba(0, 0, 0, 0.02); + border-radius: $r-md; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + background: rgba(0, 0, 0, 0.05); + transform: translateX(4px); + } + + .activity-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; + + .activity-title { + font-size: 0.95rem; + font-weight: 600; + color: #1a202c; + } + + .activity-time { + font-size: 0.8rem; + color: #718096; + } + } + + .activity-amount { + font-size: 1rem; + font-weight: 700; + + .positive { + color: #10b981; + } + + .negative { + color: #ef4444; + } + } +} + +// ========== STATS ========== +.stat-card { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-xs; + padding: $s-lg; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); + border-radius: $r-md; + border: 2px solid rgba(102, 126, 234, 0.1); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); + } + + .stat-number { + font-size: 2rem; + font-weight: 800; + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + line-height: 1; + } + + .stat-text { + font-size: 1rem; + color: #718096; + font-weight: 600; + text-align: center; + } + + @media (max-width: 599px) { + padding: $s-md; + gap: 4px; + + .stat-number { + font-size: 1.6rem; + } + + .stat-text { + font-size: 0.9rem; + } + } +} + +// ========== COMMUNITY SECTION ========== +.community-section { + display: flex; + flex-direction: column; + gap: $s-md; + margin-bottom: $s-md; +} + +.community-card { + background: white; + border-radius: $r-lg; + padding: $s-md; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); + } + + .community-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: $s-md; + padding-bottom: $s-sm; + border-bottom: 2px solid rgba(0, 0, 0, 0.05); + } + + .community-title { + font-size: 1.1rem; + font-weight: 700; + margin: 0; + display: flex; + align-items: center; + gap: $s-sm; + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + + .q-icon { + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } +} + +// ========== ORGANIZATIONS ========== +.org-scroll { + display: flex; + gap: $s-md; + overflow-x: auto; + padding-bottom: $s-sm; + margin-bottom: $s-md; + scroll-behavior: smooth; + + &::-webkit-scrollbar { + height: 4px; + } + + &::-webkit-scrollbar-thumb { + background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%); + border-radius: 2px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + } +} + +.org-card-scroll { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-sm; + padding: $s-lg; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%); + border: 2px solid rgba(59, 130, 246, 0.2); + border-radius: $r-md; + cursor: pointer; + transition: all 0.3s ease; + min-width: 120px; + flex-shrink: 0; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2); + border-color: rgba(59, 130, 246, 0.4); + } + + .org-name { + font-size: 0.9rem; + font-weight: 600; + text-align: center; + color: #1a202c; + line-height: 1.2; + } + + .org-members { + font-size: 0.9rem; + color: #718096; + } +} + +.view-all-btn { + width: 100%; + margin-top: $s-sm; + font-weight: 600; +} + +// ========== TELEGRAM ========== +.telegram-grid-modern { + display: grid; + gap: $s-md; + + @media (max-width: 599px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 600px) and (max-width: 899px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 900px) { + grid-template-columns: repeat(3, 1fr); + } +} + +.telegram-card-modern { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-md; + background: linear-gradient(135deg, #0088cc 0%, #2babd9 100%); + border-radius: $r-lg; + padding: $s-xl; + transition: all 0.3s ease; + text-decoration: none; + box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3); + position: relative; + overflow: hidden; + min-height: 140px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.6s ease; + } + + &:hover::before { + left: 100%; + } + + &:hover { + transform: translateY(-4px) scale(1.02); + box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4); + } + + .telegram-icon-wrapper { + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); + border-radius: 50%; + padding: $s-lg; + display: flex; + align-items: center; + justify-content: center; + } + + .telegram-content-modern { + display: flex; + align-items: center; + justify-content: center; + gap: $s-sm; + width: 100%; + + .telegram-title { + font-weight: 700; + color: white; + font-size: 1rem; + text-align: center; + flex: 1; + } + + .q-icon { + color: white; + opacity: 0.9; + } + } +} + +// ========== FOOTER ========== +.footer-section { + display: flex; + justify-content: space-around; + padding: $s-lg; + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(10px); + border-radius: $r-lg; + gap: $s-sm; + margin-bottom: $s-xl; + + .footer-btn { + flex: 1; + font-weight: 600; + color: #667eea; + + &:hover { + background: rgba(102, 126, 234, 0.1); + } + } +} + +// ========== DIALOG ANNUNCI ========== +.annunci-dialog { + max-width: 500px; + width: 90vw; + + .dialog-header { + background: $gradient-primary; + color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: $s-lg; + + .dialog-title { + margin: 0; + font-size: 1.3rem; + font-weight: 700; + } + } + + .dialog-content { + padding: $s-lg; + } + + .annunci-options-mobile { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + } + + .annuncio-option { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-sm; + padding: $s-lg; + border-radius: $r-lg; + cursor: pointer; + transition: all 0.3s ease; + color: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + position: relative; + overflow: hidden; + min-height: 140px; + justify-content: center; + + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; + } + + &:hover::before { + left: 100%; + } + + &:hover { + transform: translateY(-4px) scale(1.02); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + } + + &:active { + transform: translateY(-2px) scale(1); + } + + .q-icon { + opacity: 0.95; + } + + .option-title { + font-size: 1.1rem; + font-weight: 700; + text-align: center; + line-height: 1.2; + } + + .option-subtitle { + font-size: 0.9rem; + opacity: 0.9; + text-align: center; + line-height: 1.3; + } + + &.gradient-indigo { + background: $gradient-indigo; + } + + &.gradient-red { + background: $gradient-red; + } + + &.gradient-lime { + background: $gradient-lime; + } + + &.gradient-teal { + background: $gradient-teal; + } + } + + @media (max-width: 599px) { + .annuncio-option { + padding: $s-md; + min-height: 130px; + + .q-icon { + font-size: 2rem !important; + } + + .option-title { + font-size: 1rem; + } + + .option-subtitle { + font-size: 0.7rem; + } + } + } +} + +// ========== ANIMATIONS ========== +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +section { + animation: fadeIn 0.5s ease-out; +} + +// ========== RESPONSIVE ========== +@media (max-width: 599px) { + .riso-modern-home { + padding: $s-xs; + } + + .hero-card { + min-height: 120px; + padding: $s-md; + + .card-title { + font-size: 1rem; + } + + .card-subtitle { + font-size: 0.9rem; + } + + .q-icon { + font-size: 2rem !important; + } + } + + .content-section { + padding: $s-sm; + } + + .section-title { + font-size: 1.1rem; + } + + .wallet-card { + .wallet-balances { + .balance-primary { + .balance-value { + font-size: 2.2rem; + } + } + + .balance-secondary { + .balance-value-small { + font-size: 1.1rem; + } + } + } + + .wallet-limits { + .limit-item { + padding: $s-xs; + + .limit-label { + font-size: 0.7rem; + } + + .limit-value { + font-size: 1rem; + } + } + } + } +} + + +// Azioni RIS +.ris-actions-section { + margin-bottom: $s-lg; +} + +.ris-actions-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; +} + +.ris-action-btn { + padding: $s-lg; + font-size: 1rem; + font-weight: 700; + transition: all 0.3s ease; + min-height: 60px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + } + + &.send-btn { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; + } + + &.receive-btn { + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + color: white; + } +} + +// Community Actions +.community-actions-section { + background: white; + border-radius: $r-lg; + padding: $s-md; + margin-bottom: $s-lg; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +.community-actions-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + margin-top: $s-md; +} + +.community-action-btn { + padding: $s-lg $s-md; + font-size: 0.95rem; + font-weight: 600; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + } +} + +// Wallet rivisitato +.wallet-activity-focus { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border-radius: $r-md; + padding: $s-lg; + margin-bottom: $s-lg; + + .activity-message { + display: flex; + align-items: center; + gap: $s-md; + margin-bottom: $s-md; + + .activity-text { + font-size: 1rem; + font-weight: 600; + line-height: 1.4; + } + } + + .last-trade { + display: flex; + align-items: center; + gap: $s-sm; + font-size: 0.9rem; + opacity: 0.9; + } +} + +.wallet-transactions { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: $s-sm; + margin-bottom: $s-lg; + + @media (max-width: 599px) { + grid-template-columns: repeat(2, 1fr); + } + + .transaction-stat { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + padding: $s-md; + border-radius: $r-sm; + border: 2px solid rgba(255, 255, 255, 0.2); + + &.total { + border-color: rgba(255, 255, 255, 0.4); + } + + .stat-number { + font-size: 1.5rem; + font-weight: 800; + line-height: 1; + } + + .stat-label { + font-size: 0.9rem; + opacity: 0.9; + text-align: center; + } + + .q-icon { + opacity: 0.8; + margin-bottom: 2px; + } + } +} + +.wallet-balances-compact { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + border-radius: $r-sm; + padding: $s-md; + margin-bottom: $s-lg; + + .balance-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 0; + + .balance-label-compact { + font-size: 1rem; + opacity: 0.9; + } + + .balance-value-compact { + font-size: 1.1rem; + font-weight: 700; + + &.positive { + color: #d1fae5; + } + } + } + + .balance-limits-compact { + display: flex; + justify-content: space-between; + margin-top: $s-sm; + padding-top: $s-sm; + border-top: 1px solid rgba(255, 255, 255, 0.2); + + .limit-compact { + font-size: 0.8rem; + opacity: 0.85; + + &.negative { + color: #fecaca; + } + + &.positive { + color: #d1fae5; + } + } + } +} + +// Eventi con immagine +.event-card { + position: relative; + + .event-image { + width: 80px; + height: 80px; + border-radius: $r-sm; + flex-shrink: 0; + } + + .event-image-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); + } + + .event-date { + position: absolute; + top: $s-sm; + left: $s-sm; + z-index: 1; + } +} + +// Telegram con immagini +.telegram-card-modern { + min-height: 180px; + + .telegram-card-image { + width: 100%; + height: 120px; + border-radius: $r-md $r-md 0 0; + position: relative; + } + + .telegram-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 136, 204, 0.7); + backdrop-filter: blur(2px); + } +} + +// Footer moderno più visibile +.footer-section-modern { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: $s-md; + padding: $s-lg $s-sm; + margin-bottom: $s-xl; + + @media (max-width: 599px) { + grid-template-columns: 1fr; + } + + .footer-btn-modern { + padding: $s-lg; + font-size: 0.95rem; + font-weight: 700; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + } + } +} + +// Selettore circuito +.circuit-selector { + margin-bottom: $s-lg; + + .circuit-toggle { + width: 100%; + + :deep(.q-btn) { + background: rgba(255, 255, 255, 0.2); + color: white; + font-weight: 600; + + &.q-btn--active { + background: white; + } + } + } +} + +// Overview saldi circuiti +.circuits-balance-overview { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-sm; + margin-bottom: $s-lg; + + .circuit-balance-mini { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + border-radius: $r-sm; + padding: 0px; + border: 1px solid rgba(255, 255, 255, 0.2); + + .circuit-name { + display: block; + font-size: 0.9rem; + font-weight: bold; + opacity: 0.9; + margin-bottom: 4px; + font-weight: 600; + } + + .balance-mini-row { + display: flex; + flex-direction: column; + gap: 2px; + font-size: 0.8rem; + + strong { + font-weight: 700; + } + } + } +} + +// Transazioni recenti +.recent-transactions { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(5px); + border-radius: $r-md; + padding: $s-md; + margin-bottom: $s-lg; + + .transactions-title { + margin: 0 0 $s-md 0; + font-size: 0.95rem; + font-weight: 700; + opacity: 0.95; + } + + .transaction-list { + display: flex; + flex-direction: column; + gap: $s-sm; + } + + .transaction-item { + display: flex; + align-items: center; + gap: $s-sm; + background: rgba(255, 255, 255, 0.1); + padding: $s-sm; + border-radius: $r-sm; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateX(4px); + } + + .transaction-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; + + .transaction-desc { + font-size: 1rem; + font-weight: 600; + } + + .transaction-time { + font-size: 0.9rem; + opacity: 0.8; + } + } + + .transaction-amount { + font-size: 0.95rem; + font-weight: 700; + + &.positive { + color: #d1fae5; + } + + &.negative { + color: #fecaca; + } + } + } +} + +// Banner inviti +.invite-banner { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%); + border: 2px solid rgba(16, 185, 129, 0.3); + border-radius: $r-md; + padding: $s-md; + margin-bottom: $s-md; + + .invite-message { + display: flex; + gap: $s-md; + align-items: flex-start; + + .invite-text { + display: flex; + flex-direction: column; + gap: 4px; + + .invite-main { + font-size: 0.9rem; + font-weight: 600; + line-height: 1.4; + } + + .invite-count { + font-size: 0.8rem; + color: #059669; + + strong { + font-weight: 700; + } + } + } + } +} + +// Circuiti overview +.circuits-overview-section { + background: white; + border-radius: $r-lg; + padding: $s-md; + margin-bottom: $s-md; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + + .circuits-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + margin: $s-md 0; + } + + .circuit-info-card { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-xs; + padding: $s-lg; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); + border-radius: $r-md; + border: 2px solid rgba(102, 126, 234, 0.1); + + .circuit-stat-number { + font-size: 2rem; + font-weight: 800; + background: $gradient-primary; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + line-height: 1; + } + + .circuit-stat-label { + font-size: 1rem; + color: #718096; + font-weight: 600; + text-align: center; + } + } +} + +// Strette di mano +.handshake-avatars { + position: relative; + display: flex; + width: 48px; + + .avatar-overlap { + position: absolute; + left: 16px; + } +} \ No newline at end of file diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.ts b/src/components/Riso_Home_Modern/Riso_Home_Modern.ts new file mode 100644 index 00000000..9c7ce81f --- /dev/null +++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.ts @@ -0,0 +1,588 @@ +import { defineComponent, ref, computed } from 'vue'; +import { useRouter } from 'vue-router'; +import { CRISBalanceBar } from '@src/components/CRISBalanceBar'; + +const isTest = true; // Cambia a false in produzione + +export default defineComponent({ + name: 'RisoHomeModern', + components: { CRISBalanceBar }, + setup() { + const $router = useRouter(); + + // State + const showAnnunciDialog = ref(false); + + const selectedCircuit = ref<'provinciale' | 'italia'>('provinciale'); + const handshakesView = ref<'mine' | 'all'>('mine'); + + // Dati wallet (da collegare allo store) + const availableBalance = ref(0); // Saldo utilizzabile (include fido) + const realBalance = ref(0); // Saldo reale effettivo + const trustLimit = ref(-100); // Fido concesso (negativo) + const maxAccumulation = ref(200); // Massimo accumulo + const receivedCount = ref(0); + const sentCount = ref(0); + + // Dati eventi (da collegare allo store) + const upcomingEventsCount = ref(0); + const recentEvents = ref([ + // Esempio struttura: + // { day: '15', month: 'DIC', title: 'Mercatino', location: 'Roma' } + ]); + + // Dati attività (da collegare allo store) + const recentTrades = ref([ + // Esempio struttura: + // { userInitial: 'M', description: 'Scambio completato', time: '2h fa', amount: 50 } + ]); + + const recentConnections = ref([ + // Esempio struttura: + // { userInitial: 'A', name: 'Mario Rossi', time: '1 giorno fa' } + ]); + + // Stats + const totalMembers = ref(0); + const totalTrades = ref(0); + const totalEvents = ref(0); + + const totalTransactions = ref(0); + const uniqueMembers = ref(0); + const lastTradeTime = ref('Mai'); + + // Organizzazioni + const organizations = ref([ + // Esempio struttura: + // { initial: 'AS', name: 'Associazione Locale', membersCount: 45 } + ]); + + // Telegram + const telegramLinks = ref([ + // Esempio struttura: + // { title: 'Canale Principale', url: 'https://t.me/...', image: '/path/to/img' } + ]); + + // Computed + const hasEvents = computed(() => recentEvents.value.length > 0); + const hasOrganizations = computed(() => organizations.value.length > 0); + const hasTelegramLinks = computed(() => telegramLinks.value.length > 0); + + // ========== METODI DA IMPLEMENTARE ========== + + // 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') + }; + + const goToServices = () => { + showAnnunciDialog.value = false; + // TODO: navigare a /services + // $router.push('/services') + }; + + const goToHospitality = () => { + showAnnunciDialog.value = false; + // TODO: navigare a /hosps + // $router.push('/hosps') + }; + + const goToTransport = () => { + showAnnunciDialog.value = false; + // TODO: navigare a /transport (da creare?) + // $router.push('/transport') + }; + + // Hero Cards + const goToWallet = () => { + // TODO: navigare al portafoglio dettagliato + // $router.push('/wallet') + }; + + const goToCircuits = () => { + // TODO: navigare ai circuiti RIS + // $router.push('/circuits') + }; + + const goToEvents = () => { + // TODO: navigare alla lista eventi + // $router.push('/events') + }; + + const goToProfile = () => { + // TODO: navigare al profilo utente + // $router.push('/profile') + }; + + // Azioni Rapide + const sendRIS = () => { + // TODO: aprire dialog/pagina invio RIS + }; + + const receiveRIS = () => { + // TODO: aprire dialog/pagina ricezione RIS + }; + + const inviteFriend = () => { + // TODO: aprire dialog/pagina invito amico + }; + + const showMembers = () => { + // TODO: navigare alla lista iscritti + // $router.push('/members') + }; + + // Wallet + const refreshWallet = () => { + // TODO: ricaricare dati wallet dallo store/API + }; + + const goToTransactions = () => { + // TODO: navigare alla lista transazioni + // $router.push('/transactions') + }; + + // Eventi + const goToAllEvents = () => { + // TODO: navigare a tutti gli eventi + // $router.push('/events') + }; + + const openEvent = (event: any) => { + // TODO: aprire dettaglio evento + // $router.push(`/events/${event.id}`) + }; + + // Community + const openTrade = (trade: any) => { + // TODO: aprire dettaglio scambio + }; + + const openConnection = (connection: any) => { + // TODO: aprire profilo utente connesso + }; + + const goToAllTrades = () => { + // TODO: navigare a lista completa scambi + // $router.push('/trades') + }; + + const goToAllConnections = () => { + // TODO: navigare a lista completa connessioni + // $router.push('/connections') + }; + + // Organizzazioni + const createOrganization = () => { + // TODO: aprire form creazione organizzazione + }; + + const openOrganization = (org: any) => { + // TODO: aprire dettaglio organizzazione + // $router.push(`/groups/${org.id}`) + }; + + const goToAllOrganizations = () => { + // TODO: navigare a lista completa organizzazioni + // $router.push('/groups') + }; + + // Footer + const openFAQ = () => { + // TODO: navigare a FAQ + // $router.push('/faq') + }; + + const openGuide = () => { + // TODO: navigare a guida + // $router.push('/guide') + }; + + const openInfo = () => { + // TODO: navigare a info + // $router.push('/info') + }; + + const loadTestData = () => { + if (!isTest) return; + + // Circuito Provinciale + circuits.value.provinciale = { + title: 'RIS Provinciale', + availableBalance: 50, + realBalance: -50, + trustLimit: -100, + maxAccumulation: 200, + totalTransactions: 15, + sentCount: 8, + receivedCount: 7, + uniqueMembers: 12, + lastTradeTime: '2 giorni fa', + recentTransactions: [ + { userInitial: 'M', description: 'Ortaggi freschi', time: '2h fa', amount: 15 }, + { + userInitial: 'L', + description: 'Lezione chitarra', + time: '5h fa', + amount: -25, + }, + { + userInitial: 'G', + description: 'Riparazione bici', + time: '1 giorno fa', + amount: 30, + }, + ], + }; + + // Circuito Italia + circuits.value.italia = { + title: 'RIS Italia', + availableBalance: -50, + realBalance: 150, + trustLimit: -200, + maxAccumulation: 400, + totalTransactions: 8, + sentCount: 3, + receivedCount: 5, + uniqueMembers: 7, + lastTradeTime: '5 giorni fa', + recentTransactions: [ + { + userInitial: 'A', + description: 'Consulenza legale', + time: '3 giorni fa', + amount: -80, + }, + { + userInitial: 'F', + description: 'Prodotti artigianali', + time: '4 giorni fa', + amount: 50, + }, + { + userInitial: 'S', + description: 'Corso di cucina', + time: '5 giorni fa', + amount: -40, + }, + ], + }; + + // Community + invitesSent.value = 7; + + myHandshakes.value = [ + { userInitial: 'M', name: 'Mario Rossi', time: '2 giorni fa' }, + { userInitial: 'L', name: 'Laura Bianchi', time: '3 giorni fa' }, + { userInitial: 'G', name: 'Giovanni Verdi', time: '1 settimana fa' }, + { userInitial: 'C', name: 'Chiara Neri', time: '2 settimane fa' }, + { userInitial: 'P', name: 'Paolo Conti', time: '3 settimane fa' }, + ]; + + allHandshakes.value = [ + { + user1Initial: 'A', + user2Initial: 'B', + user1Name: 'Anna', + user2Name: 'Bruno', + time: '1h fa', + }, + { + user1Initial: 'C', + user2Initial: 'D', + user1Name: 'Carlo', + user2Name: 'Diana', + time: '3h fa', + }, + { + user1Initial: 'E', + user2Initial: 'F', + user1Name: 'Elena', + user2Name: 'Franco', + time: '5h fa', + }, + { + user1Initial: 'G', + user2Initial: 'H', + user1Name: 'Giulia', + user2Name: 'Hugo', + time: '1 giorno fa', + }, + { + user1Initial: 'I', + user2Initial: 'L', + user1Name: 'Irene', + user2Name: 'Luca', + time: '2 giorni fa', + }, + ]; + + // Eventi test data con immagini + upcomingEventsCount.value = 7; + recentEvents.value = [ + { + day: '15', + month: 'DIC', + title: 'Mercatino di Natale', + location: 'Roma Centro', + id: 1, + image: '', + }, + { + day: '20', + month: 'DIC', + title: 'Corso di Panificazione', + location: 'Milano', + id: 2, + image: '', + }, + { + day: '22', + month: 'DIC', + title: 'Scambio Semi e Piante', + location: 'Bologna', + id: 3, + image: '', + }, + { + day: '28', + month: 'DIC', + title: 'Incontro Produttori Locali', + location: 'Firenze', + id: 4, + image: '', + }, + { + day: '05', + month: 'GEN', + title: 'Festa della Comunità', + location: 'Torino', + id: 5, + image: '', + }, + ]; + + // Scambi test data + recentTrades.value = [ + { + userInitial: 'M', + description: 'Scambio ortaggi freschi', + time: '2h fa', + amount: 15, + }, + { + userInitial: 'L', + description: 'Lezione di chitarra', + time: '5h fa', + amount: -25, + }, + { + userInitial: 'G', + description: 'Riparazione bicicletta', + time: '1 giorno fa', + amount: 30, + }, + { + userInitial: 'A', + description: 'Pane fatto in casa', + time: '2 giorni fa', + amount: -10, + }, + { + userInitial: 'S', + description: 'Consulenza informatica', + time: '3 giorni fa', + amount: 40, + }, + ]; + + // Statistiche test data + totalMembers.value = 342; + totalTrades.value = 1567; + totalEvents.value = 89; + + // Organizzazioni test data + organizations.value = [ + { initial: 'AS', name: 'Associazione Scambio Locale', membersCount: 45, id: 1 }, + { initial: 'GP', name: 'Gruppo Produttori Bio', membersCount: 32, id: 2 }, + { initial: 'CE', name: 'Comunità Energetica', membersCount: 28, id: 3 }, + { initial: 'RT', name: 'Rete Tempo', membersCount: 56, id: 4 }, + { initial: 'OC', name: 'Orto Condiviso', membersCount: 23, id: 5 }, + { initial: 'LB', name: 'La Banca del Tempo', membersCount: 41, id: 6 }, + { initial: 'MP', name: 'Mercato Popolare', membersCount: 38, id: 7 }, + { initial: 'CC', name: 'Casa Comune', membersCount: 19, id: 8 }, + { initial: 'SF', name: 'Sharing Food', membersCount: 27, id: 9 }, + { initial: 'EA', name: 'Economia Alternativa', membersCount: 34, id: 10 }, + ]; + + // Telegram test data con immagini + telegramLinks.value = [ + { + title: 'Canale Principale RISO', + url: 'https://t.me/riso_italia', + image: '/images/telegram-main.jpg', + }, + { + title: 'Gruppo Scambi Locali', + url: 'https://t.me/riso_scambi', + image: '/images/telegram-scambi.jpg', + }, + { + title: 'Eventi e Incontri', + url: 'https://t.me/riso_eventi', + image: '/images/telegram-eventi.jpg', + }, + ]; + }; + + // Dati circuiti + const circuits = ref({ + provinciale: { + availableBalance: 0, + realBalance: 0, + trustLimit: -100, + maxAccumulation: 200, + totalTransactions: 0, + sentCount: 0, + receivedCount: 0, + uniqueMembers: 0, + lastTradeTime: 'Mai', + recentTransactions: [] as any[], + title: 'RIS Provinciale', + }, + italia: { + availableBalance: 0, + realBalance: 0, + trustLimit: -200, + maxAccumulation: 400, + totalTransactions: 0, + sentCount: 0, + receivedCount: 0, + uniqueMembers: 0, + lastTradeTime: 'Mai', + recentTransactions: [] as any[], + title: 'RIS Italia', + }, + }); + + // Dati community + const invitesSent = ref(0); + const myHandshakes = ref([]); + const allHandshakes = ref([]); + + // Circuiti overview + const activeCircuitsCount = ref(2); + const totalCircuitsAvailable = ref(12); + + // Computed per circuito corrente + const currentCircuitData = computed(() => { + return circuits.value[selectedCircuit.value]; + }); + + // Metodi + const openTransaction = (tx: any) => { + // TODO: aprire dettaglio transazione + }; + + const openHandshake = (handshake: any) => { + // TODO: aprire dettaglio stretta di mano + }; + + const goToAllCircuits = () => { + // TODO: navigare a lista circuiti + // $router.push('/circuits') + }; + + loadTestData(); + + // ========== LIFECYCLE (da implementare) ========== + // onMounted(() => { + // loadWalletData() + // loadRecentEvents() + // loadRecentActivity() + // loadStats() + // loadOrganizations() + // loadTelegramLinks() + // }) + + return { + // State + showAnnunciDialog, + + // Data + availableBalance, + realBalance, + trustLimit, + maxAccumulation, + receivedCount, + sentCount, + upcomingEventsCount, + recentEvents, + recentTrades, + recentConnections, + totalMembers, + totalTrades, + totalEvents, + organizations, + telegramLinks, + + // Computed + hasEvents, + hasOrganizations, + hasTelegramLinks, + + // Methods + openAnnunciDialog, + goToGoods, + goToServices, + goToHospitality, + goToTransport, + goToWallet, + goToEvents, + goToProfile, + sendRIS, + receiveRIS, + inviteFriend, + showMembers, + refreshWallet, + goToTransactions, + goToAllEvents, + openEvent, + openTrade, + openConnection, + goToAllTrades, + goToAllConnections, + createOrganization, + openOrganization, + goToAllOrganizations, + openFAQ, + openGuide, + openInfo, + totalTransactions, + uniqueMembers, + lastTradeTime, + goToCircuits, + selectedCircuit, + handshakesView, + circuits, + currentCircuitData, + invitesSent, + myHandshakes, + allHandshakes, + activeCircuitsCount, + totalCircuitsAvailable, + openTransaction, + openHandshake, + goToAllCircuits, + }; + }, +}); diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.vue b/src/components/Riso_Home_Modern/Riso_Home_Modern.vue new file mode 100644 index 00000000..1ee7cfe4 --- /dev/null +++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.vue @@ -0,0 +1,768 @@ + + + + + diff --git a/src/components/Riso_Home_Modern/index.ts b/src/components/Riso_Home_Modern/index.ts new file mode 100644 index 00000000..264d3358 --- /dev/null +++ b/src/components/Riso_Home_Modern/index.ts @@ -0,0 +1 @@ +export {default as Riso_Home_Modern} from './Riso_Home_Modern.vue' diff --git a/src/components/index.ts b/src/components/index.ts index 7c1d95ae..9a0b55d3 100755 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -74,3 +74,4 @@ export * from './CCurrencyValue' export * from './CNotifAtTop' export * from './CShowContentPage' export * from './CCheckIfIsLogged' +export * from './CRISBalanceBar'