Complete infrastructure reorganization to role-based structure
All checks were successful
Build And Push Image / docker (push) Successful in 1m50s
All checks were successful
Build And Push Image / docker (push) Successful in 1m50s
- Created all missing admin pages (users, settings, events, members, payments) - Created board pages (governance, meetings) - Updated dashboard router to use new /admin, /board, /member structure - Added isMember alias to useAuth composable for consistency - All pages now use correct role-based layouts and middleware - Build verified successfully The platform now has a clean separation: - /admin/* - Administrator dashboard and tools - /board/* - Board member governance and meetings - /member/* - Member portal and resources Next steps: Complete remaining member pages and clean up old dashboard files
This commit is contained in:
513
pages/admin/settings/index.vue
Normal file
513
pages/admin/settings/index.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Header -->
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<h1 class="text-h3 font-weight-bold mb-2">System Settings</h1>
|
||||
<p class="text-body-1 text-medium-emphasis">Configure system preferences and options</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Settings Tabs -->
|
||||
<v-card elevation="2">
|
||||
<v-tabs v-model="activeTab" color="primary">
|
||||
<v-tab value="general">
|
||||
<v-icon start>mdi-cog</v-icon>
|
||||
General
|
||||
</v-tab>
|
||||
<v-tab value="security">
|
||||
<v-icon start>mdi-shield-lock</v-icon>
|
||||
Security
|
||||
</v-tab>
|
||||
<v-tab value="email">
|
||||
<v-icon start>mdi-email</v-icon>
|
||||
Email
|
||||
</v-tab>
|
||||
<v-tab value="payments">
|
||||
<v-icon start>mdi-credit-card</v-icon>
|
||||
Payments
|
||||
</v-tab>
|
||||
<v-tab value="integrations">
|
||||
<v-icon start>mdi-api</v-icon>
|
||||
Integrations
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-window v-model="activeTab">
|
||||
<!-- General Settings -->
|
||||
<v-window-item value="general">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Organization Information</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.general.orgName"
|
||||
label="Organization Name"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.general.orgEmail"
|
||||
label="Contact Email"
|
||||
variant="outlined"
|
||||
type="email"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="settings.general.orgDescription"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-divider class="my-4" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Regional Settings</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="settings.general.timezone"
|
||||
label="Timezone"
|
||||
:items="timezones"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="settings.general.dateFormat"
|
||||
label="Date Format"
|
||||
:items="dateFormats"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="settings.general.currency"
|
||||
label="Currency"
|
||||
:items="currencies"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Security Settings -->
|
||||
<v-window-item value="security">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Authentication</h3>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.security.twoFactor"
|
||||
label="Require Two-Factor Authentication"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.security.sso"
|
||||
label="Enable Single Sign-On (SSO)"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.security.sessionTimeout"
|
||||
label="Session Timeout (minutes)"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.security.maxLoginAttempts"
|
||||
label="Max Login Attempts"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-divider class="my-4" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Password Policy</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.security.minPasswordLength"
|
||||
label="Minimum Password Length"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.security.passwordExpiry"
|
||||
label="Password Expiry (days)"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.security.requireSpecialChar"
|
||||
label="Require Special Characters"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.security.requireNumbers"
|
||||
label="Require Numbers"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Email Settings -->
|
||||
<v-window-item value="email">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">SMTP Configuration</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.smtpHost"
|
||||
label="SMTP Host"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.smtpPort"
|
||||
label="SMTP Port"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.smtpUsername"
|
||||
label="SMTP Username"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.smtpPassword"
|
||||
label="SMTP Password"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.email.useTLS"
|
||||
label="Use TLS/SSL"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-divider class="my-4" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Email Templates</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.fromName"
|
||||
label="From Name"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.email.fromEmail"
|
||||
label="From Email"
|
||||
variant="outlined"
|
||||
type="email"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-btn variant="outlined" color="primary">
|
||||
<v-icon start>mdi-email-edit</v-icon>
|
||||
Manage Email Templates
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Payment Settings -->
|
||||
<v-window-item value="payments">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Payment Gateway</h3>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-radio-group v-model="settings.payments.gateway" row>
|
||||
<v-radio label="Stripe" value="stripe" />
|
||||
<v-radio label="PayPal" value="paypal" />
|
||||
<v-radio label="Square" value="square" />
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.payments.publicKey"
|
||||
label="Public Key"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="settings.payments.secretKey"
|
||||
label="Secret Key"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-divider class="my-4" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Membership Fees</h3>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="settings.payments.membershipFee"
|
||||
label="Annual Membership Fee"
|
||||
variant="outlined"
|
||||
prefix="$"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="settings.payments.boardFee"
|
||||
label="Board Member Fee"
|
||||
variant="outlined"
|
||||
prefix="$"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="settings.payments.lateFee"
|
||||
label="Late Payment Fee"
|
||||
variant="outlined"
|
||||
prefix="$"
|
||||
type="number"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="settings.payments.autoRenew"
|
||||
label="Enable Auto-Renewal"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Integrations -->
|
||||
<v-window-item value="integrations">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4">Third-Party Integrations</h3>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="integration in integrations"
|
||||
:key="integration.id"
|
||||
class="px-0"
|
||||
>
|
||||
<v-card variant="outlined" class="w-100">
|
||||
<v-card-text>
|
||||
<v-row align="center">
|
||||
<v-col cols="auto">
|
||||
<v-icon :icon="integration.icon" size="32" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<div class="font-weight-medium">{{ integration.name }}</div>
|
||||
<div class="text-caption text-medium-emphasis">
|
||||
{{ integration.description }}
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="integration.enabled"
|
||||
color="primary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
size="small"
|
||||
:disabled="!integration.enabled"
|
||||
>
|
||||
Configure
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- Actions -->
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer />
|
||||
<v-btn variant="outlined" @click="resetSettings">
|
||||
Reset to Defaults
|
||||
</v-btn>
|
||||
<v-btn color="primary" variant="flat" @click="saveSettings">
|
||||
Save Changes
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin'
|
||||
});
|
||||
|
||||
// State
|
||||
const activeTab = ref('general');
|
||||
|
||||
// Settings data
|
||||
const settings = ref({
|
||||
general: {
|
||||
orgName: 'MonacoUSA',
|
||||
orgEmail: 'info@monacousa.org',
|
||||
orgDescription: 'Monaco USA Association - Connecting Monaco and USA',
|
||||
timezone: 'America/New_York',
|
||||
dateFormat: 'MM/DD/YYYY',
|
||||
currency: 'USD'
|
||||
},
|
||||
security: {
|
||||
twoFactor: false,
|
||||
sso: true,
|
||||
sessionTimeout: 30,
|
||||
maxLoginAttempts: 5,
|
||||
minPasswordLength: 8,
|
||||
passwordExpiry: 90,
|
||||
requireSpecialChar: true,
|
||||
requireNumbers: true
|
||||
},
|
||||
email: {
|
||||
smtpHost: 'smtp.gmail.com',
|
||||
smtpPort: 587,
|
||||
smtpUsername: '',
|
||||
smtpPassword: '',
|
||||
useTLS: true,
|
||||
fromName: 'MonacoUSA',
|
||||
fromEmail: 'noreply@monacousa.org'
|
||||
},
|
||||
payments: {
|
||||
gateway: 'stripe',
|
||||
publicKey: '',
|
||||
secretKey: '',
|
||||
membershipFee: 500,
|
||||
boardFee: 1000,
|
||||
lateFee: 50,
|
||||
autoRenew: true
|
||||
}
|
||||
});
|
||||
|
||||
// Options
|
||||
const timezones = [
|
||||
'America/New_York',
|
||||
'America/Chicago',
|
||||
'America/Denver',
|
||||
'America/Los_Angeles',
|
||||
'Europe/Monaco'
|
||||
];
|
||||
|
||||
const dateFormats = [
|
||||
'MM/DD/YYYY',
|
||||
'DD/MM/YYYY',
|
||||
'YYYY-MM-DD'
|
||||
];
|
||||
|
||||
const currencies = [
|
||||
'USD',
|
||||
'EUR',
|
||||
'GBP'
|
||||
];
|
||||
|
||||
const integrations = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Google Calendar',
|
||||
description: 'Sync events with Google Calendar',
|
||||
icon: 'mdi-google',
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Mailchimp',
|
||||
description: 'Email marketing and newsletters',
|
||||
icon: 'mdi-email-newsletter',
|
||||
enabled: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Slack',
|
||||
description: 'Team communication and notifications',
|
||||
icon: 'mdi-slack',
|
||||
enabled: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'QuickBooks',
|
||||
description: 'Accounting and financial management',
|
||||
icon: 'mdi-calculator',
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Zoom',
|
||||
description: 'Virtual meetings and webinars',
|
||||
icon: 'mdi-video',
|
||||
enabled: true
|
||||
}
|
||||
]);
|
||||
|
||||
// Methods
|
||||
const saveSettings = () => {
|
||||
console.log('Saving settings:', settings.value);
|
||||
// Save to API
|
||||
};
|
||||
|
||||
const resetSettings = () => {
|
||||
console.log('Resetting to defaults');
|
||||
// Reset to default values
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user