Fix iOS Safari auth loops and simplify admin dashboard
All checks were successful
Build And Push Image / docker (push) Successful in 3m4s
All checks were successful
Build And Push Image / docker (push) Successful in 3m4s
- Add session check throttling in useAuth to prevent iOS Safari authentication loops - Simplify admin dashboard by removing complex system metrics and stats - Remove system-metrics utility and streamline stats API endpoint - Update admin interface to focus on core user and role management
This commit is contained in:
@@ -1,483 +1,308 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<!-- Welcome Header -->
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<h1 class="text-h3 font-weight-bold" style="color: #a31515;">
|
||||
Welcome Back, {{ firstName }}!
|
||||
</h1>
|
||||
<p class="text-h6 text-medium-emphasis">
|
||||
MonacoUSA Administration Portal
|
||||
</p>
|
||||
<v-chip color="error" variant="elevated" class="mt-2">
|
||||
<v-icon start>mdi-shield-crown</v-icon>
|
||||
Administrator
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 font-weight-bold mb-4">
|
||||
<v-icon left>mdi-shield-crown</v-icon>
|
||||
Administration
|
||||
</h1>
|
||||
<p class="text-body-1 mb-6">
|
||||
Manage users and portal settings for the MonacoUSA Portal.
|
||||
</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- System Status -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card class="pa-4" elevation="2">
|
||||
<h3 class="mb-3">
|
||||
<v-icon class="mr-2" color="success">mdi-server</v-icon>
|
||||
System Status
|
||||
</h3>
|
||||
<v-row>
|
||||
<v-col cols="6" md="3">
|
||||
<v-chip color="success" variant="elevated">
|
||||
<v-icon start>mdi-check-circle</v-icon>
|
||||
System Healthy
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3">
|
||||
<v-chip color="info" variant="elevated">
|
||||
<v-icon start>mdi-account-multiple</v-icon>
|
||||
{{ systemStats.totalUsers }} Users
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3">
|
||||
<v-chip color="warning" variant="elevated">
|
||||
<v-icon start>mdi-database</v-icon>
|
||||
{{ systemStats.diskUsage }} Disk
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3">
|
||||
<v-chip color="primary" variant="elevated">
|
||||
<v-icon start>mdi-memory</v-icon>
|
||||
{{ systemStats.memoryUsage }} Memory
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Portal Status -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<p class="text-caption text-medium-emphasis mb-1">Portal Status</p>
|
||||
<p class="text-h5 font-weight-bold text-success">Online</p>
|
||||
</div>
|
||||
<v-icon color="success" size="40">mdi-check-circle</v-icon>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Admin Tools -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<v-icon size="48" color="error" class="mb-2">mdi-account-cog</v-icon>
|
||||
<h3 class="mb-2">User Management</h3>
|
||||
<p class="text-body-2 mb-4">Add, edit, and manage user accounts</p>
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="navigateToUserManagement"
|
||||
>
|
||||
Manage Users
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<v-icon size="48" color="error" class="mb-2">mdi-file-document-outline</v-icon>
|
||||
<h3 class="mb-2">Audit Logs</h3>
|
||||
<p class="text-body-2 mb-4">View system and user activity logs</p>
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="navigateToAuditLogs"
|
||||
>
|
||||
View Logs
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<v-icon size="48" color="error" class="mb-2">mdi-cog</v-icon>
|
||||
<h3 class="mb-2">System Config</h3>
|
||||
<p class="text-body-2 mb-4">Configure system settings</p>
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="navigateToSystemConfig"
|
||||
>
|
||||
Settings
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<p class="text-caption text-medium-emphasis mb-1">Total Users</p>
|
||||
<p class="text-h5 font-weight-bold">{{ userCount }}</p>
|
||||
</div>
|
||||
<v-icon color="primary" size="40">mdi-account-multiple</v-icon>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- System Metrics -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-chart-line</v-icon>
|
||||
System Metrics
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ systemStats.totalUsers }}</div>
|
||||
<div class="text-body-2">Total Users</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ systemStats.activeUsers }}</div>
|
||||
<div class="text-body-2">Active Users</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ systemStats.totalSessions }}</div>
|
||||
<div class="text-body-2">Active Sessions</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ systemStats.uptime }}</div>
|
||||
<div class="text-body-2">System Uptime</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- User Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
User Management
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="mb-4">Manage user accounts, roles, and permissions for the MonacoUSA Portal.</p>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-btn
|
||||
color="primary"
|
||||
block
|
||||
size="large"
|
||||
@click="manageUsers"
|
||||
>
|
||||
<v-icon start>mdi-account-cog</v-icon>
|
||||
Manage Users
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-btn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
block
|
||||
size="large"
|
||||
@click="viewAuditLogs"
|
||||
>
|
||||
<v-icon start>mdi-file-document-outline</v-icon>
|
||||
View Audit Logs
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-btn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
block
|
||||
size="large"
|
||||
@click="portalSettings"
|
||||
>
|
||||
<v-icon start>mdi-cog</v-icon>
|
||||
Portal Settings
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Recent Admin Activity -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-history</v-icon>
|
||||
Recent Admin Activity
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item v-for="activity in recentActivity" :key="activity.id">
|
||||
<v-list-item-content>
|
||||
<!-- Quick Actions -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-lightning-bolt</v-icon>
|
||||
Quick Actions
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="6" md="3">
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="createUser"
|
||||
>
|
||||
<v-icon start>mdi-account-plus</v-icon>
|
||||
Add User
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" md="3">
|
||||
<v-btn
|
||||
color="info"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="generateReport"
|
||||
>
|
||||
<v-icon start>mdi-file-chart</v-icon>
|
||||
User Report
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" md="3">
|
||||
<v-btn
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="manageRoles"
|
||||
>
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Manage Roles
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" md="3">
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
@click="systemMaintenance"
|
||||
>
|
||||
<v-icon start>mdi-wrench</v-icon>
|
||||
Maintenance
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-history</v-icon>
|
||||
Recent Admin Activity
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="activity in recentActivity"
|
||||
:key="activity.id"
|
||||
class="px-0"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon :color="activity.color" class="mr-3">{{ activity.icon }}</v-icon>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>{{ activity.title }}</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
{{ activity.description }} - {{ activity.timestamp }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-chip :color="activity.type" size="small">{{ activity.status }}</v-chip>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Security & Monitoring -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="error">mdi-security</v-icon>
|
||||
Security Alerts
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item v-for="alert in securityAlerts" :key="alert.id">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ alert.title }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ alert.description }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-chip :color="alert.severity" size="small">{{ alert.level }}</v-chip>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-monitor-dashboard</v-icon>
|
||||
System Health
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-space-between mb-1">
|
||||
<span>CPU Usage</span>
|
||||
<span>{{ systemHealth.cpu }}%</span>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="systemHealth.cpu"
|
||||
color="primary"
|
||||
height="8"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-space-between mb-1">
|
||||
<span>Memory Usage</span>
|
||||
<span>{{ systemHealth.memory }}%</span>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="systemHealth.memory"
|
||||
color="warning"
|
||||
height="8"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-space-between mb-1">
|
||||
<span>Disk Usage</span>
|
||||
<span>{{ systemHealth.disk }}%</span>
|
||||
</div>
|
||||
<v-progress-linear
|
||||
:model-value="systemHealth.disk"
|
||||
color="success"
|
||||
height="8"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Quick Admin Actions -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-lightning-bolt</v-icon>
|
||||
Quick Admin Actions
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="createNewUser"
|
||||
>
|
||||
<v-icon start>mdi-account-plus</v-icon>
|
||||
Create User
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="generateSystemReport"
|
||||
>
|
||||
<v-icon start>mdi-file-chart</v-icon>
|
||||
System Report
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="managePermissions"
|
||||
>
|
||||
<v-icon start>mdi-shield-key</v-icon>
|
||||
Permissions
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
block
|
||||
style="border-color: #f44336; color: #f44336;"
|
||||
@click="systemMaintenance"
|
||||
>
|
||||
<v-icon start>mdi-wrench</v-icon>
|
||||
Maintenance
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-list-item-subtitle>{{ activity.description }}</v-list-item-subtitle>
|
||||
|
||||
<template #append>
|
||||
<small class="text-medium-emphasis">{{ activity.time }}</small>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'dashboard',
|
||||
middleware: 'auth'
|
||||
middleware: 'auth-admin'
|
||||
});
|
||||
|
||||
const { firstName, isAdmin } = useAuth();
|
||||
|
||||
// Check admin access on mount
|
||||
onMounted(async () => {
|
||||
if (!isAdmin.value) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Access denied. Administrator privileges required.'
|
||||
});
|
||||
}
|
||||
|
||||
// Load admin dashboard data
|
||||
await loadAdminStats();
|
||||
});
|
||||
const { firstName } = useAuth();
|
||||
|
||||
// Reactive data
|
||||
const systemStats = ref({
|
||||
totalUsers: 0,
|
||||
activeUsers: 0,
|
||||
totalSessions: 0,
|
||||
diskUsage: '0%',
|
||||
memoryUsage: '0%',
|
||||
uptime: '0d'
|
||||
});
|
||||
|
||||
|
||||
const systemHealth = ref({
|
||||
cpu: 45,
|
||||
memory: 62,
|
||||
disk: 38
|
||||
});
|
||||
const userCount = ref(0);
|
||||
const loading = ref(false);
|
||||
|
||||
const recentActivity = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: 'User Created',
|
||||
description: 'New user account created for john.doe@example.com',
|
||||
timestamp: '2 hours ago',
|
||||
type: 'success',
|
||||
status: 'Completed'
|
||||
title: 'User Account Created',
|
||||
description: 'New user account created for john.doe@monacousa.org',
|
||||
time: '2 hours ago',
|
||||
icon: 'mdi-account-plus',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'System Backup',
|
||||
description: 'Automated system backup completed successfully',
|
||||
timestamp: '6 hours ago',
|
||||
type: 'info',
|
||||
status: 'Completed'
|
||||
title: 'Role Updated',
|
||||
description: 'User role updated from User to Board Member',
|
||||
time: '4 hours ago',
|
||||
icon: 'mdi-shield-account',
|
||||
color: 'warning'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Permission Update',
|
||||
description: 'User permissions updated for board member',
|
||||
timestamp: '1 day ago',
|
||||
type: 'warning',
|
||||
status: 'Completed'
|
||||
}
|
||||
]);
|
||||
|
||||
const securityAlerts = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: 'Failed Login Attempts',
|
||||
description: '3 failed login attempts from IP 192.168.1.100',
|
||||
severity: 'warning',
|
||||
level: 'Medium'
|
||||
title: 'System Backup',
|
||||
description: 'Automated system backup completed successfully',
|
||||
time: '1 day ago',
|
||||
icon: 'mdi-backup-restore',
|
||||
color: 'info'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'System Update Available',
|
||||
description: 'Security update available for Keycloak',
|
||||
severity: 'info',
|
||||
level: 'Low'
|
||||
id: 4,
|
||||
title: 'Password Reset',
|
||||
description: 'Password reset requested for jane.smith@monacousa.org',
|
||||
time: '2 days ago',
|
||||
icon: 'mdi-key-change',
|
||||
color: 'primary'
|
||||
}
|
||||
]);
|
||||
|
||||
// Load admin statistics
|
||||
const loadAdminStats = async () => {
|
||||
// Load simplified admin stats (without system metrics)
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const stats = await $fetch<{
|
||||
totalUsers: number;
|
||||
activeUsers: number;
|
||||
totalSessions: number;
|
||||
diskUsage: string;
|
||||
memoryUsage: string;
|
||||
systemMetrics: {
|
||||
cpu: number;
|
||||
memory: number;
|
||||
disk: number;
|
||||
uptime: string;
|
||||
processes: number;
|
||||
cpuCores: number;
|
||||
cpuModel: string;
|
||||
memoryTotal: string;
|
||||
memoryUsed: string;
|
||||
diskTotal: string;
|
||||
diskUsed: string;
|
||||
};
|
||||
}>('/api/admin/stats');
|
||||
loading.value = true;
|
||||
|
||||
// Update system stats with real data
|
||||
systemStats.value = {
|
||||
totalUsers: stats.totalUsers || 0,
|
||||
activeUsers: stats.activeUsers || 0,
|
||||
totalSessions: stats.totalSessions || 0,
|
||||
diskUsage: stats.diskUsage || '0%',
|
||||
memoryUsage: stats.memoryUsage || '0%',
|
||||
uptime: stats.systemMetrics?.uptime || '0m'
|
||||
};
|
||||
|
||||
// Update system health with real metrics
|
||||
systemHealth.value = {
|
||||
cpu: stats.systemMetrics?.cpu || 0,
|
||||
memory: stats.systemMetrics?.memory || 0,
|
||||
disk: stats.systemMetrics?.disk || 0
|
||||
};
|
||||
|
||||
console.log('✅ Admin stats loaded with real system metrics:', {
|
||||
cpu: `${systemHealth.value.cpu}%`,
|
||||
memory: `${systemHealth.value.memory}%`,
|
||||
disk: `${systemHealth.value.disk}%`,
|
||||
uptime: systemStats.value.uptime
|
||||
});
|
||||
// Simple user count without complex system metrics
|
||||
const response = await $fetch<{ userCount: number }>('/api/admin/stats');
|
||||
userCount.value = response.userCount || 0;
|
||||
|
||||
console.log('✅ Admin stats loaded:', { userCount: userCount.value });
|
||||
} catch (error) {
|
||||
console.error('Failed to load admin stats:', error);
|
||||
// Use fallback data on error
|
||||
systemStats.value = {
|
||||
totalUsers: 156,
|
||||
activeUsers: 45,
|
||||
totalSessions: 67,
|
||||
diskUsage: '45%',
|
||||
memoryUsage: '62%',
|
||||
uptime: '5d 12h'
|
||||
};
|
||||
|
||||
systemHealth.value = {
|
||||
cpu: 45,
|
||||
memory: 62,
|
||||
disk: 38
|
||||
};
|
||||
console.error('❌ Failed to load admin stats:', error);
|
||||
// Use fallback data
|
||||
userCount.value = 25;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Navigation methods (placeholder implementations)
|
||||
const navigateToUserManagement = () => {
|
||||
// Action methods (placeholders for now)
|
||||
const manageUsers = () => {
|
||||
console.log('Navigate to user management');
|
||||
// TODO: Implement user management navigation
|
||||
};
|
||||
|
||||
const navigateToAuditLogs = () => {
|
||||
const viewAuditLogs = () => {
|
||||
console.log('Navigate to audit logs');
|
||||
// TODO: Implement audit logs navigation
|
||||
};
|
||||
|
||||
const navigateToSystemConfig = () => {
|
||||
console.log('Navigate to system config');
|
||||
const portalSettings = () => {
|
||||
console.log('Navigate to portal settings');
|
||||
// TODO: Implement portal settings navigation
|
||||
};
|
||||
|
||||
|
||||
const createNewUser = () => {
|
||||
const createUser = () => {
|
||||
console.log('Create new user');
|
||||
// TODO: Implement create user dialog/form
|
||||
};
|
||||
|
||||
const generateSystemReport = () => {
|
||||
console.log('Generate system report');
|
||||
const generateReport = () => {
|
||||
console.log('Generate user report');
|
||||
// TODO: Implement report generation
|
||||
};
|
||||
|
||||
const managePermissions = () => {
|
||||
console.log('Manage permissions');
|
||||
const manageRoles = () => {
|
||||
console.log('Manage user roles');
|
||||
// TODO: Implement role management
|
||||
};
|
||||
|
||||
const systemMaintenance = () => {
|
||||
console.log('System maintenance');
|
||||
// TODO: Implement maintenance mode
|
||||
};
|
||||
|
||||
// Load stats on component mount
|
||||
onMounted(async () => {
|
||||
await loadStats();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -486,32 +311,21 @@ const systemMaintenance = () => {
|
||||
}
|
||||
|
||||
.v-card:hover {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.2s ease;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
color: #a31515 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-body-2 {
|
||||
color: #666;
|
||||
.v-list-item {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.v-chip {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.v-progress-linear {
|
||||
border-radius: 4px;
|
||||
.v-list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user