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

feat: Reorganize platform into member, board, and admin sections
Some checks failed
Build And Push Image / docker (push) Failing after 55s
Details

Browse Source 
Major platform reorganization implementing role-based portal sections:

## Infrastructure Changes
- Created role-based middleware for member, board, and admin access
- Updated main dashboard router to redirect based on highest privilege
- Implemented access hierarchy: Admin > Board > Member

## New Layouts
- Member layout: Simplified navigation for regular members
- Board layout: Enhanced tools for board member management
- Admin layout: Full system administration capabilities

## Member Portal (/member/*)
- Dashboard: Profile overview, events, payments, activity tracking
- Events: Browse, register, and manage event participation
- Profile: Complete personal and professional information management
- Resources: Access to documents, guides, FAQs, and quick links

## Board Portal (/board/*)
- Dashboard: Statistics, dues management, board-specific tools
- Members: Comprehensive member management with filtering

## Admin Portal (/admin/*)
- Dashboard: System overview and administrative controls (existing)

## Design Implementation
- Monaco red (#dc2626) as primary accent color
- Modern card-based layouts with consistent spacing
- Responsive design for all screen sizes
- Glass morphism effects for enhanced visual appeal

This reorganization provides clear separation of concerns based on user privileges while maintaining a cohesive user experience across all sections.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt
2025-08-30 22:00:59 +02:00
parent 27e38d98e5
commit d9d8627e97
15 changed files with 6039 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

555
pages/members/mockup.vue
View File

@@ -8,8 +8,8 @@
:enter="{ opacity: 1, y: 0 }"
class="members-header__content"
>
<h1 class="members-header__title">Members Directory</h1>
<p class="members-header__subtitle">Connect with {{ totalMembers }} MonacoUSA members worldwide</p>
<h1 class="members-header__title">Member Management</h1>
<p class="members-header__subtitle">Manage {{ totalMembers }} MonacoUSA members</p>
</div>
<div
@@ -19,10 +19,10 @@
class="members-header__actions"
>
<MonacoButton variant="glass" icon="download">
Export Directory
Export Members
</MonacoButton>
<MonacoButton variant="primary" icon="user-plus">
Invite Member
Add Member
</MonacoButton>
</div>
</header>
@@ -37,7 +37,7 @@
<div class="members-controls__search">
<FloatingInput
v-model="searchQuery"
label="Search members by name, company, or skills..."
label="Search members by name or email..."
leftIcon="search"
variant="glass"
clearable
@@ -46,26 +46,25 @@
<div class="members-controls__filters">
<select class="filter-select">
<option value="">All Roles</option>
<option value="board">Board Member</option>
<option value="executive">Executive</option>
<option value="member">Member</option>
<option value="honorary">Honorary</option>
<option value="">Member Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending</option>
<option value="suspended">Suspended</option>
</select>
<select class="filter-select">
<option value="">All Industries</option>
<option value="tech">Technology</option>
<option value="finance">Finance</option>
<option value="real-estate">Real Estate</option>
<option value="hospitality">Hospitality</option>
<option value="">Dues Status</option>
<option value="current">Current</option>
<option value="overdue">Overdue</option>
<option value="exempt">Exempt</option>
</select>
<select class="filter-select">
<option value="">Sort By</option>
<option value="name">Name (A-Z)</option>
<option value="recent">Recently Joined</option>
<option value="active">Most Active</option>
<option value="joined">Join Date</option>
<option value="dues">Dues Status</option>
</select>
</div>
</div>
@@ -78,16 +77,20 @@
class="members-stats"
>
<div class="stat-chip">
<span class="stat-chip__value">{{ filteredMembers.length }}</span>
<span class="stat-chip__label">Results</span>
<span class="stat-chip__value">{{ totalMembers }}</span>
<span class="stat-chip__label">Total Members</span>
</div>
<div class="stat-chip">
<span class="stat-chip__value">{{ onlineCount }}</span>
<span class="stat-chip__label">Online Now</span>
<span class="stat-chip__value">{{ activeMembers }}</span>
<span class="stat-chip__label">Active Members</span>
</div>
<div class="stat-chip">
<span class="stat-chip__value">{{ newThisMonth }}</span>
<span class="stat-chip__label">New This Month</span>
<span class="stat-chip__value">{{ overdueDues }}</span>
<span class="stat-chip__label">Overdue Dues</span>
</div>
<div class="stat-chip">
<span class="stat-chip__value">{{ inactiveMembers }}</span>
<span class="stat-chip__label">Inactive Members</span>
</div>
</div>
@@ -101,35 +104,126 @@
<div class="view-toggle">
<button
class="view-toggle__btn"
:class="{ 'view-toggle__btn--active': viewMode === 'grid' }"
@click="viewMode = 'grid'"
:class="{ 'view-toggle__btn--active': viewMode === 'table' }"
@click="viewMode = 'table'"
>
<span>⊞</span> Grid View
<span>☰</span> Table View
</button>
<button
class="view-toggle__btn"
:class="{ 'view-toggle__btn--active': viewMode === 'list' }"
@click="viewMode = 'list'"
:class="{ 'view-toggle__btn--active': viewMode === 'cards' }"
@click="viewMode = 'cards'"
>
<span>☰</span> List View
</button>
<button
class="view-toggle__btn"
:class="{ 'view-toggle__btn--active': viewMode === 'compact' }"
@click="viewMode = 'compact'"
>
<span>▦</span> Compact
<span>⊞</span> Card View
</button>
</div>
</div>
<!-- Members Grid/List -->
<!-- Members Table/Cards -->
<div
class="members-container"
:class="`members-container--${viewMode}`"
>
<!-- Grid View -->
<template v-if="viewMode === 'grid'">
<!-- Table View -->
<template v-if="viewMode === 'table'">
<div class="members-table">
<table>
<thead>
<tr>
<th>Member</th>
<th>Status</th>
<th>Dues</th>
<th>Join Date</th>
<th>Portal Account</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr
v-for="(member, index) in filteredMembers"
:key="member.id"
v-motion
:initial="{ opacity: 0, x: -20 }"
:enter="{
opacity: 1,
x: 0,
transition: { delay: 400 + (index * 30) }
}"
>
<td>
<div class="member-cell">
<div class="member-cell__avatar">
<img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
<div v-else class="avatar-placeholder-small">{{ getInitials(member.name) }}</div>
</div>
<div>
<div class="member-cell__name">{{ member.name }}</div>
<div class="member-cell__email">{{ member.email }}</div>
</div>
</div>
</td>
<td>
<span
class="status-badge"
:class="`status-badge--${member.memberStatus}`"
>
{{ member.memberStatus }}
</span>
</td>
<td>
<span
class="dues-badge"
:class="`dues-badge--${member.duesStatus}`"
>
{{ member.duesStatus }}
</span>
</td>
<td>{{ member.joinDate }}</td>
<td>
<span
class="portal-status"
:class="{ 'portal-status--active': member.hasPortalAccess }"
>
{{ member.hasPortalAccess ? 'Active' : 'None' }}
</span>
</td>
<td>
<div class="table-actions">
<MonacoButton
variant="ghost"
size="sm"
icon="edit"
@click="editMember(member)"
>
Edit
</MonacoButton>
<MonacoButton
variant="ghost"
size="sm"
icon="mail"
@click="emailMember(member)"
>
Email
</MonacoButton>
<MonacoButton
v-if="!member.hasPortalAccess"
variant="ghost"
size="sm"
icon="user-plus"
@click="inviteToPortal(member)"
>
Invite
</MonacoButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<!-- Card View -->
<template v-else-if="viewMode === 'cards'">
<MemberCard
v-for="(member, index) in filteredMembers"
:key="member.id"
@@ -137,14 +231,11 @@
:featured="member.featured"
:delay="index"
variant="glass"
@click="selectMember"
@connect="connectMember"
@message="messageMember"
@click="editMember"
@email="emailMember"
@invite="inviteToPortal"
/>
</template>
<!-- List View -->
<template v-else-if="viewMode === 'list'">
<div
v-for="(member, index) in filteredMembers"
:key="member.id"
@@ -189,58 +280,25 @@
<div class="member-list-item__actions">
<MonacoButton
:variant="member.connected ? 'ghost' : 'primary'"
variant="ghost"
size="sm"
@click.stop="connectMember(member)"
icon="edit"
@click.stop="editMember(member)"
>
{{ member.connected ? 'Connected' : 'Connect' }}
Edit
</MonacoButton>
<MonacoButton
variant="ghost"
size="sm"
icon="message"
@click.stop="messageMember(member)"
icon="mail"
@click.stop="emailMember(member)"
>
Message
Email
</MonacoButton>
</div>
</div>
</template>
<!-- Compact View -->
<template v-else>
<div class="compact-grid">
<div
v-for="(member, index) in filteredMembers"
:key="member.id"
v-motion
:initial="{ opacity: 0, scale: 0.9 }"
:enter="{
opacity: 1,
scale: 1,
transition: { delay: 400 + (index * 20) }
}"
class="compact-card"
@click="selectMember(member)"
>
<div class="compact-card__avatar">
<img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
<div v-else class="avatar-placeholder-small">{{ getInitials(member.name) }}</div>
</div>
<div class="compact-card__info">
<h4 class="compact-card__name">{{ member.name }}</h4>
<p class="compact-card__role">{{ member.title }}</p>
</div>
<button
class="compact-card__connect"
:class="{ 'compact-card__connect--connected': member.connected }"
@click.stop="connectMember(member)"
>
{{ member.connected ? '✓' : '+' }}
</button>
</div>
</div>
</template>
</div>
<!-- Load More -->
@@ -255,31 +313,28 @@
</MonacoButton>
</div>
<!-- Floating Stats Widget -->
<!-- Admin Quick Actions Widget -->
<GlassCard
variant="glass"
class="network-widget"
class="admin-widget"
:animated="true"
:delay="900"
>
<h4 class="network-widget__title">Your Network</h4>
<div class="network-stats">
<div class="network-stat">
<span class="network-stat__value">47</span>
<span class="network-stat__label">Connections</span>
</div>
<div class="network-stat">
<span class="network-stat__value">12</span>
<span class="network-stat__label">Pending</span>
</div>
<div class="network-stat">
<span class="network-stat__value">5</span>
<span class="network-stat__label">New Messages</span>
</div>
<h4 class="admin-widget__title">Quick Actions</h4>
<div class="admin-actions">
<MonacoButton variant="glass" size="sm" icon="download" block>
Export Member List
</MonacoButton>
<MonacoButton variant="glass" size="sm" icon="mail" block>
Send Dues Reminder
</MonacoButton>
<MonacoButton variant="glass" size="sm" icon="chart" block>
View Reports
</MonacoButton>
<MonacoButton variant="primary" size="sm" icon="user-plus" block>
Add New Member
</MonacoButton>
</div>
<MonacoButton variant="primary" size="sm" block>
View All Connections
</MonacoButton>
</GlassCard>
</div>
</template>
@@ -292,95 +347,90 @@ import FloatingInput from '~/components/ui/FloatingInput.vue'
import MemberCard from '~/components/ui/MemberCard.vue'
const searchQuery = ref('')
const viewMode = ref('grid')
const totalMembers = ref(1234)
const onlineCount = ref(89)
const newThisMonth = ref(23)
const viewMode = ref('table')
const totalMembers = ref(156)
const activeMembers = ref(142)
const overdueDues = ref(8)
const inactiveMembers = ref(14)
const members = ref([
{
id: 1,
name: 'Alexandra Martin',
email: 'alexandra.martin@example.com',
avatar: '/api/placeholder/150/150',
title: 'CEO',
company: 'Monaco Ventures',
role: 'Board Member',
status: 'online',
tags: ['Leadership', 'Strategy', 'Investment'],
joinDate: '2021',
connections: 234,
connected: false,
featured: true
memberStatus: 'active',
duesStatus: 'current',
hasPortalAccess: true,
joinDate: 'Jan 2021',
lastActive: '2 hours ago'
},
{
id: 2,
name: 'Jean-Paul Rousseau',
email: 'jp.rousseau@example.com',
avatar: '/api/placeholder/150/150',
title: 'Managing Director',
company: 'Riviera Capital',
role: 'Executive',
status: 'online',
tags: ['Finance', 'Real Estate', 'Banking'],
joinDate: '2020',
connections: 189,
connected: true,
featured: false
memberStatus: 'active',
duesStatus: 'current',
hasPortalAccess: true,
joinDate: 'Mar 2020',
lastActive: '1 day ago'
},
{
id: 3,
name: 'Sarah Chen',
email: 'sarah.chen@example.com',
avatar: '',
title: 'VP of Technology',
company: 'TechMonaco',
role: 'Member',
status: 'offline',
tags: ['Technology', 'AI', 'Innovation', 'Blockchain'],
joinDate: '2022',
connections: 156,
connected: false,
featured: false
memberStatus: 'active',
duesStatus: 'overdue',
hasPortalAccess: false,
joinDate: 'Jun 2022',
lastActive: 'Never'
},
{
id: 4,
name: 'Marcus Williams',
email: 'marcus.w@example.com',
avatar: '/api/placeholder/150/150',
title: 'Partner',
company: 'Monaco Law Group',
role: 'Member',
status: 'away',
tags: ['Legal', 'Corporate Law', 'M&A'],
joinDate: '2021',
connections: 98,
connected: false,
featured: false
memberStatus: 'inactive',
duesStatus: 'overdue',
hasPortalAccess: false,
joinDate: 'Sep 2021',
lastActive: '3 months ago'
},
{
id: 5,
name: 'Isabella Romano',
email: 'isabella@example.com',
avatar: '/api/placeholder/150/150',
title: 'Creative Director',
company: 'Romano Design Studio',
role: 'Member',
status: 'online',
tags: ['Design', 'Branding', 'Marketing'],
joinDate: '2023',
connections: 67,
connected: true,
featured: false
memberStatus: 'active',
duesStatus: 'current',
hasPortalAccess: true,
joinDate: 'Feb 2023',
lastActive: '5 days ago'
},
{
id: 6,
name: 'Thomas Anderson',
email: 't.anderson@example.com',
avatar: '',
title: 'Investment Manager',
company: 'Monte Carlo Holdings',
role: 'Honorary',
status: 'offline',
tags: ['Investment', 'Wealth Management', 'Private Equity'],
joinDate: '2019',
connections: 321,
connected: false,
featured: true
memberStatus: 'pending',
duesStatus: 'exempt',
hasPortalAccess: false,
joinDate: 'Nov 2019',
lastActive: 'Never'
}
])
@@ -390,9 +440,8 @@ const filteredMembers = computed(() => {
const query = searchQuery.value.toLowerCase()
return members.value.filter(member =>
member.name.toLowerCase().includes(query) ||
member.company?.toLowerCase().includes(query) ||
member.title?.toLowerCase().includes(query) ||
member.tags?.some(tag => tag.toLowerCase().includes(query))
member.email?.toLowerCase().includes(query) ||
member.company?.toLowerCase().includes(query)
)
})
@@ -400,17 +449,19 @@ const getInitials = (name: string) => {
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
}
const selectMember = (member: any) => {
console.log('Selected member:', member)
const editMember = (member: any) => {
console.log('Edit member:', member)
// Would open edit dialog
}
const connectMember = (member: any) => {
member.connected = !member.connected
console.log('Connect with:', member)
const emailMember = (member: any) => {
console.log('Email member:', member)
// Would open email compose
}
const messageMember = (member: any) => {
console.log('Message:', member)
const inviteToPortal = (member: any) => {
console.log('Invite to portal:', member)
// Would send portal invitation
}
</script>
@@ -566,25 +617,146 @@ const messageMember = (member: any) => {
.members-container {
margin-bottom: 2rem;
&--grid {
&--cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
&--list {
display: flex;
flex-direction: column;
gap: 1rem;
&--table {
overflow-x: auto;
}
}
.members-table {
width: 100%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 12px;
overflow: hidden;
table {
width: 100%;
border-collapse: collapse;
}
&--compact {
.compact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
th {
padding: 1rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: #6b7280;
background: rgba(255, 255, 255, 0.5);
border-bottom: 2px solid rgba(220, 38, 38, 0.1);
}
td {
padding: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
tr:hover {
background: rgba(255, 255, 255, 0.95);
}
}
.member-cell {
display: flex;
align-items: center;
gap: 0.75rem;
&__avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__name {
font-weight: 600;
color: #27272a;
margin-bottom: 0.125rem;
}
&__email {
font-size: 0.75rem;
color: #6b7280;
}
}
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
text-transform: capitalize;
&--active {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
&--inactive {
background: rgba(107, 114, 128, 0.1);
color: #6b7280;
}
&--pending {
background: rgba(251, 146, 60, 0.1);
color: #fb923c;
}
&--suspended {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
}
.dues-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
text-transform: capitalize;
&--current {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
&--overdue {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
&--exempt {
background: rgba(107, 114, 128, 0.1);
color: #6b7280;
}
}
.portal-status {
font-size: 0.75rem;
color: #6b7280;
&--active {
color: #10b981;
font-weight: 500;
}
}
.table-actions {
display: flex;
gap: 0.5rem;
}
.member-list-item {
@@ -798,7 +970,7 @@ const messageMember = (member: any) => {
margin: 2rem auto;
}
.network-widget {
.admin-widget {
position: fixed;
bottom: 2rem;
right: 2rem;
@@ -814,32 +986,10 @@ const messageMember = (member: any) => {
}
}
.network-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.network-stat {
.admin-actions {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
&__value {
font-size: 1.25rem;
font-weight: 700;
color: #dc2626;
}
&__label {
font-size: 0.625rem;
color: #6b7280;
text-align: center;
}
gap: 0.75rem;
}
// Responsive
@@ -876,8 +1026,21 @@ const messageMember = (member: any) => {
}
}
.network-widget {
.admin-widget {
display: none;
}
.members-table {
font-size: 0.75rem;
th, td {
padding: 0.5rem;
}
.table-actions {
flex-direction: column;
gap: 0.25rem;
}
}
}
</style>