721 lines
16 KiB
Vue
721 lines
16 KiB
Vue
<template>
|
|
<div class="admin-dashboard-v2">
|
|
<!-- Neumorphic Header -->
|
|
<div class="dashboard-header">
|
|
<h1 class="dashboard-title">System Administration</h1>
|
|
<p class="dashboard-subtitle">Complete platform control and management</p>
|
|
</div>
|
|
|
|
<!-- Stats Grid with Neumorphic Cards -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card neumorphic-card" v-for="stat in stats" :key="stat.id">
|
|
<div class="stat-content">
|
|
<div class="stat-info">
|
|
<div class="stat-label">{{ stat.label }}</div>
|
|
<div class="stat-value">{{ stat.value }}</div>
|
|
<div class="stat-change" :class="stat.changeType">
|
|
<Icon :name="stat.changeIcon" class="change-icon" />
|
|
<span>{{ stat.changeText }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-icon-wrapper neumorphic-inset">
|
|
<Icon :name="stat.icon" class="stat-icon" :style="{ color: stat.color }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Management Sections -->
|
|
<div class="management-grid">
|
|
<!-- User Management -->
|
|
<div class="management-card neumorphic-card">
|
|
<div class="card-header">
|
|
<Icon name="mdi:account-group" class="header-icon" />
|
|
<h2>User Management</h2>
|
|
</div>
|
|
<p class="card-description">Manage user accounts, roles, and permissions</p>
|
|
|
|
<!-- Morphing Dropdown for User Filters -->
|
|
<div class="morphing-select-wrapper">
|
|
<div class="select-trigger neumorphic-button" @click="toggleUserFilter">
|
|
<span>{{ selectedUserFilter }}</span>
|
|
<Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showUserFilter }" />
|
|
</div>
|
|
<Transition name="morph">
|
|
<div v-if="showUserFilter" class="morphing-dropdown">
|
|
<div
|
|
v-for="option in userFilterOptions"
|
|
:key="option"
|
|
class="dropdown-option"
|
|
@click="selectUserFilter(option)"
|
|
>
|
|
{{ option }}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="neumorphic-button primary" @click="showCreateUserDialog = true">
|
|
<Icon name="mdi:account-plus" />
|
|
Create User
|
|
</button>
|
|
<button class="neumorphic-button" @click="manageRoles">
|
|
<Icon name="mdi:shield-account" />
|
|
Manage Roles
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Maintenance -->
|
|
<div class="management-card neumorphic-card">
|
|
<div class="card-header">
|
|
<Icon name="mdi:cog" class="header-icon" />
|
|
<h2>System Maintenance</h2>
|
|
</div>
|
|
<p class="card-description">Backend operations and system health</p>
|
|
|
|
<!-- System Status Indicator -->
|
|
<div class="system-status neumorphic-inset">
|
|
<div class="status-indicator" :class="systemStatus.type"></div>
|
|
<span>{{ systemStatus.text }}</span>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="neumorphic-button" @click="assignMemberIds">
|
|
Assign Member IDs
|
|
</button>
|
|
<button class="neumorphic-button" @click="backfillEventIds">
|
|
Backfill Event IDs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reports & Analytics -->
|
|
<div class="management-card neumorphic-card">
|
|
<div class="card-header">
|
|
<Icon name="mdi:chart-line" class="header-icon" />
|
|
<h2>Reports & Analytics</h2>
|
|
</div>
|
|
<p class="card-description">Generate insights and track metrics</p>
|
|
|
|
<!-- Report Type Dropdown -->
|
|
<div class="morphing-select-wrapper">
|
|
<div class="select-trigger neumorphic-button" @click="toggleReportType">
|
|
<span>{{ selectedReportType }}</span>
|
|
<Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showReportType }" />
|
|
</div>
|
|
<Transition name="morph">
|
|
<div v-if="showReportType" class="morphing-dropdown">
|
|
<div
|
|
v-for="type in reportTypes"
|
|
:key="type"
|
|
class="dropdown-option"
|
|
@click="selectReportType(type)"
|
|
>
|
|
{{ type }}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<button class="neumorphic-button primary full-width" @click="generateReport">
|
|
<Icon name="mdi:file-chart" />
|
|
Generate Report
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Configuration -->
|
|
<div class="management-card neumorphic-card">
|
|
<div class="card-header">
|
|
<Icon name="mdi:tune" class="header-icon" />
|
|
<h2>Configuration</h2>
|
|
</div>
|
|
<p class="card-description">Portal settings and integrations</p>
|
|
|
|
<div class="config-grid">
|
|
<button class="config-button neumorphic-button" @click="showMembershipConfig = true">
|
|
<Icon name="mdi:card-account-details" />
|
|
<span>Membership</span>
|
|
</button>
|
|
<button class="config-button neumorphic-button" @click="showRecaptchaConfig = true">
|
|
<Icon name="mdi:robot" />
|
|
<span>reCAPTCHA</span>
|
|
</button>
|
|
<button class="config-button neumorphic-button" @click="openEmailConfig">
|
|
<Icon name="mdi:email" />
|
|
<span>Email</span>
|
|
</button>
|
|
<button class="config-button neumorphic-button" @click="showNocoDBSettings = true">
|
|
<Icon name="mdi:database" />
|
|
<span>Database</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Feed -->
|
|
<div class="activity-section neumorphic-card">
|
|
<div class="card-header">
|
|
<Icon name="mdi:timeline" class="header-icon" />
|
|
<h2>Recent Activity</h2>
|
|
<button class="neumorphic-button small" @click="refreshActivity">
|
|
<Icon name="mdi:refresh" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="activity-list">
|
|
<div v-for="activity in recentActivity" :key="activity.id" class="activity-item neumorphic-inset">
|
|
<Icon :name="activity.icon" class="activity-icon" :style="{ color: activity.color }" />
|
|
<div class="activity-content">
|
|
<p class="activity-text">{{ activity.text }}</p>
|
|
<span class="activity-time">{{ activity.time }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
|
// Define page meta
|
|
definePageMeta({
|
|
layout: 'admin',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
// Stats data
|
|
const stats = ref([
|
|
{
|
|
id: 1,
|
|
label: 'Total Members',
|
|
value: '1,247',
|
|
changeType: 'positive',
|
|
changeIcon: 'mdi:trending-up',
|
|
changeText: '+12% this month',
|
|
icon: 'mdi:account-group',
|
|
color: '#CC0000'
|
|
},
|
|
{
|
|
id: 2,
|
|
label: 'Active Sessions',
|
|
value: '342',
|
|
changeType: 'neutral',
|
|
changeIcon: 'mdi:circle',
|
|
changeText: 'Live now',
|
|
icon: 'mdi:monitor-dashboard',
|
|
color: '#10B981'
|
|
},
|
|
{
|
|
id: 3,
|
|
label: 'Revenue MTD',
|
|
value: '$48,392',
|
|
changeType: 'positive',
|
|
changeIcon: 'mdi:trending-up',
|
|
changeText: '+8% vs last month',
|
|
icon: 'mdi:currency-usd',
|
|
color: '#3B82F6'
|
|
},
|
|
{
|
|
id: 4,
|
|
label: 'System Health',
|
|
value: '98.5%',
|
|
changeType: 'positive',
|
|
changeIcon: 'mdi:check-circle',
|
|
changeText: 'All systems operational',
|
|
icon: 'mdi:shield-check',
|
|
color: '#10B981'
|
|
}
|
|
])
|
|
|
|
// Dropdown states
|
|
const showUserFilter = ref(false)
|
|
const selectedUserFilter = ref('All Users')
|
|
const userFilterOptions = ref(['All Users', 'Active Users', 'Inactive Users', 'Admins', 'Members'])
|
|
|
|
const showReportType = ref(false)
|
|
const selectedReportType = ref('Financial Report')
|
|
const reportTypes = ref(['Financial Report', 'Member Report', 'Activity Report', 'Usage Report'])
|
|
|
|
// System status
|
|
const systemStatus = ref({
|
|
type: 'healthy',
|
|
text: 'All systems operational'
|
|
})
|
|
|
|
// Recent activity
|
|
const recentActivity = ref([
|
|
{
|
|
id: 1,
|
|
icon: 'mdi:account-plus',
|
|
text: 'New member registration: John Doe',
|
|
time: '2 minutes ago',
|
|
color: '#10B981'
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: 'mdi:credit-card',
|
|
text: 'Payment received from Jane Smith',
|
|
time: '15 minutes ago',
|
|
color: '#3B82F6'
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: 'mdi:calendar-check',
|
|
text: 'Event created: Annual Gala 2024',
|
|
time: '1 hour ago',
|
|
color: '#F59E0B'
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: 'mdi:account-edit',
|
|
text: 'Profile updated: Mike Johnson',
|
|
time: '3 hours ago',
|
|
color: '#6B7280'
|
|
}
|
|
])
|
|
|
|
// Dialog states
|
|
const showCreateUserDialog = ref(false)
|
|
const showMembershipConfig = ref(false)
|
|
const showRecaptchaConfig = ref(false)
|
|
const showNocoDBSettings = ref(false)
|
|
|
|
// Methods
|
|
const toggleUserFilter = () => {
|
|
showUserFilter.value = !showUserFilter.value
|
|
showReportType.value = false
|
|
}
|
|
|
|
const selectUserFilter = (option) => {
|
|
selectedUserFilter.value = option
|
|
showUserFilter.value = false
|
|
}
|
|
|
|
const toggleReportType = () => {
|
|
showReportType.value = !showReportType.value
|
|
showUserFilter.value = false
|
|
}
|
|
|
|
const selectReportType = (type) => {
|
|
selectedReportType.value = type
|
|
showReportType.value = false
|
|
}
|
|
|
|
const manageRoles = () => {
|
|
console.log('Managing roles...')
|
|
}
|
|
|
|
const assignMemberIds = () => {
|
|
console.log('Assigning member IDs...')
|
|
}
|
|
|
|
const backfillEventIds = () => {
|
|
console.log('Backfilling event IDs...')
|
|
}
|
|
|
|
const generateReport = () => {
|
|
console.log('Generating report:', selectedReportType.value)
|
|
}
|
|
|
|
const openEmailConfig = () => {
|
|
console.log('Opening email configuration...')
|
|
}
|
|
|
|
const refreshActivity = () => {
|
|
console.log('Refreshing activity...')
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.morphing-select-wrapper')) {
|
|
showUserFilter.value = false
|
|
showReportType.value = false
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/design-system-v2.scss';
|
|
|
|
.admin-dashboard-v2 {
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
// Header
|
|
.dashboard-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
|
|
.dashboard-title {
|
|
font-size: $text-4xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, $primary-600, $primary-800);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.dashboard-subtitle {
|
|
color: $neutral-600;
|
|
font-size: $text-lg;
|
|
}
|
|
}
|
|
|
|
// Stats Grid
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.stat-card {
|
|
@include neumorphic-card('md');
|
|
padding: 1.5rem;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
@include neumorphic-card('lg');
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
color: $neutral-600;
|
|
font-size: $text-sm;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: $text-3xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-change {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: $text-sm;
|
|
|
|
&.positive {
|
|
color: $success-500;
|
|
}
|
|
|
|
&.neutral {
|
|
color: $neutral-600;
|
|
}
|
|
|
|
.change-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
|
|
.stat-icon-wrapper {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: $radius-xl;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: $shadow-inset-sm;
|
|
|
|
.stat-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Management Grid
|
|
.management-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.management-card {
|
|
@include neumorphic-card('md');
|
|
padding: 2rem;
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
|
|
.header-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $primary-600;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $text-xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
}
|
|
}
|
|
|
|
.card-description {
|
|
color: $neutral-600;
|
|
margin-bottom: 1.5rem;
|
|
font-size: $text-sm;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.config-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.config-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
font-size: $text-sm;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Morphing Dropdown
|
|
.morphing-select-wrapper {
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
|
|
.select-trigger {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
|
|
.dropdown-icon {
|
|
transition: transform 0.3s $spring-smooth;
|
|
|
|
&.rotate {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.morphing-dropdown {
|
|
@include morphing-dropdown();
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: $z-dropdown;
|
|
|
|
.dropdown-option {
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
transition: all $transition-fast;
|
|
color: $neutral-700;
|
|
|
|
&:hover {
|
|
background: rgba($blue-500, 0.1);
|
|
color: $blue-600;
|
|
padding-left: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Neumorphic Elements
|
|
.neumorphic-card {
|
|
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
|
border-radius: $radius-xl;
|
|
box-shadow: $shadow-soft-md;
|
|
}
|
|
|
|
.neumorphic-button {
|
|
@include neumorphic-button();
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: $radius-lg;
|
|
font-weight: $font-medium;
|
|
color: $neutral-700;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
|
|
&.primary {
|
|
background: linear-gradient(145deg, $primary-600, $primary-700);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: linear-gradient(145deg, $primary-700, $primary-800);
|
|
}
|
|
}
|
|
|
|
&.small {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: $text-sm;
|
|
}
|
|
|
|
&.full-width {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.neumorphic-inset {
|
|
box-shadow: $shadow-inset-sm;
|
|
background: linear-gradient(145deg, #e6e6e6, #ffffff);
|
|
}
|
|
|
|
// System Status
|
|
.system-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: $radius-lg;
|
|
margin-bottom: 1.5rem;
|
|
|
|
.status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
|
|
&.healthy {
|
|
background-color: $success-500;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: $warning-500;
|
|
}
|
|
|
|
&.error {
|
|
background-color: $error-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Activity Section
|
|
.activity-section {
|
|
@include neumorphic-card('lg');
|
|
padding: 2rem;
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
|
|
h2 {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.activity-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: $radius-lg;
|
|
|
|
.activity-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.activity-content {
|
|
flex: 1;
|
|
|
|
.activity-text {
|
|
color: $neutral-800;
|
|
font-size: $text-sm;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.activity-time {
|
|
color: $neutral-500;
|
|
font-size: $text-xs;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Transitions
|
|
.morph-enter-active,
|
|
.morph-leave-active {
|
|
transition: all 0.3s $spring-smooth;
|
|
}
|
|
|
|
.morph-enter-from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(-10px);
|
|
}
|
|
|
|
.morph-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(-10px);
|
|
}
|
|
|
|
// Responsive
|
|
@include responsive($breakpoint-md) {
|
|
.admin-dashboard-v2 {
|
|
padding: 3rem;
|
|
}
|
|
}
|
|
|
|
@include responsive($breakpoint-lg) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.management-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style> |