Redesign member dashboard with modern bento grid layout and animations
Build And Push Image / docker (push) Failing after 1m11s
Details
Build And Push Image / docker (push) Failing after 1m11s
Details
- Updated design philosophy to v2.0 with focus on beauty and interactivity
- Added @vueuse/motion for advanced animations
- Created reusable dashboard components:
- BentoGrid: Flexible grid layout system
- StatsCard: Animated statistics with sparklines
- ProfileCard: Premium profile display with progress
- ActivityTimeline: Beautiful timeline with staggered animations
- EventsCard: Upcoming events display
- PaymentCard: Payment status and history
- QuickActionCard: Animated action buttons
- Rebuilt member dashboard with bento grid layout
- Added glass morphism effects throughout
- Implemented micro-interactions and hover effects
- Added gradient text effects and decorative elements
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
aba6c2ecac
commit
4d0591ce7d
|
|
@ -29,7 +29,8 @@
|
||||||
"Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard\\index.vue\" -ItemType File -Force)",
|
"Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard\\index.vue\" -ItemType File -Force)",
|
||||||
"Bash(grep:*)",
|
"Bash(grep:*)",
|
||||||
"Bash(findstr:*)",
|
"Bash(findstr:*)",
|
||||||
"mcp__playwright__browser_close"
|
"mcp__playwright__browser_close",
|
||||||
|
"Bash(dir:*)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
|
|
@ -1,4 +1,31 @@
|
||||||
# MonacoUSA Portal Design System
|
# MonacoUSA Portal Design System v2.0
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
The MonacoUSA Portal design system represents a premium, modern approach to web application interfaces, combining cutting-edge UI patterns with sophisticated animations and interactions. This system prioritizes beauty, functionality, and user engagement through carefully crafted visual experiences.
|
||||||
|
|
||||||
|
## Design Philosophy
|
||||||
|
|
||||||
|
### Core Principles
|
||||||
|
|
||||||
|
#### 1. **Visual Elegance**
|
||||||
|
- Premium aesthetics that reflect Monaco's luxury and sophistication
|
||||||
|
- Beautiful, engaging interfaces that delight users
|
||||||
|
- Attention to detail in every interaction
|
||||||
|
|
||||||
|
#### 2. **Motion & Life**
|
||||||
|
- Smooth, purposeful animations that guide user attention
|
||||||
|
- Micro-interactions that provide feedback and enhance usability
|
||||||
|
- Transitions that create seamless navigation experiences
|
||||||
|
|
||||||
|
#### 3. **Modern Architecture**
|
||||||
|
- Bento grid layouts for flexible content organization
|
||||||
|
- Component-based design for consistency and maintainability
|
||||||
|
- Responsive patterns that adapt beautifully across devices
|
||||||
|
|
||||||
|
#### 4. **Interactive Engagement**
|
||||||
|
- Customizable interfaces that users can personalize
|
||||||
|
- Draggable and reorderable components
|
||||||
|
- Real-time updates with smooth animations
|
||||||
|
|
||||||
## 🎨 Visual Identity
|
## 🎨 Visual Identity
|
||||||
|
|
||||||
|
|
@ -748,6 +775,362 @@ $screen-2xl: 1536px; // 2X Extra large devices
|
||||||
.text-justify { text-align: justify; }
|
.text-justify { text-align: justify; }
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 🎯 Dashboard Patterns
|
||||||
|
|
||||||
|
### Bento Grid Layout
|
||||||
|
Modern dashboard layout using CSS Grid with flexible item placement:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
|
||||||
|
.bento-item {
|
||||||
|
@include glass-premium;
|
||||||
|
border-radius: $radius-2xl;
|
||||||
|
padding: $space-6;
|
||||||
|
transition: all $duration-base $ease-in-out-smooth;
|
||||||
|
|
||||||
|
&--small { grid-column: span 3; }
|
||||||
|
&--medium { grid-column: span 4; }
|
||||||
|
&--large { grid-column: span 6; }
|
||||||
|
&--xlarge { grid-column: span 8; }
|
||||||
|
&--full { grid-column: span 12; }
|
||||||
|
|
||||||
|
&--tall { grid-row: span 2; }
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: $shadow-glass-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Widget Components
|
||||||
|
|
||||||
|
#### Statistics Card
|
||||||
|
```scss
|
||||||
|
.stat-card {
|
||||||
|
@include glass-premium(0.8, 25px);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: $text-4xl;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
background: $gradient-monaco;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-change {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: $space-1 $space-2;
|
||||||
|
border-radius: $radius-full;
|
||||||
|
font-size: $text-sm;
|
||||||
|
font-weight: $font-semibold;
|
||||||
|
|
||||||
|
&--positive {
|
||||||
|
background: rgba($success-500, 0.1);
|
||||||
|
color: $success-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--negative {
|
||||||
|
background: rgba($monaco-red-500, 0.1);
|
||||||
|
color: $monaco-red-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-chart {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Activity Timeline
|
||||||
|
```scss
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
background: $gradient-monaco;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 50px;
|
||||||
|
margin-bottom: $space-6;
|
||||||
|
animation: slide-up $duration-base $ease-in-out-smooth;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
|
||||||
|
@for $i from 1 through 10 {
|
||||||
|
&:nth-child(#{$i}) {
|
||||||
|
animation-delay: #{$i * 50}ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-marker {
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: $radius-full;
|
||||||
|
background: white;
|
||||||
|
border: 3px solid $monaco-red-600;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&.pulse {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -5px;
|
||||||
|
border-radius: $radius-full;
|
||||||
|
border: 2px solid $monaco-red-600;
|
||||||
|
animation: pulse-ring 2s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Draggable Dashboard
|
||||||
|
```scss
|
||||||
|
.draggable-grid {
|
||||||
|
.drag-handle {
|
||||||
|
position: absolute;
|
||||||
|
top: $space-4;
|
||||||
|
right: $space-4;
|
||||||
|
cursor: grab;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $duration-base;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable-item {
|
||||||
|
&:hover .drag-handle {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dragging {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: scale(1.05);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.drag-over {
|
||||||
|
background: rgba($monaco-red-600, 0.05);
|
||||||
|
border: 2px dashed $monaco-red-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Enhanced Glass Effects
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@mixin glass-premium($opacity: 0.7, $blur: 30px) {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, $opacity),
|
||||||
|
rgba(255, 255, 255, $opacity * 0.6)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur($blur) saturate(180%);
|
||||||
|
-webkit-backdrop-filter: blur($blur) saturate(180%);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||||
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin glass-frosted($color: white, $opacity: 0.1) {
|
||||||
|
background: rgba($color, $opacity);
|
||||||
|
backdrop-filter: blur(40px) saturate(200%) contrast(120%);
|
||||||
|
-webkit-backdrop-filter: blur(40px) saturate(200%) contrast(120%);
|
||||||
|
border: 1px solid rgba($color, 0.2);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Animation Patterns for Dashboard
|
||||||
|
|
||||||
|
#### Number Counter Animation
|
||||||
|
```scss
|
||||||
|
@keyframes count-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
display: inline-block;
|
||||||
|
animation: count-up $duration-slow $ease-out-back;
|
||||||
|
|
||||||
|
.digit {
|
||||||
|
display: inline-block;
|
||||||
|
animation: count-up $duration-slow $ease-out-back;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
|
||||||
|
@for $i from 1 through 10 {
|
||||||
|
&:nth-child(#{$i}) {
|
||||||
|
animation-delay: #{$i * 50}ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Progress Ring
|
||||||
|
```scss
|
||||||
|
.progress-ring {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-ring-circle {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 8;
|
||||||
|
|
||||||
|
&--bg {
|
||||||
|
stroke: rgba($gray-300, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--fill {
|
||||||
|
stroke: url(#gradient-monaco);
|
||||||
|
stroke-linecap: round;
|
||||||
|
transition: stroke-dashoffset $duration-slow $ease-in-out-smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-value {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: $text-2xl;
|
||||||
|
font-weight: $font-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### VueUse Motion Integration
|
||||||
|
|
||||||
|
#### Configuration
|
||||||
|
```javascript
|
||||||
|
// Motion variants for dashboard components
|
||||||
|
export const dashboardMotions = {
|
||||||
|
// Card entrance
|
||||||
|
cardEnter: {
|
||||||
|
initial: { opacity: 0, scale: 0.9 },
|
||||||
|
enter: {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200,
|
||||||
|
damping: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Statistics counter
|
||||||
|
statCounter: {
|
||||||
|
initial: { opacity: 0, y: 20 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 600,
|
||||||
|
ease: 'easeOut'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Timeline item
|
||||||
|
timelineItem: {
|
||||||
|
initial: { opacity: 0, x: -20 },
|
||||||
|
visibleOnce: {
|
||||||
|
opacity: 1,
|
||||||
|
x: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 500,
|
||||||
|
delay: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hover lift
|
||||||
|
hoverLift: {
|
||||||
|
initial: { scale: 1 },
|
||||||
|
hovered: {
|
||||||
|
scale: 1.02,
|
||||||
|
y: -4,
|
||||||
|
transition: {
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 400,
|
||||||
|
damping: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Usage Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="bento-grid">
|
||||||
|
<div
|
||||||
|
v-motion="'statsCard'"
|
||||||
|
:initial="{ opacity: 0, y: 20 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
delay: index * 100,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
:hovered="{
|
||||||
|
scale: 1.02,
|
||||||
|
y: -4
|
||||||
|
}"
|
||||||
|
class="bento-item bento-item--medium stat-card"
|
||||||
|
>
|
||||||
|
<!-- Card content -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*This design system provides the foundation for creating consistent, beautiful, and performant user interfaces across the MonacoUSA Portal.*
|
*MonacoUSA Portal Design System v2.0 - Premium Design for Premium Experiences*
|
||||||
|
|
@ -0,0 +1,303 @@
|
||||||
|
<template>
|
||||||
|
<div class="activity-timeline">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in activities"
|
||||||
|
:key="item.id"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, x: -20 }"
|
||||||
|
:visibleOnce="{
|
||||||
|
opacity: 1,
|
||||||
|
x: 0,
|
||||||
|
transition: {
|
||||||
|
delay: index * 100,
|
||||||
|
duration: 500,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="timeline-item"
|
||||||
|
:class="{ 'timeline-item--last': index === activities.length - 1 }"
|
||||||
|
>
|
||||||
|
<!-- Timeline Marker -->
|
||||||
|
<div
|
||||||
|
class="timeline-marker"
|
||||||
|
:class="[
|
||||||
|
`timeline-marker--${item.type}`,
|
||||||
|
{ 'timeline-marker--pulse': item.isNew }
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
:color="getIconColor(item.type)"
|
||||||
|
size="16"
|
||||||
|
>
|
||||||
|
{{ item.icon }}
|
||||||
|
</v-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Timeline Content -->
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-header">
|
||||||
|
<h4 class="timeline-title">{{ item.title }}</h4>
|
||||||
|
<span class="timeline-time">{{ formatTime(item.timestamp) }}</span>
|
||||||
|
</div>
|
||||||
|
<p class="timeline-description">{{ item.description }}</p>
|
||||||
|
|
||||||
|
<!-- Optional metadata -->
|
||||||
|
<div v-if="item.metadata" class="timeline-metadata">
|
||||||
|
<v-chip
|
||||||
|
v-for="(meta, key) in item.metadata"
|
||||||
|
:key="key"
|
||||||
|
size="x-small"
|
||||||
|
variant="tonal"
|
||||||
|
:color="getMetaColor(key)"
|
||||||
|
class="mr-1"
|
||||||
|
>
|
||||||
|
{{ meta }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
interface TimelineActivity {
|
||||||
|
id: string | number;
|
||||||
|
type: 'event' | 'payment' | 'achievement' | 'profile' | 'system';
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
timestamp: string | Date;
|
||||||
|
icon: string;
|
||||||
|
isNew?: boolean;
|
||||||
|
metadata?: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
activities: TimelineActivity[];
|
||||||
|
maxItems?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
maxItems: 10
|
||||||
|
});
|
||||||
|
|
||||||
|
// Compute visible activities
|
||||||
|
const visibleActivities = computed(() => {
|
||||||
|
return props.activities.slice(0, props.maxItems);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get icon color based on activity type
|
||||||
|
const getIconColor = (type: string) => {
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
event: 'error',
|
||||||
|
payment: 'success',
|
||||||
|
achievement: 'warning',
|
||||||
|
profile: 'info',
|
||||||
|
system: 'grey'
|
||||||
|
};
|
||||||
|
return colors[type] || 'grey';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get metadata chip color
|
||||||
|
const getMetaColor = (key: string) => {
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
status: 'success',
|
||||||
|
category: 'primary',
|
||||||
|
amount: 'warning',
|
||||||
|
level: 'info'
|
||||||
|
};
|
||||||
|
return colors[key] || 'grey';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Format timestamp
|
||||||
|
const formatTime = (timestamp: string | Date) => {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = now.getTime() - date.getTime();
|
||||||
|
const diffMins = Math.floor(diffMs / 60000);
|
||||||
|
const diffHours = Math.floor(diffMs / 3600000);
|
||||||
|
const diffDays = Math.floor(diffMs / 86400000);
|
||||||
|
|
||||||
|
if (diffMins < 1) return 'Just now';
|
||||||
|
if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
|
||||||
|
if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
|
||||||
|
if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
|
||||||
|
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.activity-timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2rem;
|
||||||
|
|
||||||
|
// Vertical line
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0.75rem;
|
||||||
|
top: 0.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
width: 2px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(220, 38, 38, 0.3),
|
||||||
|
rgba(220, 38, 38, 0.1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
|
||||||
|
&--last {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-marker {
|
||||||
|
position: absolute;
|
||||||
|
left: -1.25rem;
|
||||||
|
top: 0.125rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: white;
|
||||||
|
border: 2px solid;
|
||||||
|
z-index: 1;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&--event {
|
||||||
|
border-color: rgb(220, 38, 38);
|
||||||
|
background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
&--payment {
|
||||||
|
border-color: rgb(34, 197, 94);
|
||||||
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
&--achievement {
|
||||||
|
border-color: rgb(245, 158, 11);
|
||||||
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
&--profile {
|
||||||
|
border-color: rgb(59, 130, 246);
|
||||||
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
&--system {
|
||||||
|
border-color: rgb(156, 163, 175);
|
||||||
|
background: linear-gradient(135deg, rgba(156, 163, 175, 0.1), rgba(156, 163, 175, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
&--pulse {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
opacity: 0;
|
||||||
|
animation: pulse-ring 2s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-ring {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.8);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.4);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.8),
|
||||||
|
rgba(255, 255, 255, 0.6)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-time {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(156, 163, 175);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-description {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-metadata {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.activity-timeline {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-marker {
|
||||||
|
left: -1rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
<template>
|
||||||
|
<div class="bento-grid" :class="gridClass">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
columns?: number;
|
||||||
|
gap?: 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
responsive?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
columns: 12,
|
||||||
|
gap: 'md',
|
||||||
|
responsive: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const gridClass = computed(() => {
|
||||||
|
return {
|
||||||
|
[`bento-grid--cols-${props.columns}`]: true,
|
||||||
|
[`bento-grid--gap-${props.gap}`]: true,
|
||||||
|
'bento-grid--responsive': props.responsive
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
// Column configurations
|
||||||
|
&--cols-12 {
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--cols-6 {
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--cols-4 {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--cols-3 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gap sizes
|
||||||
|
&--gap-sm {
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--gap-md {
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--gap-lg {
|
||||||
|
gap: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--gap-xl {
|
||||||
|
gap: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive behavior
|
||||||
|
&--responsive {
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 641px) and (max-width: 768px) {
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
grid-template-columns: repeat(8, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global Bento Item Classes
|
||||||
|
:deep(.bento-item) {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
// Size variants
|
||||||
|
&--small {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--medium {
|
||||||
|
grid-column: span 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--xlarge {
|
||||||
|
grid-column: span 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--full {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Height variants
|
||||||
|
&--tall {
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--xtall {
|
||||||
|
grid-row: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive overrides
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
&--small,
|
||||||
|
&--medium,
|
||||||
|
&--large,
|
||||||
|
&--xlarge {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 641px) and (max-width: 768px) {
|
||||||
|
&--small {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--medium,
|
||||||
|
&--large {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--xlarge {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
&--small {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--medium {
|
||||||
|
grid-column: span 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--xlarge {
|
||||||
|
grid-column: span 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,315 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 20 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 400,
|
||||||
|
duration: 600,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="events-card"
|
||||||
|
>
|
||||||
|
<div class="events-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<v-icon color="error" size="20">mdi-calendar</v-icon>
|
||||||
|
<h3 class="events-title">Upcoming Events</h3>
|
||||||
|
</div>
|
||||||
|
<v-btn
|
||||||
|
variant="text"
|
||||||
|
color="error"
|
||||||
|
size="small"
|
||||||
|
@click="$emit('view-all')"
|
||||||
|
>
|
||||||
|
View All
|
||||||
|
<v-icon end size="16">mdi-arrow-right</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="events-list">
|
||||||
|
<div
|
||||||
|
v-for="(event, index) in events"
|
||||||
|
:key="event.id"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, x: -20 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
x: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 500 + (index * 100),
|
||||||
|
duration: 500,
|
||||||
|
type: 'spring'
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="event-item"
|
||||||
|
:class="{ 'event-item--pending': event.status === 'pending' }"
|
||||||
|
>
|
||||||
|
<div class="event-date">
|
||||||
|
<div class="date-month">{{ formatMonth(event.date) }}</div>
|
||||||
|
<div class="date-day">{{ formatDay(event.date) }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event-details">
|
||||||
|
<h4 class="event-name">{{ event.title }}</h4>
|
||||||
|
<div class="event-meta">
|
||||||
|
<span class="event-time">
|
||||||
|
<v-icon size="14" color="grey">mdi-clock-outline</v-icon>
|
||||||
|
{{ event.time }}
|
||||||
|
</span>
|
||||||
|
<span class="event-location">
|
||||||
|
<v-icon size="14" color="grey">mdi-map-marker</v-icon>
|
||||||
|
{{ event.location }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event-status">
|
||||||
|
<v-chip
|
||||||
|
:color="event.status === 'confirmed' ? 'success' : 'warning'"
|
||||||
|
size="x-small"
|
||||||
|
variant="tonal"
|
||||||
|
>
|
||||||
|
{{ event.status }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="events-footer">
|
||||||
|
<div class="footer-stats">
|
||||||
|
<span class="stat-item">
|
||||||
|
<v-icon size="16" color="error">mdi-check-circle</v-icon>
|
||||||
|
{{ confirmedCount }} confirmed
|
||||||
|
</span>
|
||||||
|
<span class="stat-item">
|
||||||
|
<v-icon size="16" color="warning">mdi-clock</v-icon>
|
||||||
|
{{ pendingCount }} pending
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
interface Event {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
location: string;
|
||||||
|
status: 'confirmed' | 'pending';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
events: Event[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'view-all': [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// Computed stats
|
||||||
|
const confirmedCount = computed(() =>
|
||||||
|
props.events.filter(e => e.status === 'confirmed').length
|
||||||
|
);
|
||||||
|
|
||||||
|
const pendingCount = computed(() =>
|
||||||
|
props.events.filter(e => e.status === 'pending').length
|
||||||
|
);
|
||||||
|
|
||||||
|
// Date formatting
|
||||||
|
const formatMonth = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDay = (dateString: string) => {
|
||||||
|
return new Date(dateString).getDate();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.events-card {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95),
|
||||||
|
rgba(255, 255, 255, 0.85)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
-webkit-backdrop-filter: blur(30px);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-list {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: rgba(220, 38, 38, 0.05);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(220, 38, 38, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(220, 38, 38, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.8),
|
||||||
|
rgba(255, 255, 255, 0.6)
|
||||||
|
);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
border-color: rgba(220, 38, 38, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--pending {
|
||||||
|
opacity: 0.8;
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-date {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-month {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-day {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-details {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-name {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0 0 0.25rem 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-status {
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.events-footer {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(220, 38, 38, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.event-meta {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,348 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, scale: 0.95 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: 600,
|
||||||
|
duration: 600,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="payment-card"
|
||||||
|
>
|
||||||
|
<!-- Card Header -->
|
||||||
|
<div class="payment-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<v-icon color="success" size="20">mdi-credit-card</v-icon>
|
||||||
|
<h3 class="payment-title">Payment Status</h3>
|
||||||
|
</div>
|
||||||
|
<v-chip
|
||||||
|
color="success"
|
||||||
|
variant="tonal"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<v-icon start size="14">mdi-check-circle</v-icon>
|
||||||
|
Active
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Membership Info -->
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
delay: 700,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="membership-info"
|
||||||
|
>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Membership Type</span>
|
||||||
|
<span class="info-value">{{ membershipType }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Next Payment</span>
|
||||||
|
<span class="info-value">{{ nextPaymentDate }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Amount</span>
|
||||||
|
<span class="info-value amount">${{ membershipAmount }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Payment Method -->
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 10 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 800,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="payment-method"
|
||||||
|
>
|
||||||
|
<div class="method-header">
|
||||||
|
<span class="method-label">Payment Method</span>
|
||||||
|
<v-btn
|
||||||
|
variant="text"
|
||||||
|
color="error"
|
||||||
|
size="x-small"
|
||||||
|
@click="$emit('update-payment')"
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
<div class="method-card">
|
||||||
|
<v-icon color="primary" size="20">mdi-credit-card</v-icon>
|
||||||
|
<span class="card-number">•••• •••• •••• 4242</span>
|
||||||
|
<span class="card-exp">12/25</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Payments -->
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
delay: 900,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="recent-payments"
|
||||||
|
>
|
||||||
|
<h4 class="payments-title">Recent Payments</h4>
|
||||||
|
<div class="payments-list">
|
||||||
|
<div
|
||||||
|
v-for="(payment, index) in paymentHistory"
|
||||||
|
:key="payment.id"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, x: -10 }"
|
||||||
|
:visibleOnce="{
|
||||||
|
opacity: 1,
|
||||||
|
x: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 1000 + (index * 50),
|
||||||
|
duration: 400
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="payment-item"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
size="16"
|
||||||
|
:color="index === 0 ? 'success' : 'grey'"
|
||||||
|
>
|
||||||
|
mdi-check-circle
|
||||||
|
</v-icon>
|
||||||
|
<span class="payment-date">{{ payment.date }}</span>
|
||||||
|
<span class="payment-amount">${{ payment.amount }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Button -->
|
||||||
|
<v-btn
|
||||||
|
color="error"
|
||||||
|
variant="outlined"
|
||||||
|
block
|
||||||
|
class="mt-4"
|
||||||
|
prepend-icon="mdi-history"
|
||||||
|
@click="$emit('update-payment')"
|
||||||
|
>
|
||||||
|
View Payment History
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
interface Payment {
|
||||||
|
id: number;
|
||||||
|
date: string;
|
||||||
|
amount: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
membershipType: string;
|
||||||
|
nextPaymentDate: string;
|
||||||
|
membershipAmount: string;
|
||||||
|
paymentHistory: Payment[];
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>();
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
'update-payment': [];
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.payment-card {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95),
|
||||||
|
rgba(255, 255, 255, 0.85)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
-webkit-backdrop-filter: blur(30px);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.membership-info {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(34, 197, 94, 0.05),
|
||||||
|
rgba(34, 197, 94, 0.02)
|
||||||
|
);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
border: 1px solid rgba(34, 197, 94, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.375rem 0;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&.amount {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-method {
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-label {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.9),
|
||||||
|
rgba(255, 255, 255, 0.7)
|
||||||
|
);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-number {
|
||||||
|
flex: 1;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-exp {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-payments {
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payments-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payments-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-date {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-amount {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.payment-card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,443 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, scale: 0.95 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 600,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="profile-card"
|
||||||
|
>
|
||||||
|
<!-- Background Gradient -->
|
||||||
|
<div class="profile-background">
|
||||||
|
<div class="profile-gradient"></div>
|
||||||
|
<div class="profile-pattern"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="profile-content">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<div class="profile-header">
|
||||||
|
<div class="profile-avatar-wrapper">
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ scale: 0 }"
|
||||||
|
:enter="{
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: 200,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="profile-avatar"
|
||||||
|
>
|
||||||
|
<ProfileAvatar
|
||||||
|
v-if="member"
|
||||||
|
:member-id="member.member_id"
|
||||||
|
:first-name="member.first_name"
|
||||||
|
:last-name="member.last_name"
|
||||||
|
size="x-large"
|
||||||
|
:show-badge="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="profile-level-badge">
|
||||||
|
<v-icon size="16" color="white">mdi-star</v-icon>
|
||||||
|
<span>{{ memberLevel }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-info">
|
||||||
|
<h2
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 10 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 300,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="profile-name"
|
||||||
|
>
|
||||||
|
{{ fullName }}
|
||||||
|
</h2>
|
||||||
|
<p class="profile-email">{{ email }}</p>
|
||||||
|
<div class="profile-badges">
|
||||||
|
<v-chip
|
||||||
|
color="error"
|
||||||
|
variant="tonal"
|
||||||
|
size="small"
|
||||||
|
class="profile-badge"
|
||||||
|
>
|
||||||
|
<v-icon start size="14">mdi-crown</v-icon>
|
||||||
|
{{ membershipType }}
|
||||||
|
</v-chip>
|
||||||
|
<v-chip
|
||||||
|
variant="outlined"
|
||||||
|
color="error"
|
||||||
|
size="small"
|
||||||
|
class="profile-badge"
|
||||||
|
>
|
||||||
|
<v-icon start size="14">mdi-calendar</v-icon>
|
||||||
|
Since {{ memberSince }}
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Section -->
|
||||||
|
<div class="profile-stats">
|
||||||
|
<div
|
||||||
|
v-for="(stat, index) in stats"
|
||||||
|
:key="stat.label"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 20 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
delay: 400 + (index * 100),
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="stat-item"
|
||||||
|
>
|
||||||
|
<div class="stat-value">{{ stat.value }}</div>
|
||||||
|
<div class="stat-label">{{ stat.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Progress Section -->
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
delay: 700,
|
||||||
|
duration: 500
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="profile-progress"
|
||||||
|
>
|
||||||
|
<div class="progress-header">
|
||||||
|
<span class="progress-title">Level Progress</span>
|
||||||
|
<span class="progress-percentage">{{ levelProgress }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div
|
||||||
|
class="progress-fill"
|
||||||
|
:style="{ width: `${levelProgress}%` }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<p class="progress-subtitle">
|
||||||
|
{{ pointsToNext }} points to {{ nextLevel }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Button -->
|
||||||
|
<v-btn
|
||||||
|
color="error"
|
||||||
|
variant="flat"
|
||||||
|
block
|
||||||
|
class="profile-action mt-4"
|
||||||
|
prepend-icon="mdi-account-edit"
|
||||||
|
@click="$emit('edit-profile')"
|
||||||
|
>
|
||||||
|
Edit Profile
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import type { Member } from '~/utils/types';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
member: Member | null;
|
||||||
|
memberPoints?: number;
|
||||||
|
eventsAttended?: number;
|
||||||
|
connections?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
memberPoints: 2450,
|
||||||
|
eventsAttended: 12,
|
||||||
|
connections: 48
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'edit-profile': [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// Computed properties
|
||||||
|
const fullName = computed(() => {
|
||||||
|
if (props.member) {
|
||||||
|
return `${props.member.first_name} ${props.member.last_name}`;
|
||||||
|
}
|
||||||
|
return 'Member';
|
||||||
|
});
|
||||||
|
|
||||||
|
const email = computed(() => props.member?.email || '');
|
||||||
|
|
||||||
|
const membershipType = computed(() => 'Premium');
|
||||||
|
const memberLevel = computed(() => 'Gold');
|
||||||
|
|
||||||
|
const memberSince = computed(() => {
|
||||||
|
if (props.member?.join_date) {
|
||||||
|
return new Date(props.member.join_date).getFullYear();
|
||||||
|
}
|
||||||
|
return new Date().getFullYear();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Stats data
|
||||||
|
const stats = computed(() => [
|
||||||
|
{ label: 'Points', value: props.memberPoints.toLocaleString() },
|
||||||
|
{ label: 'Events', value: props.eventsAttended },
|
||||||
|
{ label: 'Connections', value: props.connections }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Level progress calculation
|
||||||
|
const levelProgress = computed(() => {
|
||||||
|
// Calculate progress to next level (mock calculation)
|
||||||
|
const currentLevelMin = 2000;
|
||||||
|
const nextLevelMin = 3000;
|
||||||
|
const progress = ((props.memberPoints - currentLevelMin) / (nextLevelMin - currentLevelMin)) * 100;
|
||||||
|
return Math.min(Math.max(progress, 0), 100).toFixed(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
const pointsToNext = computed(() => {
|
||||||
|
const nextLevelMin = 3000;
|
||||||
|
return nextLevelMin - props.memberPoints;
|
||||||
|
});
|
||||||
|
|
||||||
|
const nextLevel = computed(() => 'Platinum');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.profile-card {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95),
|
||||||
|
rgba(255, 255, 255, 0.85)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
-webkit-backdrop-filter: blur(30px);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-gradient {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(220, 38, 38, 0.9),
|
||||||
|
rgba(185, 28, 28, 0.9)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-pattern {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1.25rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar-wrapper {
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 4px solid white;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-level-badge {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
right: -4px;
|
||||||
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||||
|
color: white;
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 0.625rem;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.125rem;
|
||||||
|
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-info {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-name {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0 0 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-email {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-badges {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-badge {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(220, 38, 38, 0.03),
|
||||||
|
rgba(220, 38, 38, 0.01)
|
||||||
|
);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(156, 163, 175);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-progress {
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percentage {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgb(220, 38, 38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 8px;
|
||||||
|
background: rgba(220, 38, 38, 0.1);
|
||||||
|
border-radius: 9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #dc2626, #ef4444);
|
||||||
|
border-radius: 9999px;
|
||||||
|
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-subtitle {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(156, 163, 175);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-action {
|
||||||
|
margin-top: auto;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.profile-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-badges {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 20, scale: 0.9 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: delay,
|
||||||
|
duration: 500,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
:hovered="{
|
||||||
|
scale: 1.05,
|
||||||
|
y: -5,
|
||||||
|
transition: {
|
||||||
|
duration: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="quick-action-card"
|
||||||
|
@click="$emit('click')"
|
||||||
|
>
|
||||||
|
<div class="action-icon" :style="{ background: iconBackground }">
|
||||||
|
<v-icon :color="color" size="28">{{ icon }}</v-icon>
|
||||||
|
</div>
|
||||||
|
<h4 class="action-title">{{ title }}</h4>
|
||||||
|
<v-icon class="action-arrow" color="grey" size="16">mdi-arrow-right</v-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
icon: string;
|
||||||
|
title: string;
|
||||||
|
color?: string;
|
||||||
|
delay?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
color: 'error',
|
||||||
|
delay: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
click: [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// Compute icon background based on color
|
||||||
|
const iconBackground = computed(() => {
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
error: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
|
||||||
|
primary: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.05))',
|
||||||
|
success: 'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))',
|
||||||
|
warning: 'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))',
|
||||||
|
info: 'linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05))'
|
||||||
|
};
|
||||||
|
return colors[props.color] || colors.error;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.quick-action-card {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95),
|
||||||
|
rgba(255, 255, 255, 0.85)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.06),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
|
padding: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
rgba(220, 38, 38, 0.3),
|
||||||
|
rgba(220, 38, 38, 0.1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(220, 38, 38, 0.2);
|
||||||
|
box-shadow:
|
||||||
|
0 12px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-arrow {
|
||||||
|
transform: translateX(4px);
|
||||||
|
color: rgb(220, 38, 38) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
transform: rotate(-5deg) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-title {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.quick-action-card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,332 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, y: 20, scale: 0.95 }"
|
||||||
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: delay,
|
||||||
|
duration: 600,
|
||||||
|
type: 'spring',
|
||||||
|
stiffness: 200,
|
||||||
|
damping: 20
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
:hovered="{
|
||||||
|
scale: 1.02,
|
||||||
|
y: -2,
|
||||||
|
transition: {
|
||||||
|
duration: 200
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="stats-card"
|
||||||
|
>
|
||||||
|
<div class="stats-card-inner">
|
||||||
|
<!-- Icon Section -->
|
||||||
|
<div class="stats-icon" :style="{ background: iconBackground }">
|
||||||
|
<v-icon :color="iconColor" size="24">{{ icon }}</v-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content Section -->
|
||||||
|
<div class="stats-content">
|
||||||
|
<p class="stats-label">{{ label }}</p>
|
||||||
|
<div class="stats-value-wrapper">
|
||||||
|
<h3
|
||||||
|
class="stats-value"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0 }"
|
||||||
|
:visible="{
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
delay: delay + 200,
|
||||||
|
duration: 800
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span v-if="prefix">{{ prefix }}</span>
|
||||||
|
<AnimatedNumber :value="value" :duration="1500" :format="formatNumber" />
|
||||||
|
<span v-if="suffix">{{ suffix }}</span>
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
v-if="change !== undefined"
|
||||||
|
class="stats-change"
|
||||||
|
:class="changeClass"
|
||||||
|
v-motion
|
||||||
|
:initial="{ opacity: 0, scale: 0.8 }"
|
||||||
|
:visible="{
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: delay + 400,
|
||||||
|
duration: 500,
|
||||||
|
type: 'spring'
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<v-icon size="16">
|
||||||
|
{{ change >= 0 ? 'mdi-trending-up' : 'mdi-trending-down' }}
|
||||||
|
</v-icon>
|
||||||
|
<span>{{ Math.abs(change) }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p v-if="subtitle" class="stats-subtitle">{{ subtitle }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Background Decoration -->
|
||||||
|
<div class="stats-decoration">
|
||||||
|
<svg viewBox="0 0 200 100" class="stats-chart">
|
||||||
|
<path
|
||||||
|
:d="sparklinePath"
|
||||||
|
fill="none"
|
||||||
|
:stroke="decorationColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
opacity="0.2"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
:d="sparklinePath"
|
||||||
|
fill="url(#gradient)"
|
||||||
|
opacity="0.1"
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" :stop-color="decorationColor" stop-opacity="0.3" />
|
||||||
|
<stop offset="100%" :stop-color="decorationColor" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
icon: string;
|
||||||
|
iconColor?: string;
|
||||||
|
iconBackground?: string;
|
||||||
|
change?: number;
|
||||||
|
prefix?: string;
|
||||||
|
suffix?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
delay?: number;
|
||||||
|
decorationColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
iconColor: 'error',
|
||||||
|
iconBackground: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
|
||||||
|
delay: 0,
|
||||||
|
decorationColor: '#dc2626'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Animated number component
|
||||||
|
const AnimatedNumber = {
|
||||||
|
props: {
|
||||||
|
value: Number,
|
||||||
|
duration: { type: Number, default: 1000 },
|
||||||
|
format: Function
|
||||||
|
},
|
||||||
|
setup(props: any) {
|
||||||
|
const displayValue = ref(0);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const startTime = Date.now();
|
||||||
|
const startValue = 0;
|
||||||
|
const endValue = props.value;
|
||||||
|
|
||||||
|
const updateValue = () => {
|
||||||
|
const now = Date.now();
|
||||||
|
const progress = Math.min((now - startTime) / props.duration, 1);
|
||||||
|
|
||||||
|
// Easing function for smooth animation
|
||||||
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||||
|
displayValue.value = startValue + (endValue - startValue) * easeOutQuart;
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(updateValue);
|
||||||
|
} else {
|
||||||
|
displayValue.value = endValue;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateValue();
|
||||||
|
});
|
||||||
|
|
||||||
|
const formattedValue = computed(() => {
|
||||||
|
if (props.format) {
|
||||||
|
return props.format(displayValue.value);
|
||||||
|
}
|
||||||
|
return Math.round(displayValue.value).toLocaleString();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => formattedValue.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Compute change indicator class
|
||||||
|
const changeClass = computed(() => {
|
||||||
|
if (props.change === undefined) return '';
|
||||||
|
return props.change >= 0 ? 'stats-change--positive' : 'stats-change--negative';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format number function
|
||||||
|
const formatNumber = (num: number) => {
|
||||||
|
if (num >= 1000000) {
|
||||||
|
return (num / 1000000).toFixed(1) + 'M';
|
||||||
|
} else if (num >= 1000) {
|
||||||
|
return (num / 1000).toFixed(1) + 'K';
|
||||||
|
}
|
||||||
|
return Math.round(num).toLocaleString();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Generate random sparkline path
|
||||||
|
const sparklinePath = computed(() => {
|
||||||
|
const points = 10;
|
||||||
|
const width = 200;
|
||||||
|
const height = 100;
|
||||||
|
const values = Array.from({ length: points }, () => Math.random() * 0.6 + 0.2);
|
||||||
|
|
||||||
|
const path = values.map((value, index) => {
|
||||||
|
const x = (index / (points - 1)) * width;
|
||||||
|
const y = height - (value * height);
|
||||||
|
return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
|
||||||
|
}).join(' ');
|
||||||
|
|
||||||
|
return `${path} L ${width} ${height} L 0 ${height} Z`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.stats-card {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.9),
|
||||||
|
rgba(255, 255, 255, 0.7)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow:
|
||||||
|
0 12px 40px rgba(0, 0, 0, 0.12),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card-inner {
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-value-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-change {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&--positive {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: rgb(34, 197, 94);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--negative {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
color: rgb(239, 68, 68);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-subtitle {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgb(156, 163, 175);
|
||||||
|
margin: 0.25rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-decoration {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 60%;
|
||||||
|
height: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.stats-value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card-inner {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
"@types/jsonwebtoken": "^9.0.10",
|
"@types/jsonwebtoken": "^9.0.10",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"@vite-pwa/nuxt": "^0.10.8",
|
"@vite-pwa/nuxt": "^0.10.8",
|
||||||
|
"@vueuse/core": "^13.8.0",
|
||||||
"@vueuse/motion": "^3.0.3",
|
"@vueuse/motion": "^3.0.3",
|
||||||
"cookie": "^0.6.0",
|
"cookie": "^0.6.0",
|
||||||
"formidable": "^3.5.4",
|
"formidable": "^3.5.4",
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
"@types/jsonwebtoken": "^9.0.10",
|
"@types/jsonwebtoken": "^9.0.10",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"@vite-pwa/nuxt": "^0.10.8",
|
"@vite-pwa/nuxt": "^0.10.8",
|
||||||
|
"@vueuse/core": "^13.8.0",
|
||||||
"@vueuse/motion": "^3.0.3",
|
"@vueuse/motion": "^3.0.3",
|
||||||
"cookie": "^0.6.0",
|
"cookie": "^0.6.0",
|
||||||
"formidable": "^3.5.4",
|
"formidable": "^3.5.4",
|
||||||
|
|
|
||||||
|
|
@ -1,315 +1,182 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="member-dashboard">
|
||||||
<!-- Header -->
|
<!-- Animated Header -->
|
||||||
<div class="d-flex justify-space-between align-center mb-6">
|
<div
|
||||||
<div>
|
v-motion
|
||||||
<h1 class="text-h4 font-weight-bold">Member Dashboard</h1>
|
:initial="{ opacity: 0, y: -20 }"
|
||||||
<p class="text-body-1 text-medium-emphasis">Welcome back, {{ firstName }}</p>
|
:enter="{
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 600,
|
||||||
|
type: 'spring'
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
class="dashboard-header"
|
||||||
|
>
|
||||||
|
<div class="header-content">
|
||||||
|
<h1 class="dashboard-title">
|
||||||
|
<span class="title-gradient">Welcome back,</span>
|
||||||
|
<span class="title-name">{{ firstName }}</span>
|
||||||
|
</h1>
|
||||||
|
<p class="dashboard-subtitle">Here's what's happening with your account today</p>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<v-btn
|
||||||
|
color="white"
|
||||||
|
variant="outlined"
|
||||||
|
prepend-icon="mdi-bell"
|
||||||
|
class="notification-btn"
|
||||||
|
>
|
||||||
|
<v-badge
|
||||||
|
color="error"
|
||||||
|
dot
|
||||||
|
offset-x="-8"
|
||||||
|
offset-y="-8"
|
||||||
|
>
|
||||||
|
Notifications
|
||||||
|
</v-badge>
|
||||||
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
<v-btn
|
|
||||||
color="error"
|
|
||||||
variant="flat"
|
|
||||||
prepend-icon="mdi-account-edit"
|
|
||||||
@click="navigateTo('/member/profile')"
|
|
||||||
>
|
|
||||||
Edit Profile
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Profile Info Card -->
|
<!-- Bento Grid Dashboard -->
|
||||||
<v-card class="mb-6" elevation="2">
|
<BentoGrid gap="lg" class="dashboard-grid">
|
||||||
<v-card-title class="d-flex align-center">
|
<!-- Profile Card -->
|
||||||
<v-icon color="error" class="mr-2">mdi-account</v-icon>
|
<div class="bento-item bento-item--medium bento-item--tall">
|
||||||
Profile Information
|
<ProfileCard
|
||||||
</v-card-title>
|
:member="memberData"
|
||||||
<v-card-text>
|
:member-points="memberPoints"
|
||||||
<v-row>
|
:events-attended="12"
|
||||||
<v-col cols="auto">
|
:connections="48"
|
||||||
<ProfileAvatar
|
@edit-profile="navigateTo('/member/profile')"
|
||||||
:member-id="memberData?.member_id"
|
/>
|
||||||
:first-name="memberData?.first_name"
|
</div>
|
||||||
:last-name="memberData?.last_name"
|
|
||||||
size="large"
|
|
||||||
:show-badge="false"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
<v-col>
|
|
||||||
<div class="d-flex justify-space-between align-start mb-3">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-h6 font-weight-bold">{{ fullName }}</h3>
|
|
||||||
<p class="text-body-2 text-medium-emphasis">{{ email }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex gap-2">
|
|
||||||
<v-chip
|
|
||||||
color="error"
|
|
||||||
variant="tonal"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
{{ membershipType }}
|
|
||||||
</v-chip>
|
|
||||||
<v-chip
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
size="small"
|
|
||||||
prepend-icon="mdi-star"
|
|
||||||
>
|
|
||||||
{{ memberLevel }}
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-row class="mt-4">
|
|
||||||
<v-col cols="12" md="4">
|
|
||||||
<div class="text-caption text-medium-emphasis">Member Since</div>
|
|
||||||
<div class="font-weight-medium">{{ memberSince }}</div>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="4">
|
|
||||||
<div class="text-caption text-medium-emphasis">Points</div>
|
|
||||||
<div class="font-weight-medium">{{ memberPoints.toLocaleString() }}</div>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" md="4">
|
|
||||||
<div class="text-caption text-medium-emphasis">Status</div>
|
|
||||||
<div class="font-weight-medium text-success">Active</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-row>
|
<!-- Statistics Cards -->
|
||||||
<!-- Upcoming Events -->
|
<div class="bento-item bento-item--small">
|
||||||
<v-col cols="12" lg="6">
|
<StatsCard
|
||||||
<v-card elevation="2" class="h-100">
|
label="Total Points"
|
||||||
<v-card-title class="d-flex align-center">
|
:value="memberPoints"
|
||||||
<v-icon color="error" class="mr-2">mdi-calendar</v-icon>
|
icon="mdi-star"
|
||||||
Upcoming Events
|
icon-color="warning"
|
||||||
</v-card-title>
|
:icon-background="'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))'"
|
||||||
<v-card-subtitle>Your registered events and activities</v-card-subtitle>
|
:change="12"
|
||||||
<v-card-text>
|
suffix="pts"
|
||||||
<v-list lines="three" class="pa-0">
|
:delay="100"
|
||||||
<template v-for="(event, index) in upcomingEvents" :key="event.id">
|
decoration-color="#f59e0b"
|
||||||
<v-list-item class="px-0">
|
/>
|
||||||
<v-card variant="outlined" class="w-100">
|
</div>
|
||||||
<v-card-text>
|
|
||||||
<div class="d-flex justify-space-between align-start mb-2">
|
|
||||||
<h4 class="text-body-1 font-weight-medium">{{ event.title }}</h4>
|
|
||||||
<v-chip
|
|
||||||
:color="event.status === 'confirmed' ? 'success' : 'warning'"
|
|
||||||
size="x-small"
|
|
||||||
variant="tonal"
|
|
||||||
>
|
|
||||||
<v-icon start size="x-small">
|
|
||||||
{{ event.status === 'confirmed' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
|
|
||||||
</v-icon>
|
|
||||||
{{ event.status }}
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-wrap gap-3 text-caption text-medium-emphasis">
|
|
||||||
<div class="d-flex align-center">
|
|
||||||
<v-icon size="x-small" class="mr-1">mdi-calendar</v-icon>
|
|
||||||
{{ formatDate(event.date) }}
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-center">
|
|
||||||
<v-icon size="x-small" class="mr-1">mdi-clock-outline</v-icon>
|
|
||||||
{{ event.time }}
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-center">
|
|
||||||
<v-icon size="x-small" class="mr-1">mdi-map-marker</v-icon>
|
|
||||||
{{ event.location }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-list>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
block
|
|
||||||
class="mt-4"
|
|
||||||
@click="navigateTo('/member/events')"
|
|
||||||
>
|
|
||||||
View All Events
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<!-- Payment Status -->
|
<div class="bento-item bento-item--small">
|
||||||
<v-col cols="12" lg="6">
|
<StatsCard
|
||||||
<v-card elevation="2" class="h-100">
|
label="Events Attended"
|
||||||
<v-card-title class="d-flex align-center">
|
:value="upcomingEvents.length"
|
||||||
<v-icon color="error" class="mr-2">mdi-credit-card</v-icon>
|
icon="mdi-calendar-check"
|
||||||
Payment Status
|
icon-color="success"
|
||||||
</v-card-title>
|
:icon-background="'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))'"
|
||||||
<v-card-subtitle>Membership and payment information</v-card-subtitle>
|
subtitle="This month"
|
||||||
<v-card-text>
|
:delay="200"
|
||||||
<!-- Current Membership -->
|
decoration-color="#22c55e"
|
||||||
<v-card variant="outlined" class="mb-4">
|
/>
|
||||||
<v-card-text>
|
</div>
|
||||||
<div class="d-flex justify-space-between align-center mb-3">
|
|
||||||
<h4 class="text-body-1 font-weight-medium">Current Membership</h4>
|
|
||||||
<v-chip
|
|
||||||
color="success"
|
|
||||||
size="x-small"
|
|
||||||
variant="tonal"
|
|
||||||
>
|
|
||||||
<v-icon start size="x-small">mdi-check-circle</v-icon>
|
|
||||||
Active
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
<div class="text-body-2">
|
|
||||||
<div class="d-flex justify-space-between py-1">
|
|
||||||
<span class="text-medium-emphasis">Plan:</span>
|
|
||||||
<span class="font-weight-medium">{{ membershipType }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-space-between py-1">
|
|
||||||
<span class="text-medium-emphasis">Next Payment:</span>
|
|
||||||
<span class="font-weight-medium">{{ nextPaymentDate }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-space-between py-1">
|
|
||||||
<span class="text-medium-emphasis">Amount:</span>
|
|
||||||
<span class="font-weight-medium">${{ membershipAmount }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- Payment History -->
|
<div class="bento-item bento-item--small">
|
||||||
<v-card variant="outlined" class="mb-4">
|
<StatsCard
|
||||||
<v-card-text>
|
label="Active Membership"
|
||||||
<h4 class="text-body-1 font-weight-medium mb-3">Payment History</h4>
|
:value="membershipDays"
|
||||||
<div class="text-body-2">
|
icon="mdi-crown"
|
||||||
<div
|
icon-color="error"
|
||||||
v-for="payment in paymentHistory"
|
:change="100"
|
||||||
:key="payment.id"
|
suffix="days"
|
||||||
class="d-flex justify-space-between align-center py-1"
|
subtitle="Premium member"
|
||||||
>
|
:delay="300"
|
||||||
<span class="text-medium-emphasis">{{ payment.date }}</span>
|
/>
|
||||||
<div class="d-flex align-center gap-2">
|
</div>
|
||||||
<span class="font-weight-medium">${{ payment.amount }}</span>
|
|
||||||
<v-chip
|
|
||||||
color="success"
|
|
||||||
size="x-small"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
Paid
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<v-btn
|
<!-- Upcoming Events Card -->
|
||||||
color="error"
|
<div class="bento-item bento-item--large">
|
||||||
variant="flat"
|
<EventsCard
|
||||||
block
|
:events="upcomingEvents"
|
||||||
prepend-icon="mdi-credit-card"
|
@view-all="navigateTo('/member/events')"
|
||||||
@click="navigateTo('/member/payments')"
|
/>
|
||||||
>
|
</div>
|
||||||
Update Payment Method
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Recent Activity -->
|
<!-- Payment Status Card -->
|
||||||
<v-card elevation="2" class="mt-6">
|
<div class="bento-item bento-item--medium">
|
||||||
<v-card-title class="d-flex align-center">
|
<PaymentCard
|
||||||
<v-icon color="error" class="mr-2">mdi-history</v-icon>
|
:membership-type="membershipType"
|
||||||
Recent Activity
|
:next-payment-date="nextPaymentDate"
|
||||||
</v-card-title>
|
:membership-amount="membershipAmount"
|
||||||
<v-card-subtitle>Your latest actions and updates</v-card-subtitle>
|
:payment-history="paymentHistory"
|
||||||
<v-card-text>
|
@update-payment="navigateTo('/member/payments')"
|
||||||
<v-timeline side="end" density="compact">
|
/>
|
||||||
<v-timeline-item
|
</div>
|
||||||
v-for="activity in recentActivity"
|
|
||||||
:key="activity.id"
|
<!-- Activity Timeline -->
|
||||||
:dot-color="activity.color"
|
<div class="bento-item bento-item--medium bento-item--tall">
|
||||||
size="small"
|
<div class="glass-card activity-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<v-icon color="error" size="20">mdi-history</v-icon>
|
||||||
|
<h3 class="card-title">Recent Activity</h3>
|
||||||
|
</div>
|
||||||
|
<ActivityTimeline
|
||||||
|
:activities="formattedActivities"
|
||||||
|
:max-items="5"
|
||||||
|
/>
|
||||||
|
<v-btn
|
||||||
|
variant="outlined"
|
||||||
|
color="error"
|
||||||
|
block
|
||||||
|
class="mt-4"
|
||||||
|
@click="navigateTo('/member/activity')"
|
||||||
>
|
>
|
||||||
<template v-slot:icon>
|
View All Activity
|
||||||
<v-icon size="x-small">{{ activity.icon }}</v-icon>
|
</v-btn>
|
||||||
</template>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<div class="text-body-2 font-weight-medium">{{ activity.description }}</div>
|
</BentoGrid>
|
||||||
<div class="text-caption text-medium-emphasis">{{ activity.timestamp }}</div>
|
|
||||||
</div>
|
|
||||||
</v-timeline-item>
|
|
||||||
</v-timeline>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
variant="outlined"
|
|
||||||
color="error"
|
|
||||||
block
|
|
||||||
class="mt-4"
|
|
||||||
@click="navigateTo('/member/activity')"
|
|
||||||
>
|
|
||||||
View All Activity
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<v-row class="mt-6">
|
<!-- Quick Actions Section -->
|
||||||
<v-col cols="12">
|
<div
|
||||||
<h3 class="text-h6 mb-3">Quick Actions</h3>
|
v-motion
|
||||||
</v-col>
|
:initial="{ opacity: 0, y: 20 }"
|
||||||
<v-col cols="6" sm="3">
|
:enter="{
|
||||||
<v-card
|
opacity: 1,
|
||||||
elevation="1"
|
y: 0,
|
||||||
class="text-center pa-4 cursor-pointer"
|
transition: {
|
||||||
hover
|
delay: 800,
|
||||||
@click="navigateTo('/member/events')"
|
duration: 600
|
||||||
>
|
}
|
||||||
<v-icon size="32" color="error" class="mb-2">mdi-calendar-plus</v-icon>
|
}"
|
||||||
<div class="text-body-2">Register for Event</div>
|
class="quick-actions-section"
|
||||||
</v-card>
|
>
|
||||||
</v-col>
|
<h3 class="section-title">Quick Actions</h3>
|
||||||
<v-col cols="6" sm="3">
|
<div class="quick-actions-grid">
|
||||||
<v-card
|
<QuickActionCard
|
||||||
elevation="1"
|
v-for="(action, index) in quickActions"
|
||||||
class="text-center pa-4 cursor-pointer"
|
:key="action.title"
|
||||||
hover
|
:icon="action.icon"
|
||||||
@click="navigateTo('/member/directory')"
|
:title="action.title"
|
||||||
>
|
:color="action.color"
|
||||||
<v-icon size="32" color="error" class="mb-2">mdi-account-group</v-icon>
|
:delay="900 + (index * 100)"
|
||||||
<div class="text-body-2">Member Directory</div>
|
@click="navigateTo(action.route)"
|
||||||
</v-card>
|
/>
|
||||||
</v-col>
|
</div>
|
||||||
<v-col cols="6" sm="3">
|
</div>
|
||||||
<v-card
|
|
||||||
elevation="1"
|
|
||||||
class="text-center pa-4 cursor-pointer"
|
|
||||||
hover
|
|
||||||
@click="navigateTo('/member/resources')"
|
|
||||||
>
|
|
||||||
<v-icon size="32" color="error" class="mb-2">mdi-book-open-variant</v-icon>
|
|
||||||
<div class="text-body-2">Resources</div>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" sm="3">
|
|
||||||
<v-card
|
|
||||||
elevation="1"
|
|
||||||
class="text-center pa-4 cursor-pointer"
|
|
||||||
hover
|
|
||||||
@click="navigateTo('/member/support')"
|
|
||||||
>
|
|
||||||
<v-icon size="32" color="error" class="mb-2">mdi-help-circle</v-icon>
|
|
||||||
<div class="text-body-2">Get Support</div>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Member } from '~/utils/types';
|
import type { Member } from '~/utils/types';
|
||||||
|
import BentoGrid from '~/components/dashboard/BentoGrid.vue';
|
||||||
|
import StatsCard from '~/components/dashboard/StatsCard.vue';
|
||||||
|
import ProfileCard from '~/components/dashboard/ProfileCard.vue';
|
||||||
|
import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
|
||||||
|
import EventsCard from '~/components/dashboard/EventsCard.vue';
|
||||||
|
import PaymentCard from '~/components/dashboard/PaymentCard.vue';
|
||||||
|
import QuickActionCard from '~/components/dashboard/QuickActionCard.vue';
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'member',
|
layout: 'member',
|
||||||
|
|
@ -346,6 +213,17 @@ const memberPoints = ref(2450);
|
||||||
const nextPaymentDate = ref('Feb 15, 2024');
|
const nextPaymentDate = ref('Feb 15, 2024');
|
||||||
const membershipAmount = ref('99.00');
|
const membershipAmount = ref('99.00');
|
||||||
|
|
||||||
|
// Calculate membership days
|
||||||
|
const membershipDays = computed(() => {
|
||||||
|
if (memberData.value?.join_date) {
|
||||||
|
const joinDate = new Date(memberData.value.join_date);
|
||||||
|
const today = new Date();
|
||||||
|
const diffTime = Math.abs(today.getTime() - joinDate.getTime());
|
||||||
|
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
}
|
||||||
|
return 365;
|
||||||
|
});
|
||||||
|
|
||||||
// Mock data - replace with actual API calls
|
// Mock data - replace with actual API calls
|
||||||
const upcomingEvents = ref([
|
const upcomingEvents = ref([
|
||||||
{
|
{
|
||||||
|
|
@ -415,6 +293,43 @@ const recentActivity = ref([
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// Format activities for the timeline component
|
||||||
|
const formattedActivities = computed(() => {
|
||||||
|
return recentActivity.value.map(activity => ({
|
||||||
|
...activity,
|
||||||
|
title: activity.description.split(' ').slice(0, 3).join(' '),
|
||||||
|
description: activity.description
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quick actions data
|
||||||
|
const quickActions = ref([
|
||||||
|
{
|
||||||
|
title: "View Events",
|
||||||
|
icon: "mdi-calendar",
|
||||||
|
color: "error",
|
||||||
|
route: "/member/events"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Update Profile",
|
||||||
|
icon: "mdi-account-edit",
|
||||||
|
color: "primary",
|
||||||
|
route: "/member/profile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Payments",
|
||||||
|
icon: "mdi-credit-card",
|
||||||
|
color: "success",
|
||||||
|
route: "/member/payments"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources",
|
||||||
|
icon: "mdi-book-open-variant",
|
||||||
|
color: "warning",
|
||||||
|
route: "/member/resources"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
// Helper functions
|
// Helper functions
|
||||||
const formatDate = (dateString: string) => {
|
const formatDate = (dateString: string) => {
|
||||||
return new Date(dateString).toLocaleDateString('en-US', {
|
return new Date(dateString).toLocaleDateString('en-US', {
|
||||||
|
|
@ -450,24 +365,140 @@ onMounted(async () => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.cursor-pointer {
|
.member-dashboard {
|
||||||
cursor: pointer;
|
padding: 2rem;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-2 {
|
.dashboard-header {
|
||||||
gap: 0.5rem;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.95),
|
||||||
|
rgba(255, 255, 255, 0.85)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-3 {
|
.header-content {
|
||||||
gap: 0.75rem;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-100 {
|
.dashboard-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-gradient {
|
||||||
|
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-name {
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: rgb(107, 114, 128);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-btn {
|
||||||
|
text-transform: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Glass card base styles
|
||||||
|
.glass-card {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.9),
|
||||||
|
rgba(255, 255, 255, 0.7)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.08),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
|
padding: 1.5rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-100 {
|
.activity-card {
|
||||||
width: 100%;
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-actions-section {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgb(31, 41, 55);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-actions-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1.25rem;
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue