513 lines
15 KiB
Vue
513 lines
15 KiB
Vue
<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> |