Implement bright glassmorphic UI redesign for Board dashboard
Build And Push Image / docker (push) Failing after 1m11s
Details
Build And Push Image / docker (push) Failing after 1m11s
Details
- Add Tailwind CSS configuration with bright glass utilities
- Create glass components (Sidebar, StatCard, DuesCard) with Lucide icons
- Implement new dashboard with limited dues display (4 cards max vs 30+)
- Use translucent white glass effects with Monaco red accents
- Improve visual hierarchy and reduce UI clutter
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
5e5bcdfb4f
commit
a0d703e7cb
|
|
@ -0,0 +1,291 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Base layer overrides */
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gradient-light min-h-screen antialiased;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* Typography defaults */
|
||||
h1 {
|
||||
@apply text-4xl font-bold text-gray-800;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl font-bold text-gray-800;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl font-semibold text-gray-700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl font-semibold text-gray-700;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
/* Component layer */
|
||||
@layer components {
|
||||
/* Bright Glass Card Variants */
|
||||
.glass-card-bright {
|
||||
@apply glass rounded-glass p-6 transition-all duration-300;
|
||||
}
|
||||
|
||||
.glass-card-ultra {
|
||||
@apply glass-ultra rounded-glass p-6 transition-all duration-300;
|
||||
}
|
||||
|
||||
.glass-card-monaco {
|
||||
@apply glass-monaco rounded-glass p-6 transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Glass Stat Card */
|
||||
.glass-stat-card {
|
||||
@apply glass-light rounded-glass p-6 hover:glass-ultra transition-all duration-300 hover:-translate-y-1 hover:shadow-glass-lg;
|
||||
}
|
||||
|
||||
.glass-stat-icon {
|
||||
@apply w-12 h-12 rounded-xl bg-glass-monaco-soft flex items-center justify-center mb-4;
|
||||
}
|
||||
|
||||
.glass-stat-value {
|
||||
@apply text-3xl font-bold text-gray-800 mb-1;
|
||||
}
|
||||
|
||||
.glass-stat-label {
|
||||
@apply text-sm text-gray-600 uppercase tracking-wide;
|
||||
}
|
||||
|
||||
/* Glass Dues Card */
|
||||
.glass-dues-card {
|
||||
@apply glass rounded-glass p-4 hover:shadow-glass-lg transition-all duration-300;
|
||||
}
|
||||
|
||||
.glass-dues-header {
|
||||
@apply flex items-center justify-between mb-3;
|
||||
}
|
||||
|
||||
.glass-dues-avatar {
|
||||
@apply w-10 h-10 rounded-full ring-2 ring-white/60;
|
||||
}
|
||||
|
||||
.glass-dues-name {
|
||||
@apply font-semibold text-gray-800;
|
||||
}
|
||||
|
||||
.glass-dues-amount {
|
||||
@apply text-lg font-bold text-monaco-600;
|
||||
}
|
||||
|
||||
.glass-dues-status {
|
||||
@apply px-3 py-1 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.glass-dues-status-overdue {
|
||||
@apply bg-red-100 text-red-700;
|
||||
}
|
||||
|
||||
.glass-dues-status-upcoming {
|
||||
@apply bg-amber-100 text-amber-700;
|
||||
}
|
||||
|
||||
/* Glass Button Variants */
|
||||
.btn-glass {
|
||||
@apply glass-button px-6 py-2.5 rounded-xl font-medium text-gray-700 hover:text-monaco-600;
|
||||
}
|
||||
|
||||
.btn-glass-primary {
|
||||
@apply bg-gradient-monaco text-white px-6 py-2.5 rounded-xl font-medium shadow-monaco-sm hover:shadow-monaco transition-all duration-300 hover:-translate-y-0.5;
|
||||
}
|
||||
|
||||
.btn-glass-secondary {
|
||||
@apply glass px-6 py-2.5 rounded-xl font-medium text-monaco-600 border-monaco-200 hover:bg-glass-monaco-soft;
|
||||
}
|
||||
|
||||
.btn-glass-ghost {
|
||||
@apply bg-transparent border-2 border-monaco-600 text-monaco-600 px-6 py-2.5 rounded-xl font-medium hover:bg-glass-monaco-soft transition-all duration-300;
|
||||
}
|
||||
|
||||
/* Glass Navigation Items */
|
||||
.nav-item-glass {
|
||||
@apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-glass-monaco-soft hover:text-monaco-600 hover:translate-x-0.5;
|
||||
}
|
||||
|
||||
.nav-item-glass-active {
|
||||
@apply flex items-center gap-3 px-4 py-3 rounded-xl bg-glass-monaco text-monaco-600 font-medium relative;
|
||||
}
|
||||
|
||||
.nav-item-indicator {
|
||||
@apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-monaco rounded-r-full;
|
||||
}
|
||||
|
||||
/* Glass Input Fields */
|
||||
.input-glass {
|
||||
@apply glass-input px-4 py-3 rounded-xl w-full;
|
||||
}
|
||||
|
||||
.select-glass {
|
||||
@apply glass-input px-4 py-3 rounded-xl w-full appearance-none cursor-pointer;
|
||||
}
|
||||
|
||||
.textarea-glass {
|
||||
@apply glass-input px-4 py-3 rounded-xl w-full resize-none;
|
||||
}
|
||||
|
||||
/* Glass Table */
|
||||
.table-glass {
|
||||
@apply glass-ultra rounded-glass overflow-hidden;
|
||||
}
|
||||
|
||||
.table-glass thead {
|
||||
@apply bg-glass-monaco-soft border-b border-white/40;
|
||||
}
|
||||
|
||||
.table-glass th {
|
||||
@apply px-6 py-4 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider;
|
||||
}
|
||||
|
||||
.table-glass td {
|
||||
@apply px-6 py-4 text-gray-600;
|
||||
}
|
||||
|
||||
.table-glass tbody tr {
|
||||
@apply border-b border-white/20 hover:bg-glass-monaco-soft transition-colors duration-150;
|
||||
}
|
||||
|
||||
/* Glass Modal/Dialog */
|
||||
.modal-glass {
|
||||
@apply glass-ultra rounded-glass shadow-2xl;
|
||||
}
|
||||
|
||||
.modal-glass-header {
|
||||
@apply px-6 py-4 border-b border-white/40 bg-gradient-glass;
|
||||
}
|
||||
|
||||
.modal-glass-body {
|
||||
@apply px-6 py-4;
|
||||
}
|
||||
|
||||
.modal-glass-footer {
|
||||
@apply px-6 py-4 border-t border-white/40 bg-glass-monaco-soft flex justify-end gap-3;
|
||||
}
|
||||
|
||||
/* Glass Badge */
|
||||
.badge-glass {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass border border-white/60;
|
||||
}
|
||||
|
||||
.badge-glass-monaco {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-glass-monaco text-monaco-700 border-monaco-200;
|
||||
}
|
||||
|
||||
/* Glass Alert */
|
||||
.alert-glass {
|
||||
@apply glass-light rounded-glass p-4 border-l-4;
|
||||
}
|
||||
|
||||
.alert-glass-success {
|
||||
@apply alert-glass border-green-500 text-green-800;
|
||||
}
|
||||
|
||||
.alert-glass-warning {
|
||||
@apply alert-glass border-amber-500 text-amber-800;
|
||||
}
|
||||
|
||||
.alert-glass-error {
|
||||
@apply alert-glass border-red-500 text-red-800;
|
||||
}
|
||||
|
||||
.alert-glass-info {
|
||||
@apply alert-glass border-blue-500 text-blue-800;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility layer */
|
||||
@layer utilities {
|
||||
/* Text gradient utilities */
|
||||
.text-gradient-monaco {
|
||||
@apply bg-gradient-monaco bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Hover lift effect */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-300 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
/* Hover scale effect */
|
||||
.hover-scale {
|
||||
@apply transition-transform duration-300 hover:scale-105;
|
||||
}
|
||||
|
||||
/* Focus ring Monaco */
|
||||
.focus-monaco {
|
||||
@apply focus:ring-2 focus:ring-monaco-400 focus:ring-offset-2 focus:outline-none;
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.skeleton {
|
||||
@apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass morphism scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
|
||||
}
|
||||
|
||||
/* Reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<span>{{ prefix }}{{ displayValue }}{{ suffix }}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
endVal: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
decimals: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const displayValue = ref(0)
|
||||
|
||||
const countUp = () => {
|
||||
const startTime = Date.now()
|
||||
const startVal = 0
|
||||
const endVal = props.endVal
|
||||
const duration = props.duration * 1000
|
||||
|
||||
const updateCount = () => {
|
||||
const now = Date.now()
|
||||
const progress = Math.min((now - startTime) / duration, 1)
|
||||
|
||||
// Easing function for smooth animation
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4)
|
||||
|
||||
const currentVal = startVal + (endVal - startVal) * easeOutQuart
|
||||
displayValue.value = props.decimals > 0
|
||||
? currentVal.toFixed(props.decimals)
|
||||
: Math.round(currentVal).toLocaleString()
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateCount)
|
||||
} else {
|
||||
displayValue.value = props.decimals > 0
|
||||
? endVal.toFixed(props.decimals)
|
||||
: endVal.toLocaleString()
|
||||
}
|
||||
}
|
||||
|
||||
updateCount()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
countUp()
|
||||
})
|
||||
|
||||
watch(() => props.endVal, () => {
|
||||
countUp()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'glass rounded-glass p-5 transition-all duration-300',
|
||||
'hover:shadow-glass-lg hover:-translate-y-0.5 group'
|
||||
]"
|
||||
>
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<!-- Member Info -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img
|
||||
:src="member.avatar || '/default-avatar.png'"
|
||||
:alt="member.name"
|
||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-white/60"
|
||||
>
|
||||
<!-- Country Flag Badge -->
|
||||
<div
|
||||
v-if="member.countryCode"
|
||||
class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full overflow-hidden ring-2 ring-white"
|
||||
>
|
||||
<CountryFlag :country="member.countryCode" size="small" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800">{{ member.name }}</h4>
|
||||
<p class="text-sm text-gray-500">Member #{{ member.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<span
|
||||
:class="[
|
||||
'px-3 py-1 rounded-full text-xs font-medium',
|
||||
status === 'overdue'
|
||||
? 'bg-red-50 text-red-700 border border-red-200'
|
||||
: status === 'upcoming'
|
||||
? 'bg-amber-50 text-amber-700 border border-amber-200'
|
||||
: 'bg-green-50 text-green-700 border border-green-200'
|
||||
]"
|
||||
>
|
||||
{{ statusLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Dues Information -->
|
||||
<div class="space-y-3 mb-4">
|
||||
<!-- Amount -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">Amount Due</span>
|
||||
<span class="text-lg font-bold text-monaco-600">
|
||||
${{ member.dueAmount }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">Due Date</span>
|
||||
<span class="text-sm font-medium text-gray-800">
|
||||
{{ formatDate(member.dueDate) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Days Status -->
|
||||
<div
|
||||
v-if="daysUntilDue !== null"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<span class="text-sm text-gray-600">
|
||||
{{ daysUntilDue > 0 ? 'Days Until Due' : 'Days Overdue' }}
|
||||
</span>
|
||||
<span
|
||||
:class="[
|
||||
'text-sm font-medium',
|
||||
daysUntilDue > 7
|
||||
? 'text-gray-800'
|
||||
: daysUntilDue > 0
|
||||
? 'text-amber-600'
|
||||
: 'text-red-600'
|
||||
]"
|
||||
>
|
||||
{{ Math.abs(daysUntilDue) }} {{ Math.abs(daysUntilDue) === 1 ? 'day' : 'days' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Section -->
|
||||
<div class="flex gap-2">
|
||||
<!-- Mark as Paid - Subtle Design -->
|
||||
<button
|
||||
@click="$emit('mark-paid', member)"
|
||||
class="flex-1 px-3 py-2 rounded-lg bg-white/50 border border-monaco-200
|
||||
text-monaco-600 text-sm font-medium hover:bg-glass-monaco-soft
|
||||
hover:border-monaco-300 transition-all duration-200
|
||||
flex items-center justify-center gap-2"
|
||||
>
|
||||
<Check class="w-4 h-4" />
|
||||
Mark Paid
|
||||
</button>
|
||||
|
||||
<!-- More Options Dropdown -->
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="showDropdown = !showDropdown"
|
||||
class="p-2 rounded-lg bg-white/50 border border-gray-200
|
||||
text-gray-600 hover:bg-gray-50 hover:border-gray-300
|
||||
transition-all duration-200"
|
||||
>
|
||||
<MoreVertical class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="showDropdown"
|
||||
class="absolute right-0 mt-2 w-48 glass-ultra rounded-xl shadow-lg
|
||||
border border-white/60 overflow-hidden z-50"
|
||||
>
|
||||
<button
|
||||
v-for="action in dropdownActions"
|
||||
:key="action.label"
|
||||
@click="handleAction(action)"
|
||||
class="w-full px-4 py-3 text-left text-sm text-gray-700
|
||||
hover:bg-glass-monaco-soft hover:text-monaco-600
|
||||
transition-colors flex items-center gap-3"
|
||||
>
|
||||
<component :is="action.icon" class="w-4 h-4" />
|
||||
{{ action.label }}
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
Check,
|
||||
MoreVertical,
|
||||
Mail,
|
||||
Phone,
|
||||
FileText,
|
||||
Calendar,
|
||||
AlertCircle
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const props = defineProps({
|
||||
member: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: 'upcoming',
|
||||
validator: (value) => ['overdue', 'upcoming', 'paid'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['mark-paid', 'send-reminder', 'view-details', 'schedule-payment'])
|
||||
|
||||
const showDropdown = ref(false)
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
const labels = {
|
||||
overdue: 'Overdue',
|
||||
upcoming: 'Upcoming',
|
||||
paid: 'Paid'
|
||||
}
|
||||
return labels[props.status] || 'Upcoming'
|
||||
})
|
||||
|
||||
const daysUntilDue = computed(() => {
|
||||
if (!props.member.dueDate) return null
|
||||
|
||||
const today = new Date()
|
||||
const dueDate = new Date(props.member.dueDate)
|
||||
const diffTime = dueDate - today
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
|
||||
return diffDays
|
||||
})
|
||||
|
||||
const dropdownActions = [
|
||||
{ icon: Mail, label: 'Send Reminder', action: 'send-reminder' },
|
||||
{ icon: Calendar, label: 'Schedule Payment', action: 'schedule-payment' },
|
||||
{ icon: FileText, label: 'View Details', action: 'view-details' },
|
||||
{ icon: Phone, label: 'Contact Member', action: 'contact' },
|
||||
{ icon: AlertCircle, label: 'Report Issue', action: 'report' }
|
||||
]
|
||||
|
||||
const handleAction = (action) => {
|
||||
showDropdown.value = false
|
||||
emit(action.action, props.member)
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return 'Not set'
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
// Placeholder for CountryFlag component
|
||||
const CountryFlag = {
|
||||
name: 'CountryFlag',
|
||||
props: ['country', 'size'],
|
||||
template: '<span></span>'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Dropdown animation */
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
<template>
|
||||
<aside
|
||||
:class="[
|
||||
'fixed left-0 top-0 h-full z-40 transition-all duration-300 glass-sidebar',
|
||||
isCollapsed ? 'w-20' : 'w-72',
|
||||
isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'
|
||||
]"
|
||||
>
|
||||
<!-- Logo Section -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-white/20">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
alt="MonacoUSA"
|
||||
class="w-10 h-10 rounded-xl shadow-soft"
|
||||
>
|
||||
<transition name="fade">
|
||||
<div v-if="!isCollapsed" class="flex flex-col">
|
||||
<span class="text-lg font-bold text-gradient-monaco">MonacoUSA</span>
|
||||
<span class="text-xs text-gray-500">Board Portal</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Collapse Button (Desktop) -->
|
||||
<button
|
||||
v-if="!isMobile"
|
||||
@click="toggleCollapse"
|
||||
class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors"
|
||||
>
|
||||
<ChevronLeft v-if="!isCollapsed" class="w-5 h-5 text-gray-600" />
|
||||
<ChevronRight v-else class="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Section -->
|
||||
<nav class="px-4 py-6 space-y-2 overflow-y-auto scrollbar-thin h-[calc(100%-200px)]">
|
||||
<!-- Main Navigation -->
|
||||
<div class="space-y-1">
|
||||
<SidebarLink
|
||||
v-for="item in mainNavItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
:icon="item.icon"
|
||||
:label="item.label"
|
||||
:badge="item.badge"
|
||||
:collapsed="isCollapsed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="my-4 border-t border-white/20"></div>
|
||||
|
||||
<!-- Secondary Navigation -->
|
||||
<div class="space-y-1">
|
||||
<div v-if="!isCollapsed" class="px-3 py-2">
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Management
|
||||
</span>
|
||||
</div>
|
||||
<SidebarLink
|
||||
v-for="item in managementItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
:icon="item.icon"
|
||||
:label="item.label"
|
||||
:badge="item.badge"
|
||||
:collapsed="isCollapsed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Settings Section -->
|
||||
<div class="mt-6 pt-6 border-t border-white/20 space-y-1">
|
||||
<SidebarLink
|
||||
v-for="item in settingsItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
:icon="item.icon"
|
||||
:label="item.label"
|
||||
:collapsed="isCollapsed"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- User Profile Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-white/20 bg-glass-light">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<img
|
||||
:src="userAvatar"
|
||||
alt="Profile"
|
||||
class="w-10 h-10 rounded-full ring-2 ring-white/60"
|
||||
>
|
||||
<div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full ring-2 ring-white"></div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="!isCollapsed" class="flex-1">
|
||||
<p class="text-sm font-semibold text-gray-800">{{ userName }}</p>
|
||||
<p class="text-xs text-gray-500">{{ userRole }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<button
|
||||
v-if="!isCollapsed"
|
||||
@click="$emit('logout')"
|
||||
class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors"
|
||||
>
|
||||
<LogOut class="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Close Overlay -->
|
||||
<div
|
||||
v-if="isMobile && isOpen"
|
||||
@click="$emit('close')"
|
||||
class="fixed inset-0 bg-black/20 backdrop-blur-sm -z-10"
|
||||
></div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
FileText,
|
||||
Mail,
|
||||
BarChart3,
|
||||
Settings,
|
||||
HelpCircle,
|
||||
LogOut,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Bell,
|
||||
Shield,
|
||||
Globe,
|
||||
Briefcase
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
// Component for individual sidebar links
|
||||
import SidebarLink from './SidebarLink.vue'
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isMobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userName: {
|
||||
type: String,
|
||||
default: 'Board Member'
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
default: 'Administrator'
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '/default-avatar.png'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'logout'])
|
||||
|
||||
const isCollapsed = ref(false)
|
||||
const route = useRoute()
|
||||
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value
|
||||
}
|
||||
|
||||
// Navigation items with Lucide icons
|
||||
const mainNavItems = [
|
||||
{
|
||||
path: '/board/dashboard',
|
||||
icon: LayoutDashboard,
|
||||
label: 'Dashboard',
|
||||
badge: null
|
||||
},
|
||||
{
|
||||
path: '/board/members',
|
||||
icon: Users,
|
||||
label: 'Members',
|
||||
badge: '1,234'
|
||||
},
|
||||
{
|
||||
path: '/board/events',
|
||||
icon: Calendar,
|
||||
label: 'Events',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
path: '/board/dues',
|
||||
icon: DollarSign,
|
||||
label: 'Dues & Payments',
|
||||
badge: '12'
|
||||
}
|
||||
]
|
||||
|
||||
const managementItems = [
|
||||
{
|
||||
path: '/board/documents',
|
||||
icon: FileText,
|
||||
label: 'Documents',
|
||||
badge: null
|
||||
},
|
||||
{
|
||||
path: '/board/communications',
|
||||
icon: Mail,
|
||||
label: 'Communications',
|
||||
badge: '5'
|
||||
},
|
||||
{
|
||||
path: '/board/reports',
|
||||
icon: BarChart3,
|
||||
label: 'Reports',
|
||||
badge: null
|
||||
},
|
||||
{
|
||||
path: '/board/governance',
|
||||
icon: Shield,
|
||||
label: 'Governance',
|
||||
badge: null
|
||||
}
|
||||
]
|
||||
|
||||
const settingsItems = [
|
||||
{
|
||||
path: '/board/settings',
|
||||
icon: Settings,
|
||||
label: 'Settings',
|
||||
badge: null
|
||||
},
|
||||
{
|
||||
path: '/board/help',
|
||||
icon: HelpCircle,
|
||||
label: 'Help & Support',
|
||||
badge: null
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Fade transition for collapsing elements */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for navigation */
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'glass-stat-card group',
|
||||
variant === 'ultra' ? 'glass-ultra' : 'glass-light',
|
||||
'rounded-glass p-6 transition-all duration-300',
|
||||
'hover:-translate-y-1 hover:shadow-glass-lg cursor-pointer'
|
||||
]"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<!-- Icon Section -->
|
||||
<div
|
||||
:class="[
|
||||
'glass-stat-icon',
|
||||
iconBgClass,
|
||||
'w-14 h-14 rounded-2xl flex items-center justify-center mb-4',
|
||||
'transition-transform duration-300 group-hover:scale-110'
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
:class="[iconColorClass, 'w-7 h-7']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="space-y-2">
|
||||
<!-- Label -->
|
||||
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||
{{ label }}
|
||||
</p>
|
||||
|
||||
<!-- Value with Animation -->
|
||||
<div class="flex items-baseline gap-2">
|
||||
<CountUp
|
||||
v-if="animated"
|
||||
:end-val="numericValue"
|
||||
:duration="2"
|
||||
:prefix="prefix"
|
||||
:suffix="suffix"
|
||||
class="text-3xl font-bold text-gray-800"
|
||||
/>
|
||||
<p v-else class="text-3xl font-bold text-gray-800">
|
||||
{{ prefix }}{{ value }}{{ suffix }}
|
||||
</p>
|
||||
|
||||
<!-- Change Indicator -->
|
||||
<div
|
||||
v-if="change"
|
||||
:class="[
|
||||
'flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
changeType === 'increase'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: changeType === 'decrease'
|
||||
? 'bg-red-100 text-red-700'
|
||||
: 'bg-gray-100 text-gray-700'
|
||||
]"
|
||||
>
|
||||
<TrendingUp v-if="changeType === 'increase'" class="w-3 h-3" />
|
||||
<TrendingDown v-else-if="changeType === 'decrease'" class="w-3 h-3" />
|
||||
<span>{{ change }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p v-if="description" class="text-sm text-gray-600">
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div v-if="showProgress" class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-500 mb-1">
|
||||
<span>Progress</span>
|
||||
<span>{{ progressValue }}%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
:style="{ width: `${progressValue}%` }"
|
||||
class="h-full bg-gradient-monaco rounded-full transition-all duration-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Link -->
|
||||
<div
|
||||
v-if="actionLabel"
|
||||
class="mt-4 pt-4 border-t border-white/40 flex items-center justify-between group/link"
|
||||
>
|
||||
<span class="text-sm font-medium text-monaco-600 group-hover/link:text-monaco-700">
|
||||
{{ actionLabel }}
|
||||
</span>
|
||||
<ArrowRight class="w-4 h-4 text-monaco-600 transition-transform group-hover/link:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { TrendingUp, TrendingDown, ArrowRight } from 'lucide-vue-next'
|
||||
import CountUp from './CountUp.vue'
|
||||
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
change: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
changeType: {
|
||||
type: String,
|
||||
default: null,
|
||||
validator: (value) => ['increase', 'decrease', 'neutral'].includes(value)
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
actionLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'light',
|
||||
validator: (value) => ['light', 'ultra'].includes(value)
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: 'monaco'
|
||||
},
|
||||
animated: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showProgress: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
progressValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const numericValue = computed(() => {
|
||||
if (typeof props.value === 'number') return props.value
|
||||
return parseFloat(props.value.replace(/[^0-9.-]/g, '')) || 0
|
||||
})
|
||||
|
||||
const iconBgClass = computed(() => {
|
||||
const colors = {
|
||||
monaco: 'bg-glass-monaco-soft',
|
||||
green: 'bg-green-50',
|
||||
blue: 'bg-blue-50',
|
||||
amber: 'bg-amber-50',
|
||||
purple: 'bg-purple-50'
|
||||
}
|
||||
return colors[props.iconColor] || colors.monaco
|
||||
})
|
||||
|
||||
const iconColorClass = computed(() => {
|
||||
const colors = {
|
||||
monaco: 'text-monaco-600',
|
||||
green: 'text-green-600',
|
||||
blue: 'text-blue-600',
|
||||
amber: 'text-amber-600',
|
||||
purple: 'text-purple-600'
|
||||
}
|
||||
return colors[props.iconColor] || colors.monaco
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<NuxtLink
|
||||
:to="to"
|
||||
:class="[
|
||||
'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group relative',
|
||||
isActive
|
||||
? 'bg-glass-monaco text-monaco-600 font-medium shadow-soft'
|
||||
: 'text-gray-700 hover:bg-glass-monaco-soft hover:text-monaco-600 hover:translate-x-0.5'
|
||||
]"
|
||||
>
|
||||
<!-- Active Indicator -->
|
||||
<div
|
||||
v-if="isActive"
|
||||
class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-monaco rounded-r-full"
|
||||
></div>
|
||||
|
||||
<!-- Icon -->
|
||||
<component
|
||||
:is="icon"
|
||||
:class="[
|
||||
'flex-shrink-0 transition-colors',
|
||||
collapsed ? 'w-6 h-6' : 'w-5 h-5',
|
||||
isActive ? 'text-monaco-600' : 'text-gray-500 group-hover:text-monaco-600'
|
||||
]"
|
||||
/>
|
||||
|
||||
<!-- Label and Badge -->
|
||||
<transition name="slide">
|
||||
<div v-if="!collapsed" class="flex-1 flex items-center justify-between">
|
||||
<span class="text-sm font-medium">{{ label }}</span>
|
||||
|
||||
<!-- Badge -->
|
||||
<span
|
||||
v-if="badge"
|
||||
:class="[
|
||||
'px-2 py-0.5 text-xs rounded-full font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-monaco-600 text-white'
|
||||
: 'bg-glass-monaco-soft text-monaco-700 group-hover:bg-monaco-100'
|
||||
]"
|
||||
>
|
||||
{{ badge }}
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Tooltip for collapsed state -->
|
||||
<div
|
||||
v-if="collapsed"
|
||||
class="absolute left-full ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
||||
transition-all duration-200 whitespace-nowrap z-50"
|
||||
>
|
||||
{{ label }}
|
||||
<div class="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2
|
||||
w-0 h-0 border-4 border-transparent border-r-gray-900"></div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const props = defineProps({
|
||||
to: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
badge: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const isActive = computed(() => {
|
||||
return route.path === props.to || route.path.startsWith(props.to + '/')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Slide transition for label */
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,13 @@ export default defineNuxtConfig({
|
|||
}
|
||||
},
|
||||
modules: ["vuetify-nuxt-module", "@vueuse/motion/nuxt"],
|
||||
css: ["~/assets/scss/main.scss"],
|
||||
css: ["~/assets/css/tailwind.css", "~/assets/scss/main.scss"],
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
},
|
||||
app: {
|
||||
head: {
|
||||
titleTemplate: "%s • MonacoUSA Portal",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,425 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gradient-light">
|
||||
<!-- Glass Sidebar -->
|
||||
<GlassSidebar
|
||||
:is-open="sidebarOpen"
|
||||
:is-mobile="isMobile"
|
||||
:user-name="firstName"
|
||||
:user-role="userRole"
|
||||
:user-avatar="userAvatar"
|
||||
@close="sidebarOpen = false"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div :class="['transition-all duration-300', isMobile ? 'ml-0' : 'ml-72']">
|
||||
<!-- Glass Navigation Bar -->
|
||||
<header class="glass-navbar sticky top-0 z-30 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button
|
||||
v-if="isMobile"
|
||||
@click="sidebarOpen = !sidebarOpen"
|
||||
class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors lg:hidden"
|
||||
>
|
||||
<Menu class="w-6 h-6 text-gray-700" />
|
||||
</button>
|
||||
|
||||
<!-- Page Title -->
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-2xl font-bold text-gradient-monaco">Board Dashboard</h1>
|
||||
<span class="px-3 py-1 rounded-full bg-glass-monaco-soft text-monaco-600 text-sm font-medium">
|
||||
{{ currentDate }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Header Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Notifications -->
|
||||
<button class="relative p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors">
|
||||
<Bell class="w-5 h-5 text-gray-700" />
|
||||
<span class="absolute top-1 right-1 w-2 h-2 bg-monaco-600 rounded-full"></span>
|
||||
</button>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<button
|
||||
@click="showQuickActions = !showQuickActions"
|
||||
class="btn-glass-primary flex items-center gap-2"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
Quick Action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<main class="p-6 space-y-6">
|
||||
<!-- Welcome Section -->
|
||||
<div class="glass-ultra rounded-glass p-8 text-center animate-fade-in">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
||||
Welcome back, {{ firstName }}!
|
||||
</h2>
|
||||
<p class="text-gray-600">
|
||||
Here's an overview of MonacoUSA's current status and activities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<GlassStatCard
|
||||
v-for="stat in stats"
|
||||
:key="stat.label"
|
||||
:icon="stat.icon"
|
||||
:label="stat.label"
|
||||
:value="stat.value"
|
||||
:prefix="stat.prefix"
|
||||
:suffix="stat.suffix"
|
||||
:change="stat.change"
|
||||
:change-type="stat.changeType"
|
||||
:icon-color="stat.color"
|
||||
:action-label="stat.actionLabel"
|
||||
@click="handleStatClick(stat)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Dues Management Section - LIMITED TO 4 CARDS -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xl font-semibold text-gray-800">Member Dues Overview</h3>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Filter Tabs -->
|
||||
<div class="glass rounded-full p-1 flex gap-1">
|
||||
<button
|
||||
v-for="tab in duesTabs"
|
||||
:key="tab.id"
|
||||
@click="activeDuesTab = tab.id"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-full text-sm font-medium transition-all',
|
||||
activeDuesTab === tab.id
|
||||
? 'bg-gradient-monaco text-white shadow-monaco-sm'
|
||||
: 'text-gray-600 hover:text-monaco-600 hover:bg-glass-monaco-soft'
|
||||
]"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<span v-if="tab.count" class="ml-1">({{ tab.count }})</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Cards Grid - MAX 4 VISIBLE -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<GlassDuesCard
|
||||
v-for="member in visibleDuesMembers"
|
||||
:key="member.id"
|
||||
:member="member"
|
||||
:status="activeDuesTab"
|
||||
@mark-paid="handleMarkPaid"
|
||||
@send-reminder="handleSendReminder"
|
||||
@view-details="handleViewDetails"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- View All Button -->
|
||||
<div v-if="totalDuesMembers > 4" class="text-center">
|
||||
<button
|
||||
@click="navigateToFullDuesList"
|
||||
class="btn-glass-secondary inline-flex items-center gap-2"
|
||||
>
|
||||
View All {{ totalDuesMembers }} Members
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Upcoming Events Card -->
|
||||
<div class="glass-card-bright">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-semibold text-gray-800">Upcoming Events</h3>
|
||||
<Calendar class="w-5 h-5 text-monaco-600" />
|
||||
</div>
|
||||
<div v-if="nextEvent" class="space-y-3">
|
||||
<div class="p-4 bg-glass-monaco-soft rounded-xl">
|
||||
<h4 class="font-medium text-gray-800">{{ nextEvent.title }}</h4>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ nextEvent.date }}</p>
|
||||
<p class="text-xs text-gray-500 mt-2">{{ nextEvent.attendees }} attendees</p>
|
||||
</div>
|
||||
<button class="w-full btn-glass text-sm">
|
||||
View All Events
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-gray-500">
|
||||
No upcoming events
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Card -->
|
||||
<div class="glass-card-bright">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-semibold text-gray-800">Recent Activity</h3>
|
||||
<Activity class="w-5 h-5 text-monaco-600" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="activity in recentActivity"
|
||||
:key="activity.id"
|
||||
class="flex items-start gap-3 p-3 rounded-lg hover:bg-glass-monaco-soft transition-colors"
|
||||
>
|
||||
<div class="w-2 h-2 bg-monaco-600 rounded-full mt-1.5"></div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-gray-700">{{ activity.description }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ activity.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links Card -->
|
||||
<div class="glass-card-bright">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-semibold text-gray-800">Quick Actions</h3>
|
||||
<Zap class="w-5 h-5 text-monaco-600" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
v-for="action in quickActions"
|
||||
:key="action.label"
|
||||
@click="action.handler"
|
||||
class="p-3 rounded-xl bg-white/50 hover:bg-glass-monaco-soft
|
||||
transition-all hover:scale-105 group text-center"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
class="w-6 h-6 text-gray-600 group-hover:text-monaco-600 mx-auto mb-2"
|
||||
/>
|
||||
<span class="text-xs text-gray-700 group-hover:text-monaco-600 font-medium">
|
||||
{{ action.label }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
Menu, Bell, Plus, ArrowRight, Calendar, Activity, Zap,
|
||||
Users, DollarSign, FileText, Mail, TrendingUp, Settings,
|
||||
LayoutDashboard, UserPlus, Send, Download
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
// Import our glass components
|
||||
import GlassSidebar from '~/components/GlassSidebar.vue'
|
||||
import GlassStatCard from '~/components/GlassStatCard.vue'
|
||||
import GlassDuesCard from '~/components/GlassDuesCard.vue'
|
||||
|
||||
// Page configuration
|
||||
definePageMeta({
|
||||
layout: 'board',
|
||||
middleware: 'board-auth'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Reactive state
|
||||
const sidebarOpen = ref(false)
|
||||
const isMobile = ref(false)
|
||||
const showQuickActions = ref(false)
|
||||
const activeDuesTab = ref('overdue')
|
||||
const isLoading = ref(false)
|
||||
|
||||
// User data
|
||||
const firstName = ref('Board Member')
|
||||
const userRole = ref('Administrator')
|
||||
const userAvatar = ref('/default-avatar.png')
|
||||
|
||||
// Current date
|
||||
const currentDate = computed(() => {
|
||||
return new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
})
|
||||
|
||||
// Statistics data with Lucide icons
|
||||
const stats = ref([
|
||||
{
|
||||
icon: Users,
|
||||
label: 'Total Members',
|
||||
value: 1234,
|
||||
change: '+12%',
|
||||
changeType: 'increase',
|
||||
color: 'monaco',
|
||||
actionLabel: 'View all members'
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
label: 'Dues Collected',
|
||||
value: 45678,
|
||||
prefix: '$',
|
||||
change: '+8%',
|
||||
changeType: 'increase',
|
||||
color: 'green',
|
||||
actionLabel: 'View payments'
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
label: 'Upcoming Events',
|
||||
value: 5,
|
||||
change: '2 this week',
|
||||
changeType: 'neutral',
|
||||
color: 'blue',
|
||||
actionLabel: 'View calendar'
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
label: 'Growth Rate',
|
||||
value: 23,
|
||||
suffix: '%',
|
||||
change: '+3%',
|
||||
changeType: 'increase',
|
||||
color: 'purple',
|
||||
actionLabel: 'View report'
|
||||
}
|
||||
])
|
||||
|
||||
// Dues tabs
|
||||
const duesTabs = ref([
|
||||
{ id: 'overdue', label: 'Overdue', count: 12 },
|
||||
{ id: 'upcoming', label: 'Upcoming', count: 24 },
|
||||
{ id: 'paid', label: 'Recently Paid', count: 8 }
|
||||
])
|
||||
|
||||
// Sample dues members data - LIMITED TO 4
|
||||
const duesMembers = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'John Smith',
|
||||
avatar: '/avatar1.jpg',
|
||||
countryCode: 'US',
|
||||
dueAmount: 250,
|
||||
dueDate: '2024-01-15'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Marie Dubois',
|
||||
avatar: '/avatar2.jpg',
|
||||
countryCode: 'MC',
|
||||
dueAmount: 250,
|
||||
dueDate: '2024-01-20'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Alessandro Rossi',
|
||||
avatar: '/avatar3.jpg',
|
||||
countryCode: 'IT',
|
||||
dueAmount: 250,
|
||||
dueDate: '2024-01-25'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Emma Wilson',
|
||||
avatar: '/avatar4.jpg',
|
||||
countryCode: 'GB',
|
||||
dueAmount: 250,
|
||||
dueDate: '2024-01-30'
|
||||
}
|
||||
])
|
||||
|
||||
// Computed: visible dues members (max 4)
|
||||
const visibleDuesMembers = computed(() => {
|
||||
return duesMembers.value.slice(0, 4)
|
||||
})
|
||||
|
||||
const totalDuesMembers = computed(() => {
|
||||
const tab = duesTabs.value.find(t => t.id === activeDuesTab.value)
|
||||
return tab ? tab.count : 0
|
||||
})
|
||||
|
||||
// Next event
|
||||
const nextEvent = ref({
|
||||
title: 'Annual Gala Dinner',
|
||||
date: 'January 28, 2024',
|
||||
attendees: 150
|
||||
})
|
||||
|
||||
// Recent activity
|
||||
const recentActivity = ref([
|
||||
{ id: 1, description: 'New member John Doe joined', time: '2 hours ago' },
|
||||
{ id: 2, description: 'Payment received from Jane Smith', time: '5 hours ago' },
|
||||
{ id: 3, description: 'Event "Wine Tasting" created', time: '1 day ago' }
|
||||
])
|
||||
|
||||
// Quick actions
|
||||
const quickActions = [
|
||||
{ icon: UserPlus, label: 'Add Member', handler: () => router.push('/board/members/new') },
|
||||
{ icon: Calendar, label: 'New Event', handler: () => router.push('/board/events/new') },
|
||||
{ icon: Send, label: 'Send Email', handler: () => router.push('/board/communications') },
|
||||
{ icon: Download, label: 'Export Data', handler: () => generateReport() }
|
||||
]
|
||||
|
||||
// Event handlers
|
||||
const handleStatClick = (stat) => {
|
||||
console.log('Stat clicked:', stat.label)
|
||||
}
|
||||
|
||||
const handleMarkPaid = (member) => {
|
||||
console.log('Mark paid:', member.name)
|
||||
// Implement payment marking logic
|
||||
}
|
||||
|
||||
const handleSendReminder = (member) => {
|
||||
console.log('Send reminder:', member.name)
|
||||
// Implement reminder logic
|
||||
}
|
||||
|
||||
const handleViewDetails = (member) => {
|
||||
router.push(`/board/members/${member.id}`)
|
||||
}
|
||||
|
||||
const navigateToFullDuesList = () => {
|
||||
router.push('/board/dues')
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
// Implement logout logic
|
||||
router.push('/logout')
|
||||
}
|
||||
|
||||
const generateReport = () => {
|
||||
console.log('Generating report...')
|
||||
// Implement report generation
|
||||
}
|
||||
|
||||
// Check if mobile
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 1024
|
||||
if (!isMobile.value) {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Any additional custom styles */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./components/**/*.{js,vue,ts}",
|
||||
"./layouts/**/*.vue",
|
||||
"./pages/**/*.vue",
|
||||
"./plugins/**/*.{js,ts}",
|
||||
"./app.vue",
|
||||
"./error.vue",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Monaco Red Spectrum
|
||||
'monaco': {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626', // Primary
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
},
|
||||
// Glass Colors
|
||||
'glass': {
|
||||
'white': 'rgba(255, 255, 255, 0.7)',
|
||||
'light': 'rgba(255, 255, 255, 0.85)',
|
||||
'ultra-light': 'rgba(255, 255, 255, 0.95)',
|
||||
'border': 'rgba(255, 255, 255, 0.6)',
|
||||
'monaco': 'rgba(220, 38, 38, 0.1)',
|
||||
'monaco-soft': 'rgba(220, 38, 38, 0.05)',
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
// Bright gradients
|
||||
'gradient-light': 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)',
|
||||
'gradient-soft': 'linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%)',
|
||||
'gradient-monaco-soft': 'linear-gradient(135deg, #fff5f5 0%, #ffffff 100%)',
|
||||
// Monaco gradients
|
||||
'gradient-monaco': 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
|
||||
'gradient-monaco-light': 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
||||
// Glass gradients
|
||||
'gradient-glass': 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%)',
|
||||
'gradient-glass-soft': 'linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%)',
|
||||
},
|
||||
backdropBlur: {
|
||||
xs: '2px',
|
||||
sm: '4px',
|
||||
md: '8px',
|
||||
lg: '12px',
|
||||
xl: '16px',
|
||||
'2xl': '20px',
|
||||
'3xl': '30px',
|
||||
},
|
||||
boxShadow: {
|
||||
'glass': '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||||
'glass-sm': '0 4px 16px rgba(31, 38, 135, 0.1)',
|
||||
'glass-lg': '0 12px 48px rgba(31, 38, 135, 0.2)',
|
||||
'glass-inset': 'inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.05)',
|
||||
'monaco': '0 10px 40px rgba(220, 38, 38, 0.15)',
|
||||
'monaco-sm': '0 4px 20px rgba(220, 38, 38, 0.1)',
|
||||
'monaco-lg': '0 20px 60px rgba(220, 38, 38, 0.2)',
|
||||
'soft': '0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
'soft-lg': '0 4px 16px rgba(0, 0, 0, 0.12)',
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.3s ease-in-out',
|
||||
'slide-up': 'slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
'slide-down': 'slideDown 0.3s ease-out',
|
||||
'scale-in': 'scaleIn 0.3s ease-out',
|
||||
'float': 'float 3s ease-in-out infinite',
|
||||
'shimmer': 'shimmer 2s infinite',
|
||||
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
|
||||
'glow': 'glow 2s ease-in-out infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { opacity: '0', transform: 'translateY(-20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
scaleIn: {
|
||||
'0%': { opacity: '0', transform: 'scale(0.9)' },
|
||||
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
shimmer: {
|
||||
'0%': { backgroundPosition: '-1000px 0' },
|
||||
'100%': { backgroundPosition: '1000px 0' },
|
||||
},
|
||||
pulseSoft: {
|
||||
'0%, 100%': { opacity: '1' },
|
||||
'50%': { opacity: '0.8' },
|
||||
},
|
||||
glow: {
|
||||
'0%, 100%': { boxShadow: '0 0 20px rgba(220, 38, 38, 0.3)' },
|
||||
'50%': { boxShadow: '0 0 30px rgba(220, 38, 38, 0.5)' },
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
borderRadius: {
|
||||
'glass': '20px',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
// Custom glass utilities plugin
|
||||
function({ addUtilities, addComponents, theme }) {
|
||||
// Glass effect utilities
|
||||
addUtilities({
|
||||
'.glass': {
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'-webkit-backdrop-filter': 'blur(20px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||||
},
|
||||
'.glass-light': {
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'-webkit-backdrop-filter': 'blur(20px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.7)',
|
||||
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.12)',
|
||||
},
|
||||
'.glass-ultra': {
|
||||
background: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(30px)',
|
||||
'-webkit-backdrop-filter': 'blur(30px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.8)',
|
||||
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.6)',
|
||||
},
|
||||
'.glass-monaco': {
|
||||
background: 'linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(255, 255, 255, 0.7) 100%)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'-webkit-backdrop-filter': 'blur(20px)',
|
||||
borderLeft: '3px solid #dc2626',
|
||||
border: '1px solid rgba(220, 38, 38, 0.2)',
|
||||
boxShadow: '0 8px 32px rgba(220, 38, 38, 0.1)',
|
||||
},
|
||||
'.no-scrollbar': {
|
||||
'-ms-overflow-style': 'none',
|
||||
'scrollbar-width': 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
'.scrollbar-thin': {
|
||||
'scrollbar-width': 'thin',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: 'rgba(0, 0, 0, 0.05)',
|
||||
borderRadius: '9999px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
|
||||
borderRadius: '9999px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Glass component classes
|
||||
addComponents({
|
||||
'.glass-card': {
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'-webkit-backdrop-filter': 'blur(20px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
|
||||
borderRadius: '20px',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'&:hover': {
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
boxShadow: '0 12px 40px rgba(31, 38, 135, 0.2)',
|
||||
transform: 'translateY(-4px)',
|
||||
},
|
||||
},
|
||||
'.glass-button': {
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
'-webkit-backdrop-filter': 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.8)',
|
||||
boxShadow: '0 4px 15px rgba(0, 0, 0, 0.08)',
|
||||
transition: 'all 0.3s ease',
|
||||
'&:hover': {
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
boxShadow: '0 6px 20px rgba(220, 38, 38, 0.15)',
|
||||
transform: 'translateY(-2px)',
|
||||
},
|
||||
'&:active': {
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
'.glass-input': {
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
'-webkit-backdrop-filter': 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
transition: 'all 0.3s ease',
|
||||
'&:hover': {
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
borderColor: 'rgba(220, 38, 38, 0.2)',
|
||||
},
|
||||
'&:focus': {
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#dc2626',
|
||||
boxShadow: '0 0 0 3px rgba(220, 38, 38, 0.1)',
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
'.glass-sidebar': {
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
backdropFilter: 'blur(30px)',
|
||||
'-webkit-backdrop-filter': 'blur(30px)',
|
||||
borderRight: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
boxShadow: '4px 0 24px rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
'.glass-navbar': {
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'-webkit-backdrop-filter': 'blur(20px)',
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
});
|
||||
},
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue