804 lines
16 KiB
Vue
804 lines
16 KiB
Vue
<template>
|
|
<div class="glass-dashboard">
|
|
<!-- Ultra-Modern Hero Header -->
|
|
<div class="hero-header">
|
|
<!-- Animated background -->
|
|
<div class="hero-gradient"></div>
|
|
<div class="hero-overlay"></div>
|
|
|
|
<!-- Floating elements -->
|
|
<div class="floating-orb orb-1"></div>
|
|
<div class="floating-orb orb-2"></div>
|
|
<div class="floating-orb orb-3"></div>
|
|
|
|
<!-- Mesh gradient overlay -->
|
|
<div class="mesh-overlay"></div>
|
|
|
|
<div class="hero-content">
|
|
<div class="hero-inner">
|
|
<!-- User Info -->
|
|
<div class="user-section">
|
|
<div class="avatar-wrapper">
|
|
<!-- Avatar glow -->
|
|
<div class="avatar-glow"></div>
|
|
|
|
<div class="avatar-container">
|
|
<div class="avatar">
|
|
<span class="avatar-text">JD</span>
|
|
</div>
|
|
|
|
<!-- Status indicator -->
|
|
<div class="status-indicator">
|
|
<div class="status-dot"></div>
|
|
</div>
|
|
|
|
<!-- Crown icon -->
|
|
<div class="crown-badge">
|
|
👑
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-info">
|
|
<h1 class="welcome-title">
|
|
Welcome back,
|
|
<span class="name-gradient">Board Member!</span>
|
|
</h1>
|
|
|
|
<div class="user-meta">
|
|
<div class="role-badge">
|
|
<span class="sparkle">✨</span>
|
|
<span class="role-text">Administrator</span>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<span class="org-name">MonacoUSA Association</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date & Quick Actions -->
|
|
<div class="actions-section">
|
|
<!-- Date Card -->
|
|
<div class="date-card">
|
|
<div class="date-header">
|
|
<span class="calendar-icon">📅</span>
|
|
<p class="date-label">Today</p>
|
|
</div>
|
|
<p class="date-text">
|
|
{{ currentDate }}
|
|
</p>
|
|
<div class="date-progress">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="quick-actions">
|
|
<button class="action-btn action-alerts">
|
|
<span class="action-icon">🔔</span>
|
|
<span class="action-text">Alerts</span>
|
|
</button>
|
|
|
|
<button class="action-btn action-primary">
|
|
<span class="action-icon">✨</span>
|
|
<span class="action-text">Quick Add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative line -->
|
|
<div class="hero-divider"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Grid -->
|
|
<div class="stats-section">
|
|
<div class="stats-grid">
|
|
<div v-for="stat in stats" :key="stat.label" class="stat-card">
|
|
<div class="stat-icon">{{ stat.icon }}</div>
|
|
<div class="stat-content">
|
|
<p class="stat-label">{{ stat.label }}</p>
|
|
<p class="stat-value">
|
|
{{ stat.prefix }}{{ stat.value.toLocaleString() }}{{ stat.suffix }}
|
|
</p>
|
|
<p v-if="stat.change" class="stat-change">
|
|
{{ stat.change }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dues Management Section -->
|
|
<div class="dues-section">
|
|
<h2 class="section-title">Member Dues Overview</h2>
|
|
|
|
<div class="dues-grid">
|
|
<div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
|
|
<div class="member-header">
|
|
<div class="member-avatar">
|
|
<span>{{ member.initials }}</span>
|
|
</div>
|
|
<div class="member-details">
|
|
<h3 class="member-name">{{ member.name }}</h3>
|
|
<p class="member-id">Member #{{ member.id }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dues-info">
|
|
<span class="dues-label">Amount Due</span>
|
|
<span class="dues-amount">${{ member.dueAmount }}</span>
|
|
</div>
|
|
|
|
<button class="btn-pay">
|
|
Mark Paid
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view-all-container">
|
|
<button class="btn-view-all">
|
|
View All Members →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
layout: 'board',
|
|
middleware: 'board-auth'
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
// Current date
|
|
const currentDate = computed(() => {
|
|
return new Date().toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
})
|
|
|
|
// Statistics data
|
|
const stats = ref([
|
|
{
|
|
icon: '👥',
|
|
label: 'TOTAL MEMBERS',
|
|
value: 1234,
|
|
change: '+12%',
|
|
},
|
|
{
|
|
icon: '💰',
|
|
label: 'DUES COLLECTED',
|
|
value: 45678,
|
|
prefix: '$',
|
|
change: '+8%',
|
|
},
|
|
{
|
|
icon: '📅',
|
|
label: 'UPCOMING EVENTS',
|
|
value: 5,
|
|
change: '2 this week',
|
|
},
|
|
{
|
|
icon: '📈',
|
|
label: 'GROWTH RATE',
|
|
value: 23,
|
|
suffix: '%',
|
|
change: '+3%',
|
|
}
|
|
])
|
|
|
|
// Sample dues members data
|
|
const visibleDuesMembers = ref([
|
|
{
|
|
id: 1,
|
|
name: 'John Smith',
|
|
initials: 'JS',
|
|
dueAmount: 250,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Marie Dubois',
|
|
initials: 'MD',
|
|
dueAmount: 250,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Alessandro Rossi',
|
|
initials: 'AR',
|
|
dueAmount: 250,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Emma Wilson',
|
|
initials: 'EW',
|
|
dueAmount: 250,
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Simplified Animations */
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
/* Base Styles */
|
|
.glass-dashboard {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
}
|
|
|
|
/* Hero Header */
|
|
.hero-header {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero-gradient {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
|
|
}
|
|
|
|
/* Floating Orbs */
|
|
.floating-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
filter: blur(20px);
|
|
}
|
|
|
|
.orb-1 {
|
|
top: 40px;
|
|
right: 80px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: rgba(220, 38, 38, 0.05);
|
|
}
|
|
|
|
.orb-2 {
|
|
bottom: 40px;
|
|
left: 80px;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: rgba(220, 38, 38, 0.03);
|
|
}
|
|
|
|
.orb-3 {
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: rgba(220, 38, 38, 0.02);
|
|
}
|
|
|
|
.mesh-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
padding: 3rem;
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.hero-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.hero-inner {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* User Section */
|
|
.user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
animation: fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
position: relative;
|
|
group: true;
|
|
}
|
|
|
|
.avatar-glow {
|
|
position: absolute;
|
|
inset: -4px;
|
|
background: rgba(220, 38, 38, 0.1);
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.avatar-wrapper:hover .avatar-glow {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, #ffffff, #f8f9fa);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 0 0 4px rgba(255,255,255,0.4),
|
|
0 10px 40px rgba(0,0,0,0.2);
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.avatar:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.status-indicator {
|
|
position: absolute;
|
|
bottom: -8px;
|
|
right: -8px;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
border-radius: 50%;
|
|
border: 4px solid white;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
animation: pulse-slow 2s infinite;
|
|
}
|
|
|
|
.crown-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
right: -4px;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
animation: bounce-slow 3s infinite;
|
|
}
|
|
|
|
/* User Info */
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #27272a;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.name-gradient {
|
|
display: block;
|
|
color: #dc2626;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.user-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.role-badge {
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(4px);
|
|
border-radius: 9999px;
|
|
padding: 0.75rem 1.5rem;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.sparkle {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.role-text {
|
|
color: #27272a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.divider {
|
|
height: 1.5rem;
|
|
width: 1px;
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.org-name {
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Actions Section */
|
|
.actions-section {
|
|
animation: fade-in 0.3s ease-out;
|
|
animation-delay: 100ms;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.date-card {
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(2px);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
transition: all 0.3s;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.date-card:hover {
|
|
background: rgba(255,255,255,0.8);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.date-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.calendar-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.date-label {
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.date-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #27272a;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.date-progress {
|
|
margin-top: 0.75rem;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 9999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
width: 75%;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
|
|
border-radius: 9999px;
|
|
animation: pulse-slow 2s infinite;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-alerts {
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(2px);
|
|
color: #27272a;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.action-alerts:hover {
|
|
background: rgba(255,255,255,0.8);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.action-primary {
|
|
background: #dc2626;
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
|
|
}
|
|
|
|
.action-primary:hover {
|
|
background: #b91c1c;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.action-icon {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hero-divider {
|
|
margin-top: 2rem;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats-section {
|
|
padding: 0 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 1.5rem;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
border: 1px solid rgba(220, 38, 38, 0.1);
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.875rem;
|
|
font-weight: 900;
|
|
color: #1f2937;
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 0.875rem;
|
|
color: #10b981;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Dues Section */
|
|
.dues-section {
|
|
padding: 0 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dues-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dues-card {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.dues-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.member-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.member-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, #e5e7eb, #d1d5db);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.member-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.member-name {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.member-id {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.dues-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding: 0.75rem;
|
|
background: #f9fafb;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.dues-label {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.dues-amount {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.btn-pay {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
color: #dc2626;
|
|
font-weight: 600;
|
|
border: 1px solid rgba(220, 38, 38, 0.2);
|
|
border-radius: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-pay:hover {
|
|
background: #dc2626;
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.view-all-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-view-all {
|
|
padding: 0.875rem 2rem;
|
|
background: white;
|
|
color: #dc2626;
|
|
font-weight: 600;
|
|
border: 2px solid #dc2626;
|
|
border-radius: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-view-all:hover {
|
|
background: #dc2626;
|
|
color: white;
|
|
transform: translateX(4px);
|
|
}
|
|
</style> |