matt/monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify member dashboard - remove points, payments, stats, and social features
All checks were successful
Build And Push Image / docker (push) Successful in 1m57s
Details

Browse Source
This commit is contained in:
Matt
2025-08-31 14:12:58 +02:00
parent 41eeb8650c
commit 696b321373
5 changed files with 353 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/dashboard/ActivityTimeline.vue
View File

@@ -65,7 +65,7 @@ import { computed } from 'vue';
interface TimelineActivity {
id: string | number;
type: 'event' | 'payment' | 'achievement' | 'profile' | 'system';
type: 'event' | 'profile';
title: string;
description: string;
timestamp: string | Date;
@@ -92,10 +92,7 @@ const visibleActivities = computed(() => {
const getIconColor = (type: string) => {
const colors: Record<string, string> = {
event: 'error',
payment: 'success',
achievement: 'warning',
profile: 'info',
system: 'grey'
profile: 'info'
};
return colors[type] || 'grey';
};
@@ -184,26 +181,11 @@ const formatTime = (timestamp: string | Date) => {
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: '';

24
components/dashboard/EventsCard.vue
View File

@@ -80,15 +80,9 @@
</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 class="footer-message">
<v-icon size="16" color="grey">mdi-information</v-icon>
<span>{{ events.length }} upcoming event{{ events.length !== 1 ? 's' : '' }}</span>
</div>
</div>
</div>
@@ -291,19 +285,13 @@ const formatDay = (dateString: string) => {
border-top: 1px solid rgba(220, 38, 38, 0.1);
}
.footer-stats {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.stat-item {
.footer-message {
display: flex;
align-items: center;
gap: 0.375rem;
justify-content: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: rgb(107, 114, 128);
font-weight: 500;
}
@media (max-width: 640px) {

296
components/dashboard/SimpleProfileCard.vue Normal file
View File

@@ -0,0 +1,296 @@
<template>
<div
v-motion
:initial="{ opacity: 0, scale: 0.98 }"
:enter="{
opacity: 1,
scale: 1,
transition: {
duration: 500,
type: 'spring',
stiffness: 200
}
}"
class="simple-profile-card"
>
<!-- Header with Avatar -->
<div class="profile-header">
<div class="profile-avatar-wrapper">
<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-title">
<h2 class="profile-name">{{ fullName }}</h2>
<p class="profile-member-id">{{ member?.member_id || 'MUSA-0000' }}</p>
</div>
</div>
<!-- Profile Information -->
<div class="profile-info-section">
<h3 class="section-title">Contact Information</h3>
<div class="info-grid">
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-email</v-icon>
<div class="info-content">
<span class="info-label">Email</span>
<span class="info-value">{{ member?.email || 'Not provided' }}</span>
<v-chip
v-if="emailVerified"
size="x-small"
color="success"
variant="tonal"
class="ml-2"
>
Verified
</v-chip>
</div>
</div>
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-phone</v-icon>
<div class="info-content">
<span class="info-label">Phone</span>
<span class="info-value">{{ member?.phone || 'Not provided' }}</span>
</div>
</div>
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-map-marker</v-icon>
<div class="info-content">
<span class="info-label">Address</span>
<span class="info-value">{{ member?.address || 'Not provided' }}</span>
</div>
</div>
</div>
</div>
<!-- Personal Information -->
<div class="profile-info-section">
<h3 class="section-title">Personal Information</h3>
<div class="info-grid">
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-flag</v-icon>
<div class="info-content">
<span class="info-label">Nationality</span>
<span class="info-value">{{ formatNationality(member?.nationality) }}</span>
</div>
</div>
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-cake</v-icon>
<div class="info-content">
<span class="info-label">Date of Birth</span>
<span class="info-value">{{ formatDate(member?.date_of_birth) }}</span>
</div>
</div>
<div class="info-item">
<v-icon size="18" color="grey-darken-1">mdi-calendar-account</v-icon>
<div class="info-content">
<span class="info-label">Member Since</span>
<span class="info-value">{{ formatDate(member?.member_since) }}</span>
</div>
</div>
</div>
</div>
<!-- Bio Section (if available) -->
<div v-if="member?.bio" class="profile-info-section">
<h3 class="section-title">About Me</h3>
<p class="bio-text">{{ member.bio }}</p>
</div>
<!-- Action Button -->
<v-btn
color="error"
variant="flat"
block
class="profile-action"
prepend-icon="mdi-account-edit"
@click="$emit('edit-profile')"
>
Edit Profile
</v-btn>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import type { Member } from '~/utils/types';
interface Props {
member: Member | null;
emailVerified?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
emailVerified: false
});
const emit = defineEmits<{
'edit-profile': [];
}>();
// Computed properties
const fullName = computed(() => {
if (props.member) {
return `${props.member.first_name} ${props.member.last_name}`;
}
return 'Member';
});
// Format nationality (handles multiple nationalities)
const formatNationality = (nationality?: string) => {
if (!nationality) return 'Not provided';
// Split by comma if multiple nationalities
const nationalities = nationality.split(',').map(n => n.trim());
// Map country codes to full names if needed
const countryMap: Record<string, string> = {
'US': 'United States',
'FR': 'France',
'MC': 'Monaco',
'IT': 'Italy',
'UK': 'United Kingdom',
'DE': 'Germany',
'ES': 'Spain'
};
return nationalities.map(n => countryMap[n] || n).join(', ');
};
// Format date
const formatDate = (dateString?: string) => {
if (!dateString) return 'Not provided';
try {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
} catch {
return dateString;
}
};
</script>
<style scoped lang="scss">
.simple-profile-card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
height: 100%;
display: flex;
flex-direction: column;
}
.profile-header {
display: flex;
align-items: center;
gap: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
margin-bottom: 1.5rem;
}
.profile-avatar-wrapper {
flex-shrink: 0;
}
.profile-title {
flex: 1;
}
.profile-name {
font-size: 1.5rem;
font-weight: 600;
color: rgb(31, 41, 55);
margin: 0 0 0.25rem 0;
}
.profile-member-id {
font-size: 0.875rem;
color: rgb(107, 114, 128);
margin: 0;
font-family: 'Courier New', monospace;
}
.profile-info-section {
margin-bottom: 1.5rem;
}
.section-title {
font-size: 0.875rem;
font-weight: 600;
color: rgb(107, 114, 128);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 1rem 0;
}
.info-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.info-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.info-label {
font-size: 0.75rem;
color: rgb(156, 163, 175);
text-transform: uppercase;
letter-spacing: 0.025em;
}
.info-value {
font-size: 0.875rem;
color: rgb(31, 41, 55);
line-height: 1.4;
}
.bio-text {
font-size: 0.875rem;
color: rgb(75, 85, 99);
line-height: 1.6;
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;
text-align: center;
}
}
</style>