Implement glass-bolt design system across platform
Build And Push Image / docker (push) Successful in 1m53s
Details
Build And Push Image / docker (push) Successful in 1m53s
Details
- Removed 19 test/prototype pages while preserving BoltAI-Mockups for reference
- Created comprehensive DESIGN-SYSTEM.md documentation
- Updated and consolidated SCSS structure
- Applied subtle glassmorphic design to admin portal pages
- Updated admin members page with new glass-bolt styling
- Implemented consistent design patterns:
- Glass cards with 60% white opacity and 4px blur
- Subtle borders and soft shadows
- Monaco red accent color (#dc2626)
- Clean typography without excessive gradients
- Hover states with gentle lift animations
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
9c812d78dd
commit
64a12ecd5b
|
|
@ -97,7 +97,10 @@
|
||||||
"Bash(git checkout:*)",
|
"Bash(git checkout:*)",
|
||||||
"Bash(git branch:*)",
|
"Bash(git branch:*)",
|
||||||
"mcp__zen__consensus",
|
"mcp__zen__consensus",
|
||||||
"mcp___21st-dev_magic__21st_magic_component_refiner"
|
"mcp___21st-dev_magic__21st_magic_component_refiner",
|
||||||
|
"Bash(timeout:*)",
|
||||||
|
"Bash(Copy-Item:*)",
|
||||||
|
"Bash(Remove-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\glass-bolt-perfect.vue\" -Force)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 814 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 593 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 814 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 953 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"template": "bolt-vite-react-ts"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
|
||||||
|
|
||||||
|
By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
|
||||||
|
|
||||||
|
Use icons from lucide-react for logos.
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.env
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>MonacoUSA Dashboard</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"name": "vite-react-typescript-starter",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.344.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.9.1",
|
||||||
|
"@types/react": "^18.3.5",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"autoprefixer": "^10.4.18",
|
||||||
|
"eslint": "^9.9.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.11",
|
||||||
|
"globals": "^15.9.0",
|
||||||
|
"postcss": "^8.4.35",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.5.3",
|
||||||
|
"typescript-eslint": "^8.3.0",
|
||||||
|
"vite": "^5.4.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Sidebar } from './components/layout/Sidebar';
|
||||||
|
import { BoardDashboard } from './components/pages/BoardDashboard';
|
||||||
|
import { MemberList } from './components/pages/MemberList';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [currentPage, setCurrentPage] = useState('dashboard');
|
||||||
|
|
||||||
|
const renderPage = () => {
|
||||||
|
switch (currentPage) {
|
||||||
|
case 'dashboard':
|
||||||
|
return <BoardDashboard />;
|
||||||
|
case 'members':
|
||||||
|
return <MemberList />;
|
||||||
|
case 'dues':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">🚧</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Dues Management</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">This premium feature is currently under development. Stay tuned for advanced dues tracking capabilities.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case 'events':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">📅</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Events</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">Event management system coming soon with calendar integration and RSVP tracking.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case 'reports':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">📊</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Reports</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">Advanced analytics and reporting dashboard in development.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case 'documents':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">📄</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Documents</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">Document management system with secure file sharing capabilities.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case 'notifications':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">🔔</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Notifications</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">Smart notification center with customizable alerts and reminders.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
case 'settings':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||||||
|
<span className="text-4xl">⚙️</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900">Settings</h2>
|
||||||
|
<p className="text-gray-600 max-w-md">System configuration and user preferences management.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <BoardDashboard />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-gradient-to-br from-red-50 via-white to-red-100/30 relative overflow-hidden">
|
||||||
|
{/* Background Elements */}
|
||||||
|
<div className="absolute top-0 left-1/4 w-96 h-96 bg-red-200/20 rounded-full blur-3xl animate-pulse-slow"></div>
|
||||||
|
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-red-300/20 rounded-full blur-2xl animate-float"></div>
|
||||||
|
|
||||||
|
<Sidebar currentPage={currentPage} onPageChange={setCurrentPage} />
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-hidden relative">
|
||||||
|
<main className="max-w-7xl mx-auto px-10 py-12 relative z-10">
|
||||||
|
{renderPage()}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Member } from '../../types';
|
||||||
|
import { MemberCard } from './MemberCard';
|
||||||
|
import { Card } from '../ui/Card';
|
||||||
|
import { CreditCard, Sparkles } from 'lucide-react';
|
||||||
|
|
||||||
|
interface DuesManagementProps {
|
||||||
|
members: Member[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DuesManagement: React.FC<DuesManagementProps> = ({ members }) => {
|
||||||
|
const [activeTab, setActiveTab] = useState<'overdue' | 'due-soon' | 'paid'>('overdue');
|
||||||
|
|
||||||
|
const filterMembersByTab = (tab: string) => {
|
||||||
|
switch (tab) {
|
||||||
|
case 'overdue':
|
||||||
|
return members.filter(m => m.duesStatus === 'Overdue');
|
||||||
|
case 'due-soon':
|
||||||
|
return members.filter(m => m.duesStatus === 'Due Soon');
|
||||||
|
case 'paid':
|
||||||
|
return members.filter(m => m.duesStatus === 'Paid');
|
||||||
|
default:
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredMembers = filterMembersByTab(activeTab).slice(0, 8);
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
id: 'overdue',
|
||||||
|
label: 'Overdue',
|
||||||
|
count: members.filter(m => m.duesStatus === 'Overdue').length,
|
||||||
|
gradient: 'from-red-500 to-red-600',
|
||||||
|
icon: '⚠️'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'due-soon',
|
||||||
|
label: 'Due Soon',
|
||||||
|
count: members.filter(m => m.duesStatus === 'Due Soon').length,
|
||||||
|
gradient: 'from-amber-500 to-orange-600',
|
||||||
|
icon: '⏰'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'paid',
|
||||||
|
label: 'Recently Paid',
|
||||||
|
count: members.filter(m => m.duesStatus === 'Paid').length,
|
||||||
|
gradient: 'from-green-500 to-emerald-600',
|
||||||
|
icon: '✅'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative group">
|
||||||
|
{/* Background glow */}
|
||||||
|
<div className="absolute -inset-4 bg-gradient-to-r from-red-600/20 via-red-500/10 to-red-600/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||||
|
|
||||||
|
<Card className="relative bg-white/95 backdrop-blur-md border-0 shadow-ultra rounded-3xl overflow-hidden">
|
||||||
|
{/* Animated background elements */}
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-red-50 to-red-100 rounded-full -translate-y-32 translate-x-32 opacity-50"></div>
|
||||||
|
<div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-red-100 to-red-200 rounded-full translate-y-24 -translate-x-24 opacity-30"></div>
|
||||||
|
|
||||||
|
<div className="relative p-10">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-10">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="p-4 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl shadow-red">
|
||||||
|
<CreditCard className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
|
||||||
|
<Sparkles className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-3xl font-black text-gray-900 tracking-tight">Dues Management</h3>
|
||||||
|
<p className="text-gray-600 font-medium">Track and manage member payments</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-r from-red-100 to-red-200 rounded-2xl p-4 shadow-soft">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-red-800">${members.reduce((sum, m) => sum + m.dueAmount, 0).toLocaleString()}</p>
|
||||||
|
<p className="text-red-600 text-sm font-semibold">Total Outstanding</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enhanced Tabs */}
|
||||||
|
<div className="relative mb-10">
|
||||||
|
<div className="flex space-x-2 bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-2 shadow-inner">
|
||||||
|
{tabs.map((tab, index) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id as any)}
|
||||||
|
className={`relative flex-1 px-8 py-4 rounded-xl text-sm font-bold transition-all duration-300 overflow-hidden group ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? `bg-gradient-to-r ${tab.gradient} text-white shadow-lg transform scale-105`
|
||||||
|
: 'text-gray-700 hover:text-gray-900 hover:bg-white/80 hover:scale-102'
|
||||||
|
}`}
|
||||||
|
style={{ animationDelay: `${index * 100}ms` }}
|
||||||
|
>
|
||||||
|
{/* Active tab shimmer effect */}
|
||||||
|
{activeTab === tab.id && (
|
||||||
|
<div className="absolute inset-0 -top-px overflow-hidden rounded-xl">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -skew-x-12 -translate-x-full group-hover:animate-shimmer"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="relative z-10 flex items-center justify-center space-x-2">
|
||||||
|
<span className="text-lg">{tab.icon}</span>
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
<div className={`px-2 py-1 rounded-full text-xs font-bold ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'bg-white/20 text-white'
|
||||||
|
: 'bg-gray-200 text-gray-700'
|
||||||
|
}`}>
|
||||||
|
{tab.count}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Member Cards Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
{filteredMembers.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={member.id}
|
||||||
|
className="animate-scale-in"
|
||||||
|
style={{ animationDelay: `${index * 100}ms` }}
|
||||||
|
>
|
||||||
|
<MemberCard member={member} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empty State */}
|
||||||
|
{filteredMembers.length === 0 && (
|
||||||
|
<div className="text-center py-16">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<CreditCard className="w-12 h-12 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-bold text-gray-900 mb-2">No members found</h4>
|
||||||
|
<p className="text-gray-600">No members in this category at the moment.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Load More Button */}
|
||||||
|
{filteredMembers.length >= 8 && (
|
||||||
|
<div className="text-center">
|
||||||
|
<button className="relative bg-gradient-to-r from-red-600 to-red-700 text-white px-8 py-4 rounded-2xl font-bold text-sm hover:from-red-700 hover:to-red-800 transform hover:scale-105 transition-all duration-300 shadow-red hover:shadow-neon group overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
|
||||||
|
<span className="relative z-10">Load More Members</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Member } from '../../types';
|
||||||
|
import { Avatar } from '../ui/Avatar';
|
||||||
|
import { Badge } from '../ui/Badge';
|
||||||
|
import { Card } from '../ui/Card';
|
||||||
|
import { Mail, Phone, MoreHorizontal, Clock, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
interface MemberCardProps {
|
||||||
|
member: Member;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
|
||||||
|
const getInitials = (firstName: string, lastName: string) => {
|
||||||
|
return `${firstName[0]}${lastName[0]}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDuesStatusVariant = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Paid': return 'success';
|
||||||
|
case 'Due Soon': return 'warning';
|
||||||
|
case 'Overdue': return 'danger';
|
||||||
|
default: return 'secondary';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Paid': return CheckCircle;
|
||||||
|
case 'Due Soon': return Clock;
|
||||||
|
case 'Overdue': return AlertTriangle;
|
||||||
|
default: return Clock;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDaysText = () => {
|
||||||
|
if (member.duesStatus === 'Overdue' && member.daysOverdue) {
|
||||||
|
return `${member.daysOverdue} days overdue`;
|
||||||
|
}
|
||||||
|
if (member.duesStatus === 'Due Soon' && member.daysTillDue) {
|
||||||
|
return `Due in ${member.daysTillDue} days`;
|
||||||
|
}
|
||||||
|
if (member.lastPaymentDate) {
|
||||||
|
return `Paid ${new Date(member.lastPaymentDate).toLocaleDateString()}`;
|
||||||
|
}
|
||||||
|
return 'No payment info';
|
||||||
|
};
|
||||||
|
|
||||||
|
const StatusIcon = getStatusIcon(member.duesStatus);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="group relative">
|
||||||
|
{/* Hover glow effect */}
|
||||||
|
<div className="absolute -inset-1 bg-gradient-to-r from-red-600/20 to-red-400/20 rounded-2xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||||
|
|
||||||
|
<Card className="relative bg-white/90 backdrop-blur-md border border-red-100/50 hover:border-red-200 transform hover:scale-105 transition-all duration-300 shadow-soft hover:shadow-red rounded-2xl overflow-hidden">
|
||||||
|
{/* Background gradient */}
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-50/50 to-transparent rounded-full -translate-y-16 translate-x-16"></div>
|
||||||
|
|
||||||
|
<div className="relative p-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar
|
||||||
|
initials={getInitials(member.firstName, member.lastName)}
|
||||||
|
size="md"
|
||||||
|
className="ring-2 ring-red-100 group-hover:ring-red-200 transition-all duration-300"
|
||||||
|
/>
|
||||||
|
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full border-2 border-white flex items-center justify-center">
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold text-gray-900 group-hover:text-red-900 transition-colors duration-300">
|
||||||
|
{member.firstName} {member.lastName}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-500 font-medium">{member.id}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="p-2 rounded-full hover:bg-red-100 transition-all duration-300 hover:scale-110 group/btn">
|
||||||
|
<MoreHorizontal size={16} className="text-gray-400 group-hover/btn:text-red-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Section */}
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<StatusIcon size={16} className={`${
|
||||||
|
member.duesStatus === 'Paid' ? 'text-green-600' :
|
||||||
|
member.duesStatus === 'Due Soon' ? 'text-amber-600' :
|
||||||
|
'text-red-600'
|
||||||
|
}`} />
|
||||||
|
<Badge variant={getDuesStatusVariant(member.duesStatus)}>
|
||||||
|
{member.duesStatus}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm font-semibold text-gray-700">{formatDaysText()}</p>
|
||||||
|
|
||||||
|
{member.dueAmount > 0 && (
|
||||||
|
<div className="bg-gradient-to-r from-red-50 to-red-100 rounded-xl p-3 border border-red-200/50">
|
||||||
|
<p className="text-lg font-black text-red-900">
|
||||||
|
${member.dueAmount}
|
||||||
|
</p>
|
||||||
|
<p className="text-red-600 text-xs font-semibold uppercase tracking-wide">Amount Due</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<button className="flex-1 p-3 rounded-xl bg-gradient-to-r from-red-100 to-red-200 hover:from-red-200 hover:to-red-300 transition-all duration-300 hover:scale-105 group/action border border-red-200/50">
|
||||||
|
<Mail size={16} className="text-red-600 mx-auto group-hover/action:animate-bounce" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{member.phone && (
|
||||||
|
<button className="flex-1 p-3 rounded-xl bg-gradient-to-r from-red-100 to-red-200 hover:from-red-200 hover:to-red-300 transition-all duration-300 hover:scale-105 group/action border border-red-200/50">
|
||||||
|
<Phone size={16} className="text-red-600 mx-auto group-hover/action:animate-bounce" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button className="px-4 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 transition-all duration-300 hover:scale-105 shadow-red text-sm font-bold">
|
||||||
|
View
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from '../ui/Card';
|
||||||
|
import { Users, UserCheck, AlertCircle, Calendar, TrendingUp, Sparkles } from 'lucide-react';
|
||||||
|
import { DashboardStats } from '../../types';
|
||||||
|
|
||||||
|
interface StatsGridProps {
|
||||||
|
stats: DashboardStats;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatsGrid: React.FC<StatsGridProps> = ({ stats }) => {
|
||||||
|
const statCards = [
|
||||||
|
{
|
||||||
|
title: 'Total Members',
|
||||||
|
value: stats.totalMembers,
|
||||||
|
icon: Users,
|
||||||
|
trend: `+${stats.memberTrend}%`,
|
||||||
|
gradient: 'from-red-500 via-red-600 to-red-700',
|
||||||
|
glowColor: 'red-500',
|
||||||
|
delay: '0ms',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Active Members',
|
||||||
|
value: stats.activeMembers,
|
||||||
|
icon: UserCheck,
|
||||||
|
gradient: 'from-red-600 via-red-700 to-red-800',
|
||||||
|
glowColor: 'red-600',
|
||||||
|
delay: '100ms',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pending Dues',
|
||||||
|
value: stats.pendingDues,
|
||||||
|
icon: AlertCircle,
|
||||||
|
gradient: 'from-red-700 via-red-800 to-red-900',
|
||||||
|
glowColor: 'red-700',
|
||||||
|
delay: '200ms',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Upcoming Events',
|
||||||
|
value: stats.upcomingEvents,
|
||||||
|
icon: Calendar,
|
||||||
|
gradient: 'from-red-800 via-red-900 to-black',
|
||||||
|
glowColor: 'red-800',
|
||||||
|
delay: '300ms',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
|
{statCards.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group animate-slide-up"
|
||||||
|
style={{ animationDelay: stat.delay }}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
{/* Glow effect */}
|
||||||
|
<div className={`absolute -inset-1 bg-gradient-to-r ${stat.gradient} rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200 animate-glow`}></div>
|
||||||
|
|
||||||
|
{/* Main card */}
|
||||||
|
<div className={`relative bg-gradient-to-br ${stat.gradient} p-8 rounded-3xl shadow-ultra border border-white/10 backdrop-blur-sm transform transition-all duration-500 hover:scale-105 hover:rotate-1 group-hover:shadow-neon overflow-hidden`}>
|
||||||
|
{/* Animated background elements */}
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-700"></div>
|
||||||
|
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-12 -translate-x-12 group-hover:scale-125 transition-transform duration-700"></div>
|
||||||
|
|
||||||
|
{/* Shimmer effect */}
|
||||||
|
<div className="absolute inset-0 -top-px overflow-hidden rounded-3xl">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 -translate-x-full group-hover:animate-shimmer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="p-4 bg-white/20 backdrop-blur-md rounded-2xl shadow-glass border border-white/30 group-hover:bg-white/30 transition-all duration-300">
|
||||||
|
<Icon className="w-8 h-8 text-white drop-shadow-lg" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center animate-pulse">
|
||||||
|
<Sparkles className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{stat.trend && (
|
||||||
|
<div className="bg-white/20 backdrop-blur-md rounded-full px-4 py-2 border border-white/30 group-hover:bg-white/30 transition-all duration-300">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<TrendingUp size={16} className="text-green-300" />
|
||||||
|
<span className="text-white font-bold text-sm">{stat.trend}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-white/80 text-sm font-semibold uppercase tracking-wider">
|
||||||
|
{stat.title}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-end space-x-2">
|
||||||
|
<p className="text-5xl font-black text-white leading-none tracking-tight">
|
||||||
|
{stat.value}
|
||||||
|
</p>
|
||||||
|
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse mb-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
<div className="mt-6 h-2 bg-white/20 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-gradient-to-r from-white/60 to-white/80 rounded-full transition-all duration-1000 ease-out"
|
||||||
|
style={{ width: `${Math.min(100, (stat.value / 200) * 100)}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BarChart3,
|
||||||
|
Users,
|
||||||
|
Calendar,
|
||||||
|
Settings,
|
||||||
|
FileText,
|
||||||
|
Home,
|
||||||
|
CreditCard,
|
||||||
|
Bell,
|
||||||
|
Sparkles
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
currentPage: string;
|
||||||
|
onPageChange: (page: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: Home },
|
||||||
|
{ id: 'members', label: 'Members', icon: Users },
|
||||||
|
{ id: 'dues', label: 'Dues Management', icon: CreditCard },
|
||||||
|
{ id: 'events', label: 'Events', icon: Calendar },
|
||||||
|
{ id: 'reports', label: 'Reports', icon: BarChart3 },
|
||||||
|
{ id: 'documents', label: 'Documents', icon: FileText },
|
||||||
|
{ id: 'notifications', label: 'Notifications', icon: Bell },
|
||||||
|
{ id: 'settings', label: 'Settings', icon: Settings },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Sidebar: React.FC<SidebarProps> = ({ currentPage, onPageChange }) => {
|
||||||
|
return (
|
||||||
|
<div className="w-72 relative">
|
||||||
|
{/* Animated Background */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-red-600 via-red-700 to-red-900 opacity-90"></div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl animate-pulse-slow"></div>
|
||||||
|
<div className="absolute bottom-20 left-0 w-24 h-24 bg-red-300/20 rounded-full blur-2xl animate-float"></div>
|
||||||
|
|
||||||
|
<div className="relative h-screen flex flex-col backdrop-blur-sm">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-8 border-b border-white/10">
|
||||||
|
<div className="flex items-center space-x-4 mb-4">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-12 h-12 bg-gradient-to-br from-white to-red-100 rounded-2xl flex items-center justify-center shadow-ultra transform rotate-3 hover:rotate-0 transition-transform duration-300">
|
||||||
|
<Sparkles className="w-6 h-6 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white tracking-tight">MonacoUSA</h1>
|
||||||
|
<p className="text-red-100/80 text-sm font-medium">Elite Dashboard</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="flex-1 p-6 space-y-3 overflow-y-auto">
|
||||||
|
{menuItems.map((item, index) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const isActive = currentPage === item.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.id} className="relative group" style={{ animationDelay: `${index * 50}ms` }}>
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(item.id)}
|
||||||
|
className={`w-full flex items-center space-x-4 px-6 py-4 rounded-2xl text-left transition-all duration-300 relative overflow-hidden ${
|
||||||
|
isActive
|
||||||
|
? 'bg-white/20 backdrop-blur-md text-white shadow-glass border border-white/20 transform scale-105'
|
||||||
|
: 'text-red-100/80 hover:bg-white/10 hover:text-white hover:backdrop-blur-md hover:transform hover:scale-105 hover:translate-x-2'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Active indicator */}
|
||||||
|
{isActive && (
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-white to-red-200 rounded-r-full"></div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Icon container */}
|
||||||
|
<div className={`relative p-2 rounded-xl transition-all duration-300 ${
|
||||||
|
isActive
|
||||||
|
? 'bg-white/20 shadow-inner'
|
||||||
|
: 'group-hover:bg-white/10'
|
||||||
|
}`}>
|
||||||
|
<Icon size={20} className="relative z-10" />
|
||||||
|
{isActive && (
|
||||||
|
<div className="absolute inset-0 bg-white/10 rounded-xl animate-pulse"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="font-medium tracking-wide">{item.label}</span>
|
||||||
|
|
||||||
|
{/* Hover effect */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="p-6 border-t border-white/10">
|
||||||
|
<div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md rounded-2xl p-6 border border-white/10 overflow-hidden group hover:from-white/15 hover:to-white/10 transition-all duration-300">
|
||||||
|
<div className="absolute top-0 right-0 w-20 h-20 bg-white/5 rounded-full -translate-y-10 translate-x-10"></div>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-white font-semibold text-sm">System Status</p>
|
||||||
|
<p className="text-green-300 text-xs">All systems operational</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="w-full bg-white/10 hover:bg-white/20 text-white text-sm font-medium py-2 px-4 rounded-xl transition-all duration-300 border border-white/20 hover:border-white/30">
|
||||||
|
Contact Support
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,283 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Member } from '../../types';
|
||||||
|
import { Avatar } from '../ui/Avatar';
|
||||||
|
import { Badge } from '../ui/Badge';
|
||||||
|
import { CountryFlag } from '../ui/CountryFlag';
|
||||||
|
import { Card } from '../ui/Card';
|
||||||
|
import { ChevronUp, ChevronDown, MoreHorizontal, Edit, Trash2, Mail, Eye } from 'lucide-react';
|
||||||
|
|
||||||
|
interface MemberTableProps {
|
||||||
|
members: Member[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type SortField = 'name' | 'email' | 'joinDate' | 'duesStatus';
|
||||||
|
type SortDirection = 'asc' | 'desc';
|
||||||
|
|
||||||
|
export const MemberTable: React.FC<MemberTableProps> = ({ members }) => {
|
||||||
|
const [sortField, setSortField] = useState<SortField>('name');
|
||||||
|
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const itemsPerPage = 10;
|
||||||
|
|
||||||
|
const handleSort = (field: SortField) => {
|
||||||
|
if (sortField === field) {
|
||||||
|
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||||
|
} else {
|
||||||
|
setSortField(field);
|
||||||
|
setSortDirection('asc');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortedMembers = [...members].sort((a, b) => {
|
||||||
|
let aValue: string | number;
|
||||||
|
let bValue: string | number;
|
||||||
|
|
||||||
|
switch (sortField) {
|
||||||
|
case 'name':
|
||||||
|
aValue = `${a.firstName} ${a.lastName}`;
|
||||||
|
bValue = `${b.firstName} ${b.lastName}`;
|
||||||
|
break;
|
||||||
|
case 'email':
|
||||||
|
aValue = a.email;
|
||||||
|
bValue = b.email;
|
||||||
|
break;
|
||||||
|
case 'joinDate':
|
||||||
|
aValue = new Date(a.joinDate).getTime();
|
||||||
|
bValue = new Date(b.joinDate).getTime();
|
||||||
|
break;
|
||||||
|
case 'duesStatus':
|
||||||
|
aValue = a.duesStatus;
|
||||||
|
bValue = b.duesStatus;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
aValue = '';
|
||||||
|
bValue = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sortDirection === 'asc') {
|
||||||
|
return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
|
||||||
|
} else {
|
||||||
|
return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const paginatedMembers = sortedMembers.slice(
|
||||||
|
(currentPage - 1) * itemsPerPage,
|
||||||
|
currentPage * itemsPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(members.length / itemsPerPage);
|
||||||
|
|
||||||
|
const getInitials = (firstName: string, lastName: string) => {
|
||||||
|
return `${firstName[0]}${lastName[0]}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDuesStatusVariant = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Paid': return 'success';
|
||||||
|
case 'Due Soon': return 'warning';
|
||||||
|
case 'Overdue': return 'danger';
|
||||||
|
default: return 'secondary';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusVariant = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Active': return 'success';
|
||||||
|
case 'Inactive': return 'secondary';
|
||||||
|
case 'Pending': return 'warning';
|
||||||
|
default: return 'secondary';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const SortButton: React.FC<{ field: SortField; children: React.ReactNode }> = ({ field, children }) => (
|
||||||
|
<button
|
||||||
|
onClick={() => handleSort(field)}
|
||||||
|
className="flex items-center space-x-2 hover:text-red-900 transition-colors duration-300 group"
|
||||||
|
>
|
||||||
|
<span className="font-bold">{children}</span>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<ChevronUp
|
||||||
|
size={12}
|
||||||
|
className={`transition-colors duration-300 ${
|
||||||
|
sortField === field && sortDirection === 'asc'
|
||||||
|
? 'text-red-600'
|
||||||
|
: 'text-gray-400 group-hover:text-red-400'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<ChevronDown
|
||||||
|
size={12}
|
||||||
|
className={`-mt-1 transition-colors duration-300 ${
|
||||||
|
sortField === field && sortDirection === 'desc'
|
||||||
|
? 'text-red-600'
|
||||||
|
: 'text-gray-400 group-hover:text-red-400'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative group">
|
||||||
|
<div className="absolute -inset-2 bg-gradient-to-r from-red-600/10 via-red-500/5 to-red-600/10 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||||
|
|
||||||
|
<Card className="relative overflow-hidden bg-white/95 backdrop-blur-md border border-red-100/50 shadow-ultra rounded-3xl">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gradient-to-r from-red-50 via-red-100 to-red-50 border-b-2 border-red-200">
|
||||||
|
<tr>
|
||||||
|
<th className="text-left py-6 px-8 text-red-900">
|
||||||
|
<SortButton field="name">Member</SortButton>
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 text-red-900">
|
||||||
|
<SortButton field="email">Email</SortButton>
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 font-bold text-red-900">
|
||||||
|
Nationality
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 font-bold text-red-900">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 text-red-900">
|
||||||
|
<SortButton field="duesStatus">Dues Status</SortButton>
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 font-bold text-red-900">
|
||||||
|
Member Type
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 text-red-900">
|
||||||
|
<SortButton field="joinDate">Join Date</SortButton>
|
||||||
|
</th>
|
||||||
|
<th className="text-left py-6 px-8 font-bold text-red-900">
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-red-100">
|
||||||
|
{paginatedMembers.map((member, index) => (
|
||||||
|
<tr
|
||||||
|
key={member.id}
|
||||||
|
className={`hover:bg-red-50 transition-all duration-300 group/row ${
|
||||||
|
index % 2 === 1 ? 'bg-red-25' : 'bg-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<td className="py-6 px-8">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar
|
||||||
|
initials={getInitials(member.firstName, member.lastName)}
|
||||||
|
size="sm"
|
||||||
|
className="ring-2 ring-red-100 group-hover/row:ring-red-200 transition-all duration-300"
|
||||||
|
/>
|
||||||
|
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full border-2 border-white">
|
||||||
|
<div className="w-1 h-1 bg-white rounded-full mx-auto mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-bold text-gray-900 group-hover/row:text-red-900 transition-colors duration-300">
|
||||||
|
{member.firstName} {member.lastName}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500 font-medium">{member.id}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8 text-gray-900 font-medium group-hover/row:text-red-900 transition-colors duration-300">
|
||||||
|
{member.email}
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8">
|
||||||
|
<div className="flex space-x-1">
|
||||||
|
{member.nationality.map((code, idx) => (
|
||||||
|
<CountryFlag key={idx} code={code} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8">
|
||||||
|
<Badge variant={getStatusVariant(member.status)}>
|
||||||
|
{member.status}
|
||||||
|
</Badge>
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8">
|
||||||
|
<Badge variant={getDuesStatusVariant(member.duesStatus)}>
|
||||||
|
{member.duesStatus}
|
||||||
|
</Badge>
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8 text-gray-900 font-medium group-hover/row:text-red-900 transition-colors duration-300">
|
||||||
|
{member.memberType}
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8 text-gray-900 font-medium group-hover/row:text-red-900 transition-colors duration-300">
|
||||||
|
{new Date(member.joinDate).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td className="py-6 px-8">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<button
|
||||||
|
className="p-3 rounded-xl hover:bg-red-100 transition-all duration-300 hover:scale-110 group/btn"
|
||||||
|
title="View Details"
|
||||||
|
>
|
||||||
|
<Eye size={16} className="text-gray-400 group-hover/btn:text-red-600" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="p-3 rounded-xl hover:bg-red-100 transition-all duration-300 hover:scale-110 group/btn"
|
||||||
|
title="Send Email"
|
||||||
|
>
|
||||||
|
<Mail size={16} className="text-gray-400 group-hover/btn:text-red-600" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="p-3 rounded-xl hover:bg-red-100 transition-all duration-300 hover:scale-110 group/btn"
|
||||||
|
title="Edit Member"
|
||||||
|
>
|
||||||
|
<Edit size={16} className="text-gray-400 group-hover/btn:text-red-600" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="p-3 rounded-xl hover:bg-red-100 transition-all duration-300 hover:scale-110 group/btn"
|
||||||
|
title="More Options"
|
||||||
|
>
|
||||||
|
<MoreHorizontal size={16} className="text-gray-400 group-hover/btn:text-red-600" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enhanced Pagination */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between px-8 py-6 border-t-2 border-red-100 bg-gradient-to-r from-red-50/50 to-red-100/50">
|
||||||
|
<div className="text-sm text-red-700 font-semibold">
|
||||||
|
Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, members.length)} of {members.length} members
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className="px-6 py-3 rounded-xl border-2 border-red-200 text-sm font-bold hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed text-red-700 transition-all duration-300 hover:scale-105"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||||
|
<button
|
||||||
|
key={page}
|
||||||
|
onClick={() => setCurrentPage(page)}
|
||||||
|
className={`px-4 py-3 rounded-xl text-sm font-bold transition-all duration-300 hover:scale-105 ${
|
||||||
|
currentPage === page
|
||||||
|
? 'bg-gradient-to-r from-red-600 to-red-700 text-white shadow-red'
|
||||||
|
: 'border-2 border-red-200 hover:bg-red-50 text-red-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
className="px-6 py-3 rounded-xl border-2 border-red-200 text-sm font-bold hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed text-red-700 transition-all duration-300 hover:scale-105"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { currentUser, dashboardStats, members } from '../../data/mockData';
|
||||||
|
import { Avatar } from '../ui/Avatar';
|
||||||
|
import { StatsGrid } from '../dashboard/StatsGrid';
|
||||||
|
import { DuesManagement } from '../dashboard/DuesManagement';
|
||||||
|
import { Crown, Sparkles, Calendar, Bell } from 'lucide-react';
|
||||||
|
|
||||||
|
export const BoardDashboard: React.FC = () => {
|
||||||
|
const getInitials = (firstName: string, lastName: string) => {
|
||||||
|
return `${firstName[0]}${lastName[0]}`.toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Ultra-Modern Hero Header */}
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
{/* Animated background */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-red-600 via-red-700 to-red-900"></div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Floating elements */}
|
||||||
|
<div className="absolute top-10 right-20 w-64 h-64 bg-white/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div className="absolute bottom-10 left-20 w-48 h-48 bg-red-300/10 rounded-full blur-2xl animate-pulse-slow"></div>
|
||||||
|
<div className="absolute top-1/2 left-1/2 w-32 h-32 bg-white/10 rounded-full blur-xl animate-bounce-slow"></div>
|
||||||
|
|
||||||
|
{/* Mesh gradient overlay */}
|
||||||
|
<div className="absolute inset-0 opacity-20 bg-mesh-gradient animate-gradient bg-400% mix-blend-overlay"></div>
|
||||||
|
|
||||||
|
<div className="relative p-12 rounded-3xl">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-8 lg:space-y-0">
|
||||||
|
{/* User Info */}
|
||||||
|
<div className="flex items-center space-x-6 animate-slide-in">
|
||||||
|
<div className="relative group">
|
||||||
|
{/* Avatar glow */}
|
||||||
|
<div className="absolute -inset-2 bg-gradient-to-r from-white/30 to-red-200/30 rounded-full blur-lg group-hover:blur-xl transition-all duration-300"></div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar
|
||||||
|
initials={getInitials(currentUser.firstName, currentUser.lastName)}
|
||||||
|
size="xl"
|
||||||
|
className="ring-4 ring-white/40 shadow-ultra backdrop-blur-sm border-2 border-white/20 group-hover:scale-110 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Status indicator */}
|
||||||
|
<div className="absolute -bottom-2 -right-2 flex items-center space-x-1">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-r from-green-400 to-emerald-500 rounded-full border-4 border-white shadow-lg flex items-center justify-center">
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Crown icon */}
|
||||||
|
<div className="absolute -top-3 -right-1 w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg animate-bounce-slow">
|
||||||
|
<Crown className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-5xl font-black text-white mb-2 tracking-tight">
|
||||||
|
Welcome back,
|
||||||
|
<span className="block bg-gradient-to-r from-white via-red-100 to-white bg-clip-text text-transparent animate-gradient bg-300%">
|
||||||
|
{currentUser.firstName}!
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="bg-white/20 backdrop-blur-md rounded-full px-6 py-3 border border-white/30 shadow-glass">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Sparkles className="w-5 h-5 text-yellow-300" />
|
||||||
|
<span className="text-white font-bold">{currentUser.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-6 w-px bg-white/30"></div>
|
||||||
|
|
||||||
|
<span className="text-red-100 font-medium">MonacoUSA Association</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date & Quick Actions */}
|
||||||
|
<div className="space-y-6 animate-slide-up" style={{ animationDelay: '200ms' }}>
|
||||||
|
{/* Date Card */}
|
||||||
|
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 shadow-glass hover:bg-white/15 transition-all duration-300 group">
|
||||||
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
|
<Calendar className="w-6 h-6 text-white" />
|
||||||
|
<p className="text-red-100 font-semibold">Today</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-bold text-white leading-tight">
|
||||||
|
{new Date().toLocaleDateString('en-US', {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 h-1 bg-white/20 rounded-full overflow-hidden">
|
||||||
|
<div className="h-full bg-gradient-to-r from-white/60 to-white/80 rounded-full w-3/4 animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button className="flex-1 bg-white/10 backdrop-blur-md hover:bg-white/20 text-white p-4 rounded-xl border border-white/20 transition-all duration-300 hover:scale-105 group">
|
||||||
|
<Bell className="w-5 h-5 mx-auto mb-2 group-hover:animate-bounce" />
|
||||||
|
<span className="text-sm font-medium">Alerts</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="flex-1 bg-white text-red-600 hover:bg-red-50 p-4 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg group">
|
||||||
|
<Sparkles className="w-5 h-5 mx-auto mb-2 group-hover:animate-spin" />
|
||||||
|
<span className="text-sm font-bold">Quick Add</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Decorative line */}
|
||||||
|
<div className="mt-8 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statistics Grid */}
|
||||||
|
<StatsGrid stats={dashboardStats} />
|
||||||
|
|
||||||
|
{/* Dues Management */}
|
||||||
|
<DuesManagement members={members} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { members } from '../../data/mockData';
|
||||||
|
import { MemberTable } from '../members/MemberTable';
|
||||||
|
import { Button } from '../ui/Button';
|
||||||
|
import { Search, Filter, Download, Plus, Users, Sparkles } from 'lucide-react';
|
||||||
|
|
||||||
|
export const MemberList: React.FC = () => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [activeFilter, setActiveFilter] = useState<string>('all');
|
||||||
|
|
||||||
|
const filterOptions = [
|
||||||
|
{ id: 'all', label: 'All Members', count: members.length, gradient: 'from-gray-500 to-gray-600' },
|
||||||
|
{ id: 'active', label: 'Active', count: members.filter(m => m.status === 'Active').length, gradient: 'from-green-500 to-emerald-600' },
|
||||||
|
{ id: 'inactive', label: 'Inactive', count: members.filter(m => m.status === 'Inactive').length, gradient: 'from-gray-400 to-gray-500' },
|
||||||
|
{ id: 'overdue', label: 'Overdue', count: members.filter(m => m.duesStatus === 'Overdue').length, gradient: 'from-red-500 to-red-600' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredMembers = members.filter(member => {
|
||||||
|
const matchesSearch =
|
||||||
|
`${member.firstName} ${member.lastName}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
member.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
member.id.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
|
||||||
|
const matchesFilter =
|
||||||
|
activeFilter === 'all' ||
|
||||||
|
(activeFilter === 'active' && member.status === 'Active') ||
|
||||||
|
(activeFilter === 'inactive' && member.status === 'Inactive') ||
|
||||||
|
(activeFilter === 'overdue' && member.duesStatus === 'Overdue');
|
||||||
|
|
||||||
|
return matchesSearch && matchesFilter;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Ultra-Modern Header */}
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
{/* Animated background */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-red-600 via-red-700 to-red-900"></div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Floating elements */}
|
||||||
|
<div className="absolute top-5 right-10 w-48 h-48 bg-white/5 rounded-full blur-3xl animate-float"></div>
|
||||||
|
<div className="absolute bottom-5 left-10 w-32 h-32 bg-red-300/10 rounded-full blur-2xl animate-pulse-slow"></div>
|
||||||
|
|
||||||
|
<div className="relative p-10 rounded-3xl">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
|
||||||
|
<div className="space-y-4 animate-slide-in">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="p-4 bg-white/20 backdrop-blur-md rounded-2xl shadow-glass border border-white/30">
|
||||||
|
<Users className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center">
|
||||||
|
<Sparkles className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-5xl font-black text-white tracking-tight">Members Directory</h1>
|
||||||
|
<p className="text-red-100 text-xl font-medium">{filteredMembers.length} members found</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4 animate-slide-up" style={{ animationDelay: '200ms' }}>
|
||||||
|
<Button variant="glass" className="flex items-center space-x-2">
|
||||||
|
<Download size={16} />
|
||||||
|
<span>Export</span>
|
||||||
|
</Button>
|
||||||
|
<Button className="flex items-center space-x-2 bg-white text-red-600 hover:bg-red-50 shadow-ultra">
|
||||||
|
<Plus size={16} />
|
||||||
|
<span>Add Member</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enhanced Filters and Search */}
|
||||||
|
<div className="relative group">
|
||||||
|
<div className="absolute -inset-2 bg-gradient-to-r from-red-600/10 via-red-500/5 to-red-600/10 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||||
|
|
||||||
|
<div className="relative bg-white/95 backdrop-blur-md rounded-3xl p-8 shadow-ultra border border-red-100/50">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
|
||||||
|
{/* Filter Chips */}
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{filterOptions.map((option, index) => (
|
||||||
|
<button
|
||||||
|
key={option.id}
|
||||||
|
onClick={() => setActiveFilter(option.id)}
|
||||||
|
className={`relative inline-flex items-center px-6 py-3 rounded-2xl text-sm font-bold transition-all duration-300 overflow-hidden group/filter ${
|
||||||
|
activeFilter === option.id
|
||||||
|
? `bg-gradient-to-r ${option.gradient} text-white shadow-red transform scale-105`
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
|
||||||
|
}`}
|
||||||
|
style={{ animationDelay: `${index * 100}ms` }}
|
||||||
|
>
|
||||||
|
{activeFilter === option.id && (
|
||||||
|
<div className="absolute inset-0 -top-px overflow-hidden rounded-2xl">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -skew-x-12 -translate-x-full group-hover/filter:animate-shimmer"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span className="relative z-10">{option.label}</span>
|
||||||
|
<div className={`relative z-10 ml-2 px-2 py-1 rounded-full text-xs font-bold ${
|
||||||
|
activeFilter === option.id ? 'bg-white/20' : 'bg-gray-200 text-gray-800'
|
||||||
|
}`}>
|
||||||
|
{option.count}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and Filter */}
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="relative group/search">
|
||||||
|
<Search size={20} className="absolute left-4 top-1/2 transform -translate-y-1/2 text-red-400 group-focus-within/search:text-red-600 transition-colors duration-300" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search members..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-12 pr-4 py-4 w-80 border-2 border-red-200 rounded-2xl focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none bg-red-50/50 text-red-900 placeholder-red-400 font-medium transition-all duration-300 hover:border-red-300"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="secondary" className="flex items-center space-x-2">
|
||||||
|
<Filter size={16} />
|
||||||
|
<span>Advanced</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Member Table */}
|
||||||
|
<MemberTable members={filteredMembers} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface AvatarProps {
|
||||||
|
src?: string;
|
||||||
|
alt?: string;
|
||||||
|
initials?: string;
|
||||||
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'w-10 h-10 text-sm',
|
||||||
|
md: 'w-12 h-12 text-base',
|
||||||
|
lg: 'w-16 h-16 text-lg',
|
||||||
|
xl: 'w-20 h-20 text-xl',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Avatar: React.FC<AvatarProps> = ({
|
||||||
|
src,
|
||||||
|
alt,
|
||||||
|
initials,
|
||||||
|
size = 'md',
|
||||||
|
className = ''
|
||||||
|
}) => {
|
||||||
|
const baseClasses = `inline-flex items-center justify-center rounded-2xl bg-gradient-to-br from-red-500 via-red-600 to-red-700 text-white font-bold shadow-ultra transition-all duration-300 hover:shadow-neon ${sizeClasses[size]} ${className}`;
|
||||||
|
|
||||||
|
if (src) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
className={`${baseClasses} object-cover`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={baseClasses}>
|
||||||
|
<span className="drop-shadow-lg">{initials}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface BadgeProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
variant?: 'success' | 'warning' | 'danger' | 'info' | 'secondary';
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const variants = {
|
||||||
|
success: 'bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 border border-green-200/50 shadow-sm',
|
||||||
|
warning: 'bg-gradient-to-r from-amber-100 to-yellow-100 text-amber-800 border border-amber-200/50 shadow-sm',
|
||||||
|
danger: 'bg-gradient-to-r from-red-100 to-rose-100 text-red-800 border border-red-200/50 shadow-sm',
|
||||||
|
info: 'bg-gradient-to-r from-red-50 to-red-100 text-red-700 border border-red-200/50 shadow-sm',
|
||||||
|
secondary: 'bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 border border-gray-200/50 shadow-sm',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Badge: React.FC<BadgeProps> = ({
|
||||||
|
children,
|
||||||
|
variant = 'secondary',
|
||||||
|
className = ''
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<span className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold backdrop-blur-sm transition-all duration-200 hover:scale-105 ${variants[variant]} ${className}`}>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
variant?: 'primary' | 'secondary' | 'danger' | 'glass';
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const variants = {
|
||||||
|
primary: 'relative bg-gradient-to-r from-red-600 to-red-700 text-white hover:from-red-700 hover:to-red-800 focus:ring-red-500 shadow-red transform hover:scale-105 hover:shadow-neon border border-red-500/20 overflow-hidden group',
|
||||||
|
secondary: 'bg-white/90 backdrop-blur-md text-red-700 border-2 border-red-200 hover:bg-white hover:border-red-300 focus:ring-red-500 shadow-soft hover:shadow-red transform hover:scale-105',
|
||||||
|
danger: 'bg-gradient-to-r from-red-600 to-red-700 text-white hover:from-red-700 hover:to-red-800 focus:ring-red-500 shadow-red hover:shadow-neon transform hover:scale-105',
|
||||||
|
glass: 'bg-white/10 backdrop-blur-md text-white border border-white/20 hover:bg-white/20 hover:border-white/30 shadow-glass hover:shadow-ultra transform hover:scale-105',
|
||||||
|
};
|
||||||
|
|
||||||
|
const sizes = {
|
||||||
|
sm: 'px-4 py-2 text-sm',
|
||||||
|
md: 'px-6 py-3 text-sm',
|
||||||
|
lg: 'px-8 py-4 text-base',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Button: React.FC<ButtonProps> = ({
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
children,
|
||||||
|
className = '',
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={`inline-flex items-center justify-center rounded-xl font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 ${variants[variant]} ${sizes[size]} ${className}`}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{variant === 'primary' && (
|
||||||
|
<>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
|
||||||
|
<div className="absolute inset-0 -top-px overflow-hidden rounded-xl">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -skew-x-12 -translate-x-full group-hover:animate-shimmer"></div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span className="relative z-10">{children}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface CardProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
hover?: boolean;
|
||||||
|
glass?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Card: React.FC<CardProps> = ({
|
||||||
|
children,
|
||||||
|
className = '',
|
||||||
|
hover = false,
|
||||||
|
glass = false
|
||||||
|
}) => {
|
||||||
|
const baseClasses = 'rounded-lg border border-slate-200';
|
||||||
|
const hoverClasses = hover ? 'transition-all duration-200 hover:shadow-md hover:border-slate-300' : '';
|
||||||
|
const glassClasses = glass
|
||||||
|
? 'bg-white/80 backdrop-blur-sm border-white/20 shadow-lg'
|
||||||
|
: 'bg-white shadow-sm';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${baseClasses} ${hoverClasses} ${glassClasses} ${className}`}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface CountryFlagProps {
|
||||||
|
code: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const countryNames: Record<string, string> = {
|
||||||
|
US: 'United States',
|
||||||
|
GB: 'United Kingdom',
|
||||||
|
FR: 'France',
|
||||||
|
IT: 'Italy',
|
||||||
|
ES: 'Spain',
|
||||||
|
DE: 'Germany',
|
||||||
|
CA: 'Canada',
|
||||||
|
BR: 'Brazil',
|
||||||
|
MC: 'Monaco',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CountryFlag: React.FC<CountryFlagProps> = ({ code, className = '' }) => {
|
||||||
|
const countryName = countryNames[code] || code;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={`inline-block w-6 h-4 rounded-sm bg-gradient-to-r from-blue-500 to-red-500 text-white text-xs leading-4 text-center ${className}`}
|
||||||
|
title={countryName}
|
||||||
|
>
|
||||||
|
{code}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
export interface Member {
|
||||||
|
id: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
email: string;
|
||||||
|
phone?: string;
|
||||||
|
avatar?: string;
|
||||||
|
nationality: string[];
|
||||||
|
status: 'Active' | 'Inactive' | 'Pending';
|
||||||
|
duesStatus: 'Paid' | 'Due Soon' | 'Overdue';
|
||||||
|
memberType: 'Regular' | 'Premium' | 'Life' | 'Honorary';
|
||||||
|
joinDate: string;
|
||||||
|
lastPaymentDate?: string;
|
||||||
|
dueAmount: number;
|
||||||
|
daysOverdue?: number;
|
||||||
|
daysTillDue?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardStats {
|
||||||
|
totalMembers: number;
|
||||||
|
activeMembers: number;
|
||||||
|
pendingDues: number;
|
||||||
|
upcomingEvents: number;
|
||||||
|
memberTrend: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
role: 'Board Member' | 'Admin';
|
||||||
|
avatar?: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
monaco: {
|
||||||
|
50: '#FEF2F2',
|
||||||
|
100: '#FEE2E2',
|
||||||
|
200: '#FECACA',
|
||||||
|
300: '#FCA5A5',
|
||||||
|
400: '#F87171',
|
||||||
|
500: '#EF4444',
|
||||||
|
600: '#DC2626',
|
||||||
|
700: '#B91C1C',
|
||||||
|
800: '#991B1B',
|
||||||
|
900: '#7F1D1D',
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
50: '#FEF2F2',
|
||||||
|
100: '#FEE2E2',
|
||||||
|
200: '#FECACA',
|
||||||
|
300: '#FCA5A5',
|
||||||
|
400: '#F87171',
|
||||||
|
500: '#EF4444',
|
||||||
|
600: '#DC2626',
|
||||||
|
700: '#B91C1C',
|
||||||
|
800: '#991B1B',
|
||||||
|
900: '#7F1D1D',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||||
|
'red-gradient': 'linear-gradient(135deg, #DC2626 0%, #B91C1C 100%)',
|
||||||
|
'red-gradient-soft': 'linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%)',
|
||||||
|
'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)',
|
||||||
|
'mesh-gradient': 'radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%), radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%), radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%), radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%)',
|
||||||
|
'aurora': 'linear-gradient(45deg, #ff6b6b, #ee5a24, #ff9ff3, #54a0ff, #5f27cd)',
|
||||||
|
'cyber-red': 'linear-gradient(135deg, #ff0844 0%, #ffb199 100%)',
|
||||||
|
'neon-glow': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'red': '0 4px 14px 0 rgba(220, 38, 38, 0.15)',
|
||||||
|
'red-lg': '0 10px 25px -3px rgba(220, 38, 38, 0.1), 0 4px 6px -2px rgba(220, 38, 38, 0.05)',
|
||||||
|
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
||||||
|
'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
||||||
|
'glow': '0 0 20px rgba(220, 38, 38, 0.3)',
|
||||||
|
'neon': '0 0 5px theme(colors.red.400), 0 0 20px theme(colors.red.400), 0 0 35px theme(colors.red.400)',
|
||||||
|
'ultra': '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05)',
|
||||||
|
'floating': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||||
|
},
|
||||||
|
backdropBlur: {
|
||||||
|
xs: '2px',
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'float': 'float 6s ease-in-out infinite',
|
||||||
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
'bounce-slow': 'bounce 3s infinite',
|
||||||
|
'spin-slow': 'spin 8s linear infinite',
|
||||||
|
'gradient': 'gradient 15s ease infinite',
|
||||||
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
||||||
|
'shimmer': 'shimmer 2.5s linear infinite',
|
||||||
|
'slide-up': 'slideUp 0.5s ease-out',
|
||||||
|
'slide-in': 'slideIn 0.3s ease-out',
|
||||||
|
'scale-in': 'scaleIn 0.2s ease-out',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
float: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0px)' },
|
||||||
|
'50%': { transform: 'translateY(-20px)' },
|
||||||
|
},
|
||||||
|
gradient: {
|
||||||
|
'0%, 100%': { backgroundPosition: '0% 50%' },
|
||||||
|
'50%': { backgroundPosition: '100% 50%' },
|
||||||
|
},
|
||||||
|
glow: {
|
||||||
|
'0%': { boxShadow: '0 0 20px rgba(220, 38, 38, 0.3)' },
|
||||||
|
'100%': { boxShadow: '0 0 30px rgba(220, 38, 38, 0.6)' },
|
||||||
|
},
|
||||||
|
shimmer: {
|
||||||
|
'0%': { transform: 'translateX(-100%)' },
|
||||||
|
'100%': { transform: 'translateX(100%)' },
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
slideIn: {
|
||||||
|
'0%': { transform: 'translateX(-20px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
scaleIn: {
|
||||||
|
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
||||||
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ['lucide-react'],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,321 @@
|
||||||
|
# MonacoUSA Portal Design System - Glass Bolt Theme
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
The MonacoUSA Portal uses a sophisticated glassmorphic design system inspired by bolt.ai's subtle and professional aesthetic. This design language emphasizes clarity, hierarchy, and modern visual appeal while maintaining excellent readability and performance.
|
||||||
|
|
||||||
|
## Core Design Principles
|
||||||
|
|
||||||
|
### 1. Subtle Glassmorphism
|
||||||
|
- **Primary Glass Effect**: `rgba(255, 255, 255, 0.6)` background with 4px blur
|
||||||
|
- **Ultra Glass Variant**: `rgba(255, 255, 255, 0.8)` for higher contrast areas
|
||||||
|
- **Minimal Blur**: 2-4px backdrop-filter for performance
|
||||||
|
- **Light Borders**: `rgba(0, 0, 0, 0.05)` for subtle definition
|
||||||
|
- **Soft Shadows**: `0 4px 12px rgba(0, 0, 0, 0.08)` for depth
|
||||||
|
|
||||||
|
### 2. Color Palette
|
||||||
|
|
||||||
|
#### Monaco Red Spectrum
|
||||||
|
```scss
|
||||||
|
$monaco-red-50: #fef2f2;
|
||||||
|
$monaco-red-100: #fee2e2;
|
||||||
|
$monaco-red-200: #fecaca;
|
||||||
|
$monaco-red-300: #fca5a5;
|
||||||
|
$monaco-red-400: #f87171;
|
||||||
|
$monaco-red-500: #ef4444;
|
||||||
|
$monaco-red-600: #dc2626; // Primary Brand Color
|
||||||
|
$monaco-red-700: #b91c1c;
|
||||||
|
$monaco-red-800: #991b1b;
|
||||||
|
$monaco-red-900: #7f1d1d;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Neutral Palette
|
||||||
|
```scss
|
||||||
|
$gray-50: #fafafa;
|
||||||
|
$gray-100: #f4f4f5;
|
||||||
|
$gray-200: #e4e4e7;
|
||||||
|
$gray-300: #d4d4d8;
|
||||||
|
$gray-400: #a1a1aa;
|
||||||
|
$gray-500: #71717a;
|
||||||
|
$gray-600: #52525b;
|
||||||
|
$gray-700: #3f3f46;
|
||||||
|
$gray-800: #27272a;
|
||||||
|
$gray-900: #18181b;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Typography
|
||||||
|
- **Font Family**: Inter, system-ui, sans-serif
|
||||||
|
- **Headings**: Bold weight, slight letter-spacing
|
||||||
|
- **Body Text**: Regular weight, optimized line-height
|
||||||
|
- **Text Colors**:
|
||||||
|
- Primary: `rgba(0, 0, 0, 0.87)`
|
||||||
|
- Secondary: `rgba(0, 0, 0, 0.6)`
|
||||||
|
- Disabled: `rgba(0, 0, 0, 0.38)`
|
||||||
|
|
||||||
|
### 4. Component Patterns
|
||||||
|
|
||||||
|
#### Glass Cards
|
||||||
|
```scss
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
-webkit-backdrop-filter: blur(4px);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Stat Cards
|
||||||
|
```scss
|
||||||
|
.stat-card {
|
||||||
|
@extend .glass-card;
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(220, 38, 38, 0.08);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: $monaco-red-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Navigation Sidebar
|
||||||
|
```scss
|
||||||
|
.glass-sidebar {
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(220, 38, 38, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: rgba(220, 38, 38, 0.1);
|
||||||
|
color: $monaco-red-600;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Forms & Inputs
|
||||||
|
```scss
|
||||||
|
.glass-input {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: $monaco-red-600;
|
||||||
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Buttons
|
||||||
|
```scss
|
||||||
|
.btn-glass {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
background: rgba(220, 38, 38, 0.9);
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(220, 38, 38, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Layout Patterns
|
||||||
|
|
||||||
|
#### Dashboard Grid
|
||||||
|
- **Desktop**: 4 columns for stat cards
|
||||||
|
- **Tablet**: 2 columns
|
||||||
|
- **Mobile**: Single column
|
||||||
|
- **Gap**: 1.5rem between cards
|
||||||
|
|
||||||
|
#### Page Structure
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Sidebar │ Main Content │
|
||||||
|
│ 250px │ Flexible │
|
||||||
|
│ │ ┌───────────────────────┐ │
|
||||||
|
│ │ │ Header Section │ │
|
||||||
|
│ │ ├───────────────────────┤ │
|
||||||
|
│ │ │ Stats Grid │ │
|
||||||
|
│ │ ├───────────────────────┤ │
|
||||||
|
│ │ │ Content Cards │ │
|
||||||
|
│ │ └───────────────────────┘ │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Animation & Transitions
|
||||||
|
|
||||||
|
#### Hover Effects
|
||||||
|
- **Lift**: `transform: translateY(-2px)`
|
||||||
|
- **Shadow Enhancement**: Increase shadow opacity/blur
|
||||||
|
- **Duration**: 200-300ms
|
||||||
|
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)`
|
||||||
|
|
||||||
|
#### Page Transitions
|
||||||
|
- **Fade In**: 300ms ease-out
|
||||||
|
- **Slide Up**: 400ms ease-out with 20px offset
|
||||||
|
|
||||||
|
### 7. Responsive Breakpoints
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$breakpoint-xs: 320px; // Small phones
|
||||||
|
$breakpoint-sm: 640px; // Phones
|
||||||
|
$breakpoint-md: 768px; // Tablets
|
||||||
|
$breakpoint-lg: 1024px; // Desktop
|
||||||
|
$breakpoint-xl: 1280px; // Large desktop
|
||||||
|
$breakpoint-2xl: 1536px; // Extra large desktop
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8. Accessibility
|
||||||
|
|
||||||
|
#### Contrast Requirements
|
||||||
|
- **Text on Glass**: Minimum 4.5:1 contrast ratio
|
||||||
|
- **Interactive Elements**: 3:1 contrast ratio
|
||||||
|
- **Focus Indicators**: Visible outline with 3px offset
|
||||||
|
|
||||||
|
#### Focus States
|
||||||
|
```scss
|
||||||
|
*:focus-visible {
|
||||||
|
outline: 2px solid $monaco-red-600;
|
||||||
|
outline-offset: 3px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 9. Performance Optimizations
|
||||||
|
|
||||||
|
#### Blur Performance
|
||||||
|
- Limit backdrop-filter to essential elements
|
||||||
|
- Use will-change sparingly
|
||||||
|
- Prefer transform over position changes
|
||||||
|
- Group glass elements to reduce paint areas
|
||||||
|
|
||||||
|
#### CSS Variables for Dynamic Theming
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--glass-bg: rgba(255, 255, 255, 0.6);
|
||||||
|
--glass-blur: 4px;
|
||||||
|
--glass-border: rgba(0, 0, 0, 0.05);
|
||||||
|
--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 10. Implementation Guidelines
|
||||||
|
|
||||||
|
#### Portal-Specific Styles
|
||||||
|
|
||||||
|
**Admin Portal**
|
||||||
|
- Full glass sidebar with navigation
|
||||||
|
- Complex data tables with glass headers
|
||||||
|
- System monitoring cards
|
||||||
|
- Advanced form controls
|
||||||
|
|
||||||
|
**Board Portal**
|
||||||
|
- Executive dashboard layout
|
||||||
|
- Meeting management cards
|
||||||
|
- Document viewers with glass frames
|
||||||
|
- Governance tools
|
||||||
|
|
||||||
|
**Member Portal**
|
||||||
|
- Simplified navigation
|
||||||
|
- Personal dashboard
|
||||||
|
- Event registration forms
|
||||||
|
- Resource cards
|
||||||
|
|
||||||
|
**Authentication Pages**
|
||||||
|
- Centered glass card layout
|
||||||
|
- Minimal distractions
|
||||||
|
- Clear call-to-action buttons
|
||||||
|
- Subtle branding elements
|
||||||
|
|
||||||
|
### 11. Best Practices
|
||||||
|
|
||||||
|
1. **Consistency**: Use predefined glass classes, don't create variations
|
||||||
|
2. **Performance**: Test blur effects on lower-end devices
|
||||||
|
3. **Accessibility**: Always ensure sufficient contrast
|
||||||
|
4. **Responsiveness**: Test all breakpoints thoroughly
|
||||||
|
5. **Browser Support**: Provide fallbacks for browsers without backdrop-filter
|
||||||
|
|
||||||
|
### 12. Migration Checklist
|
||||||
|
|
||||||
|
When updating existing pages to the Glass Bolt theme:
|
||||||
|
|
||||||
|
- [ ] Replace solid backgrounds with glass effects
|
||||||
|
- [ ] Update color scheme to use Monaco red accents
|
||||||
|
- [ ] Apply consistent border-radius (8-16px)
|
||||||
|
- [ ] Add hover states with lift effect
|
||||||
|
- [ ] Ensure proper spacing (1.5rem standard gap)
|
||||||
|
- [ ] Test backdrop-filter browser support
|
||||||
|
- [ ] Verify contrast ratios meet WCAG standards
|
||||||
|
- [ ] Update button styles to glass variants
|
||||||
|
- [ ] Apply glass effect to navigation elements
|
||||||
|
- [ ] Test responsive behavior on all breakpoints
|
||||||
|
|
||||||
|
## Version History
|
||||||
|
|
||||||
|
- **v2.0.0** (Current) - Glass Bolt Theme
|
||||||
|
- Subtle glassmorphism inspired by bolt.ai
|
||||||
|
- Improved performance with minimal blur
|
||||||
|
- Enhanced accessibility with better contrast
|
||||||
|
- Consistent design language across all portals
|
||||||
|
|
||||||
|
- **v1.0.0** - Original design system
|
||||||
|
- Basic Material Design implementation
|
||||||
|
- Monaco red color scheme
|
||||||
|
- Standard component library
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,406 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="auth-page">
|
|
||||||
<div class="auth-container auth-container--small">
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: 20 }"
|
|
||||||
:enter="{ opacity: 1, y: 0 }"
|
|
||||||
class="auth-content"
|
|
||||||
>
|
|
||||||
<!-- Logo -->
|
|
||||||
<div class="auth-logo">
|
|
||||||
<img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
|
|
||||||
<h1>MonacoUSA Portal</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 1: Request Reset -->
|
|
||||||
<div v-if="!emailSent" class="reset-step">
|
|
||||||
<div class="auth-header">
|
|
||||||
<Icon name="lock" class="auth-header__icon" />
|
|
||||||
<h2>Forgot Your Password?</h2>
|
|
||||||
<p>No worries! Enter your email and we'll send you reset instructions.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="auth-form" @submit.prevent="handleResetRequest">
|
|
||||||
<FloatingInput
|
|
||||||
v-model="email"
|
|
||||||
label="Email Address"
|
|
||||||
type="email"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="mail"
|
|
||||||
helperText="Enter the email associated with your account"
|
|
||||||
:error="error"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
type="submit"
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
:loading="loading"
|
|
||||||
>
|
|
||||||
Send Reset Instructions
|
|
||||||
</MonacoButton>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
variant="ghost"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
@click="goBack"
|
|
||||||
>
|
|
||||||
Back to Login
|
|
||||||
</MonacoButton>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 2: Email Sent Confirmation -->
|
|
||||||
<div v-else class="success-step">
|
|
||||||
<div class="success-icon">
|
|
||||||
<Icon name="mail" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="auth-header">
|
|
||||||
<h2>Check Your Email</h2>
|
|
||||||
<p>We've sent password reset instructions to:</p>
|
|
||||||
<p class="email-display">{{ email }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="instructions">
|
|
||||||
<h3>What's next?</h3>
|
|
||||||
<ol>
|
|
||||||
<li>Check your email inbox (and spam folder)</li>
|
|
||||||
<li>Click the reset link in the email</li>
|
|
||||||
<li>Create your new password</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="resend-section">
|
|
||||||
<p>Didn't receive the email?</p>
|
|
||||||
<button
|
|
||||||
class="resend-button"
|
|
||||||
@click="handleResend"
|
|
||||||
:disabled="resendCooldown > 0"
|
|
||||||
>
|
|
||||||
{{ resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend Email' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
@click="goBack"
|
|
||||||
>
|
|
||||||
Return to Login
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onUnmounted } from 'vue'
|
|
||||||
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
|
||||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
||||||
import Icon from '~/components/ui/Icon.vue'
|
|
||||||
|
|
||||||
const email = ref('')
|
|
||||||
const error = ref('')
|
|
||||||
const loading = ref(false)
|
|
||||||
const emailSent = ref(false)
|
|
||||||
const resendCooldown = ref(0)
|
|
||||||
let cooldownInterval: number | null = null
|
|
||||||
|
|
||||||
const handleResetRequest = async () => {
|
|
||||||
error.value = ''
|
|
||||||
loading.value = true
|
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false
|
|
||||||
emailSent.value = true
|
|
||||||
startResendCooldown()
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleResend = () => {
|
|
||||||
if (resendCooldown.value > 0) return
|
|
||||||
|
|
||||||
// Simulate resending email
|
|
||||||
console.log('Resending to:', email.value)
|
|
||||||
startResendCooldown()
|
|
||||||
}
|
|
||||||
|
|
||||||
const startResendCooldown = () => {
|
|
||||||
resendCooldown.value = 60
|
|
||||||
|
|
||||||
if (cooldownInterval) {
|
|
||||||
clearInterval(cooldownInterval)
|
|
||||||
}
|
|
||||||
|
|
||||||
cooldownInterval = setInterval(() => {
|
|
||||||
resendCooldown.value--
|
|
||||||
if (resendCooldown.value <= 0 && cooldownInterval) {
|
|
||||||
clearInterval(cooldownInterval)
|
|
||||||
cooldownInterval = null
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
const goBack = () => {
|
|
||||||
window.location.href = '/auth/login'
|
|
||||||
}
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (cooldownInterval) {
|
|
||||||
clearInterval(cooldownInterval)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.auth-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
||||||
padding: 2rem;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// Background decoration
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(135deg,
|
|
||||||
rgba(220, 38, 38, 0.05) 0%,
|
|
||||||
rgba(220, 38, 38, 0.02) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
top: -250px;
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
bottom: -200px;
|
|
||||||
right: -200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-container {
|
|
||||||
position: relative;
|
|
||||||
max-width: 500px;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&--small {
|
|
||||||
max-width: 450px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-content {
|
|
||||||
padding: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
background: linear-gradient(135deg,
|
|
||||||
rgba(220, 38, 38, 0.1) 0%,
|
|
||||||
rgba(220, 38, 38, 0.05) 100%);
|
|
||||||
border-radius: 16px;
|
|
||||||
color: #dc2626;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 0.75rem;
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #6b7280;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-step {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
||||||
border-radius: 50%;
|
|
||||||
color: white;
|
|
||||||
animation: successPulse 2s ease-in-out infinite;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes successPulse {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-display {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.instructions {
|
|
||||||
margin: 2rem 0;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: rgba(107, 114, 128, 0.05);
|
|
||||||
border-radius: 12px;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resend-section {
|
|
||||||
margin: 2rem 0;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: linear-gradient(135deg,
|
|
||||||
rgba(220, 38, 38, 0.03) 0%,
|
|
||||||
rgba(220, 38, 38, 0.01) 100%);
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 0.75rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resend-button {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
background: none;
|
|
||||||
border: 2px solid #dc2626;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #dc2626;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.auth-content {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-logo {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,466 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="auth-page">
|
|
||||||
<div class="auth-container">
|
|
||||||
<!-- Left Panel - Form -->
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: -50 }"
|
|
||||||
:enter="{ opacity: 1, x: 0 }"
|
|
||||||
class="auth-panel auth-panel--form"
|
|
||||||
>
|
|
||||||
<div class="auth-logo">
|
|
||||||
<img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
|
|
||||||
<h1>MonacoUSA Portal</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="auth-header">
|
|
||||||
<h2>Welcome Back</h2>
|
|
||||||
<p>Sign in to access your Monaco community</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="auth-form" @submit.prevent="handleLogin">
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.email"
|
|
||||||
label="Email Address"
|
|
||||||
type="email"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="mail"
|
|
||||||
:error="errors.email"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.password"
|
|
||||||
label="Password"
|
|
||||||
type="password"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="lock"
|
|
||||||
:error="errors.password"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="auth-options">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" v-model="form.remember" />
|
|
||||||
<span>Remember me</span>
|
|
||||||
</label>
|
|
||||||
<a href="/auth/forgot-password" class="link">Forgot password?</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
type="submit"
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
:loading="loading"
|
|
||||||
>
|
|
||||||
Sign In
|
|
||||||
</MonacoButton>
|
|
||||||
|
|
||||||
<div class="auth-divider">
|
|
||||||
<span>or continue with</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="social-buttons">
|
|
||||||
<button type="button" class="social-button">
|
|
||||||
<Icon name="globe" />
|
|
||||||
<span>Google</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="social-button">
|
|
||||||
<Icon name="briefcase" />
|
|
||||||
<span>LinkedIn</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="auth-footer">
|
|
||||||
<p>Don't have an account? <a href="/auth/signup" class="link">Sign up</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Panel - Visual -->
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: 50 }"
|
|
||||||
:enter="{ opacity: 1, x: 0, transition: { delay: 200 } }"
|
|
||||||
class="auth-panel auth-panel--visual"
|
|
||||||
>
|
|
||||||
<div class="visual-content">
|
|
||||||
<div class="visual-gradient"></div>
|
|
||||||
<div class="visual-pattern"></div>
|
|
||||||
|
|
||||||
<div class="visual-text">
|
|
||||||
<h3>Connect with Monaco's Elite Business Community</h3>
|
|
||||||
<p>Join exclusive events, network with leaders, and grow your business in the heart of luxury and innovation.</p>
|
|
||||||
|
|
||||||
<div class="stats">
|
|
||||||
<div class="stat">
|
|
||||||
<span class="stat__value">500+</span>
|
|
||||||
<span class="stat__label">Members</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<span class="stat__value">50+</span>
|
|
||||||
<span class="stat__label">Events/Year</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<span class="stat__value">25+</span>
|
|
||||||
<span class="stat__label">Countries</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="visual-decoration">
|
|
||||||
<div class="decoration-circle decoration-circle--1"></div>
|
|
||||||
<div class="decoration-circle decoration-circle--2"></div>
|
|
||||||
<div class="decoration-circle decoration-circle--3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
|
||||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
||||||
import Icon from '~/components/ui/Icon.vue'
|
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
remember: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const errors = ref({
|
|
||||||
email: '',
|
|
||||||
password: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
const handleLogin = async () => {
|
|
||||||
loading.value = true
|
|
||||||
errors.value = { email: '', password: '' }
|
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = false
|
|
||||||
console.log('Login with:', form.value)
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.auth-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
max-width: 1200px;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 700px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-panel {
|
|
||||||
padding: 3rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&--form {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--visual {
|
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-options {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
accent-color: #dc2626;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #dc2626;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-divider {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
margin: 1rem 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 1rem;
|
|
||||||
background: white;
|
|
||||||
color: #a3a3a3;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
height: 1px;
|
|
||||||
background: #e5e5e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-buttons {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: white;
|
|
||||||
border: 2px solid #e5e5e5;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #27272a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-color: #dc2626;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer {
|
|
||||||
margin-top: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-content {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-gradient {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(255, 255, 255, 0.1) 0%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-pattern {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
opacity: 0.1;
|
|
||||||
background-image: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
transparent,
|
|
||||||
transparent 35px,
|
|
||||||
rgba(255, 255, 255, 0.1) 35px,
|
|
||||||
rgba(255, 255, 255, 0.1) 70px
|
|
||||||
);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-text {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 3rem;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
opacity: 0.95;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.visual-decoration {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.decoration-circle {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
|
|
||||||
&--1 {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
top: -150px;
|
|
||||||
right: -150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--2 {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
bottom: -100px;
|
|
||||||
left: -100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--3 {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
top: 50%;
|
|
||||||
right: 10%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.auth-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-panel--visual {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.auth-panel {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-buttons {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,747 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="auth-page">
|
|
||||||
<div class="auth-container auth-container--wide">
|
|
||||||
<!-- Progress Bar -->
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div
|
|
||||||
class="progress-bar__fill"
|
|
||||||
:style="{ width: `${(step / 3) * 100}%` }"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 1: Account Info -->
|
|
||||||
<div
|
|
||||||
v-if="step === 1"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: 50 }"
|
|
||||||
:enter="{ opacity: 1, x: 0 }"
|
|
||||||
class="signup-step"
|
|
||||||
>
|
|
||||||
<div class="auth-logo">
|
|
||||||
<img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
|
|
||||||
<h1>MonacoUSA Portal</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="auth-header">
|
|
||||||
<h2>Create Your Account</h2>
|
|
||||||
<p>Join Monaco's premier business community</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="auth-form" @submit.prevent="nextStep">
|
|
||||||
<div class="form-row">
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.firstName"
|
|
||||||
label="First Name"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="user"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.lastName"
|
|
||||||
label="Last Name"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="user"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.email"
|
|
||||||
label="Email Address"
|
|
||||||
type="email"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="mail"
|
|
||||||
helperText="We'll use this for account notifications"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.password"
|
|
||||||
label="Password"
|
|
||||||
type="password"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="lock"
|
|
||||||
helperText="Minimum 8 characters with uppercase and number"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.confirmPassword"
|
|
||||||
label="Confirm Password"
|
|
||||||
type="password"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="lock"
|
|
||||||
:error="passwordError"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="password-strength">
|
|
||||||
<span class="password-strength__label">Password Strength:</span>
|
|
||||||
<div class="password-strength__bars">
|
|
||||||
<span
|
|
||||||
v-for="i in 4"
|
|
||||||
:key="i"
|
|
||||||
class="password-strength__bar"
|
|
||||||
:class="{ 'password-strength__bar--filled': i <= passwordStrength }"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<span class="password-strength__text">{{ passwordStrengthText }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
type="submit"
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
>
|
|
||||||
Continue to Profile
|
|
||||||
</MonacoButton>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="auth-footer">
|
|
||||||
<p>Already have an account? <a href="/auth/login" class="link">Sign in</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 2: Profile Info -->
|
|
||||||
<div
|
|
||||||
v-if="step === 2"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: 50 }"
|
|
||||||
:enter="{ opacity: 1, x: 0 }"
|
|
||||||
class="signup-step"
|
|
||||||
>
|
|
||||||
<div class="step-header">
|
|
||||||
<button @click="previousStep" class="back-button">
|
|
||||||
<Icon name="arrow-left" />
|
|
||||||
Back
|
|
||||||
</button>
|
|
||||||
<h2>Professional Information</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="auth-form" @submit.prevent="nextStep">
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.company"
|
|
||||||
label="Company Name"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="building"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.title"
|
|
||||||
label="Job Title"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="briefcase"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.phone"
|
|
||||||
label="Phone Number"
|
|
||||||
type="tel"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="phone"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<FloatingInput
|
|
||||||
v-model="form.linkedin"
|
|
||||||
label="LinkedIn Profile"
|
|
||||||
variant="glass"
|
|
||||||
leftIcon="link"
|
|
||||||
helperText="Optional"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Industry</label>
|
|
||||||
<select v-model="form.industry" class="form-select">
|
|
||||||
<option value="">Select your industry</option>
|
|
||||||
<option value="finance">Finance & Banking</option>
|
|
||||||
<option value="tech">Technology</option>
|
|
||||||
<option value="realestate">Real Estate</option>
|
|
||||||
<option value="hospitality">Hospitality</option>
|
|
||||||
<option value="retail">Retail & Luxury</option>
|
|
||||||
<option value="consulting">Consulting</option>
|
|
||||||
<option value="legal">Legal Services</option>
|
|
||||||
<option value="other">Other</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Bio</label>
|
|
||||||
<textarea
|
|
||||||
v-model="form.bio"
|
|
||||||
class="form-textarea"
|
|
||||||
placeholder="Tell us about yourself and your business interests..."
|
|
||||||
rows="4"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
type="submit"
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
>
|
|
||||||
Continue to Membership
|
|
||||||
</MonacoButton>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 3: Membership -->
|
|
||||||
<div
|
|
||||||
v-if="step === 3"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: 50 }"
|
|
||||||
:enter="{ opacity: 1, x: 0 }"
|
|
||||||
class="signup-step"
|
|
||||||
>
|
|
||||||
<div class="step-header">
|
|
||||||
<button @click="previousStep" class="back-button">
|
|
||||||
<Icon name="arrow-left" />
|
|
||||||
Back
|
|
||||||
</button>
|
|
||||||
<h2>Choose Your Membership</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="membership-plans">
|
|
||||||
<div
|
|
||||||
v-for="plan in membershipPlans"
|
|
||||||
:key="plan.id"
|
|
||||||
class="plan-card"
|
|
||||||
:class="{ 'plan-card--selected': form.membershipPlan === plan.id }"
|
|
||||||
@click="form.membershipPlan = plan.id"
|
|
||||||
>
|
|
||||||
<div class="plan-card__header">
|
|
||||||
<h3 class="plan-card__name">{{ plan.name }}</h3>
|
|
||||||
<span class="plan-card__price">${{ plan.price }}/year</span>
|
|
||||||
</div>
|
|
||||||
<ul class="plan-card__features">
|
|
||||||
<li v-for="feature in plan.features" :key="feature">
|
|
||||||
<Icon name="check" />
|
|
||||||
{{ feature }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<span v-if="plan.popular" class="plan-card__badge">Most Popular</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="terms-section">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" v-model="form.agreeTerms" />
|
|
||||||
<span>
|
|
||||||
I agree to the <a href="/terms" class="link">Terms of Service</a>
|
|
||||||
and <a href="/privacy" class="link">Privacy Policy</a>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" v-model="form.agreeNewsletter" />
|
|
||||||
<span>Send me updates about events and opportunities</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MonacoButton
|
|
||||||
variant="primary"
|
|
||||||
size="lg"
|
|
||||||
block
|
|
||||||
:disabled="!form.agreeTerms || !form.membershipPlan"
|
|
||||||
@click="handleSignup"
|
|
||||||
>
|
|
||||||
Complete Registration
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Success State -->
|
|
||||||
<div
|
|
||||||
v-if="step === 4"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, scale: 0.9 }"
|
|
||||||
:enter="{ opacity: 1, scale: 1 }"
|
|
||||||
class="success-state"
|
|
||||||
>
|
|
||||||
<div class="success-icon">🎉</div>
|
|
||||||
<h2>Welcome to MonacoUSA!</h2>
|
|
||||||
<p>Your account has been created successfully.</p>
|
|
||||||
<p>Please check your email to verify your account.</p>
|
|
||||||
<MonacoButton variant="primary" size="lg" @click="goToLogin">
|
|
||||||
Go to Login
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
|
||||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
||||||
import Icon from '~/components/ui/Icon.vue'
|
|
||||||
|
|
||||||
const step = ref(1)
|
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
// Step 1
|
|
||||||
firstName: '',
|
|
||||||
lastName: '',
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
confirmPassword: '',
|
|
||||||
// Step 2
|
|
||||||
company: '',
|
|
||||||
title: '',
|
|
||||||
phone: '',
|
|
||||||
linkedin: '',
|
|
||||||
industry: '',
|
|
||||||
bio: '',
|
|
||||||
// Step 3
|
|
||||||
membershipPlan: '',
|
|
||||||
agreeTerms: false,
|
|
||||||
agreeNewsletter: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const membershipPlans = [
|
|
||||||
{
|
|
||||||
id: 'basic',
|
|
||||||
name: 'Basic',
|
|
||||||
price: 250,
|
|
||||||
features: [
|
|
||||||
'Access to member directory',
|
|
||||||
'Monthly newsletter',
|
|
||||||
'Event invitations',
|
|
||||||
'Basic networking features'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'professional',
|
|
||||||
name: 'Professional',
|
|
||||||
price: 500,
|
|
||||||
popular: true,
|
|
||||||
features: [
|
|
||||||
'Everything in Basic',
|
|
||||||
'Priority event registration',
|
|
||||||
'Enhanced profile features',
|
|
||||||
'Business matchmaking',
|
|
||||||
'Quarterly exclusive events'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'executive',
|
|
||||||
name: 'Executive',
|
|
||||||
price: 1000,
|
|
||||||
features: [
|
|
||||||
'Everything in Professional',
|
|
||||||
'VIP event access',
|
|
||||||
'Personal concierge service',
|
|
||||||
'Board meeting participation',
|
|
||||||
'Guest passes (5/year)',
|
|
||||||
'Premium networking tools'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const passwordError = computed(() => {
|
|
||||||
if (form.value.confirmPassword && form.value.password !== form.value.confirmPassword) {
|
|
||||||
return 'Passwords do not match'
|
|
||||||
}
|
|
||||||
return ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const passwordStrength = computed(() => {
|
|
||||||
const password = form.value.password
|
|
||||||
if (!password) return 0
|
|
||||||
|
|
||||||
let strength = 0
|
|
||||||
if (password.length >= 8) strength++
|
|
||||||
if (/[A-Z]/.test(password)) strength++
|
|
||||||
if (/[0-9]/.test(password)) strength++
|
|
||||||
if (/[^A-Za-z0-9]/.test(password)) strength++
|
|
||||||
|
|
||||||
return strength
|
|
||||||
})
|
|
||||||
|
|
||||||
const passwordStrengthText = computed(() => {
|
|
||||||
const texts = ['', 'Weak', 'Fair', 'Good', 'Strong']
|
|
||||||
return texts[passwordStrength.value]
|
|
||||||
})
|
|
||||||
|
|
||||||
const nextStep = () => {
|
|
||||||
step.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
const previousStep = () => {
|
|
||||||
step.value--
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSignup = () => {
|
|
||||||
console.log('Signup with:', form.value)
|
|
||||||
step.value = 4
|
|
||||||
}
|
|
||||||
|
|
||||||
const goToLogin = () => {
|
|
||||||
window.location.href = '/auth/login'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.auth-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-container {
|
|
||||||
max-width: 500px;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&--wide {
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
|
|
||||||
&__fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.signup-step {
|
|
||||||
padding: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0.5rem 0 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select,
|
|
||||||
.form-textarea {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #27272a;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #dc2626;
|
|
||||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 100px;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-strength {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bars {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bar {
|
|
||||||
height: 4px;
|
|
||||||
flex: 1;
|
|
||||||
background: #e5e5e5;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: background 0.3s;
|
|
||||||
|
|
||||||
&--filled {
|
|
||||||
background: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.membership-plans {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-card {
|
|
||||||
position: relative;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: white;
|
|
||||||
border: 2px solid #e5e5e5;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: #dc2626;
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--selected {
|
|
||||||
border-color: #dc2626;
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__price {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__features {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
color: #10b981;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -0.5rem;
|
|
||||||
right: 1rem;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
||||||
color: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.terms-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
margin-top: 0.125rem;
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
accent-color: #dc2626;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #dc2626;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer {
|
|
||||||
margin-top: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-state {
|
|
||||||
padding: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.success-icon {
|
|
||||||
font-size: 4rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
color: #6b7280;
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.membership-plans {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signup-step {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,886 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="board-dashboard-v2">
|
|
||||||
<!-- Executive Header -->
|
|
||||||
<div class="executive-header">
|
|
||||||
<h1 class="dashboard-title">Executive Dashboard</h1>
|
|
||||||
<p class="dashboard-subtitle">Strategic insights and governance overview</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KPI Cards with Neumorphic Design -->
|
|
||||||
<div class="kpi-grid">
|
|
||||||
<div class="kpi-card neumorphic-card" v-for="kpi in kpis" :key="kpi.id">
|
|
||||||
<div class="kpi-header">
|
|
||||||
<div class="kpi-icon-wrapper neumorphic-inset">
|
|
||||||
<Icon :name="kpi.icon" class="kpi-icon" :style="{ color: kpi.color }" />
|
|
||||||
</div>
|
|
||||||
<div class="kpi-trend" :class="kpi.trendType">
|
|
||||||
<Icon :name="kpi.trendIcon" class="trend-icon" />
|
|
||||||
<span>{{ kpi.trendValue }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="kpi-content">
|
|
||||||
<div class="kpi-value">{{ kpi.value }}</div>
|
|
||||||
<div class="kpi-label">{{ kpi.label }}</div>
|
|
||||||
<div class="kpi-progress">
|
|
||||||
<div class="progress-bar neumorphic-inset">
|
|
||||||
<div class="progress-fill" :style="{ width: kpi.progress + '%', background: kpi.color }"></div>
|
|
||||||
</div>
|
|
||||||
<span class="progress-text">{{ kpi.progress }}% of target</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Strategic Initiatives & Governance -->
|
|
||||||
<div class="governance-grid">
|
|
||||||
<!-- Strategic Initiatives -->
|
|
||||||
<div class="initiative-card neumorphic-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<Icon name="mdi:target" class="header-icon" />
|
|
||||||
<h2>Strategic Initiatives</h2>
|
|
||||||
<div class="morphing-select-wrapper">
|
|
||||||
<button class="select-trigger neumorphic-button small" @click="toggleQuarter">
|
|
||||||
<span>{{ selectedQuarter }}</span>
|
|
||||||
<Icon name="mdi:chevron-down" class="dropdown-icon" :class="{ 'rotate': showQuarter }" />
|
|
||||||
</button>
|
|
||||||
<Transition name="morph">
|
|
||||||
<div v-if="showQuarter" class="morphing-dropdown">
|
|
||||||
<div
|
|
||||||
v-for="quarter in quarters"
|
|
||||||
:key="quarter"
|
|
||||||
class="dropdown-option"
|
|
||||||
@click="selectQuarter(quarter)"
|
|
||||||
>
|
|
||||||
{{ quarter }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="initiatives-list">
|
|
||||||
<div v-for="initiative in strategicInitiatives" :key="initiative.id" class="initiative-item">
|
|
||||||
<div class="initiative-header">
|
|
||||||
<span class="initiative-name">{{ initiative.name }}</span>
|
|
||||||
<span class="initiative-status" :class="initiative.status">{{ initiative.statusText }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="initiative-progress neumorphic-inset">
|
|
||||||
<div class="progress-bar-slim">
|
|
||||||
<div class="progress-fill-slim" :style="{ width: initiative.progress + '%' }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="initiative-meta">
|
|
||||||
<span class="initiative-owner">Owner: {{ initiative.owner }}</span>
|
|
||||||
<span class="initiative-deadline">Due: {{ initiative.deadline }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Committee Overview -->
|
|
||||||
<div class="committee-card neumorphic-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<Icon name="mdi:account-group-outline" class="header-icon" />
|
|
||||||
<h2>Committee Activities</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="committee-grid">
|
|
||||||
<div v-for="committee in committees" :key="committee.id" class="committee-item neumorphic-inset">
|
|
||||||
<div class="committee-header">
|
|
||||||
<Icon :name="committee.icon" class="committee-icon" :style="{ color: committee.color }" />
|
|
||||||
<h3>{{ committee.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<div class="committee-stats">
|
|
||||||
<div class="stat">
|
|
||||||
<span class="stat-value">{{ committee.members }}</span>
|
|
||||||
<span class="stat-label">Members</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<span class="stat-value">{{ committee.meetings }}</span>
|
|
||||||
<span class="stat-label">Meetings</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="neumorphic-button small full-width">View Details</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Financial Overview -->
|
|
||||||
<div class="financial-section neumorphic-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<Icon name="mdi:finance" class="header-icon" />
|
|
||||||
<h2>Financial Overview</h2>
|
|
||||||
<div class="time-selector">
|
|
||||||
<button
|
|
||||||
v-for="period in timePeriods"
|
|
||||||
:key="period"
|
|
||||||
class="time-button neumorphic-button small"
|
|
||||||
:class="{ 'active': selectedPeriod === period }"
|
|
||||||
@click="selectedPeriod = period"
|
|
||||||
>
|
|
||||||
{{ period }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="financial-grid">
|
|
||||||
<div class="revenue-chart">
|
|
||||||
<h3>Revenue Trend</h3>
|
|
||||||
<div class="chart-placeholder neumorphic-inset">
|
|
||||||
<Icon name="mdi:chart-line" class="chart-icon" />
|
|
||||||
<span>Revenue chart visualization</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="financial-metrics">
|
|
||||||
<div v-for="metric in financialMetrics" :key="metric.id" class="metric-item">
|
|
||||||
<div class="metric-label">{{ metric.label }}</div>
|
|
||||||
<div class="metric-value" :class="metric.type">{{ metric.value }}</div>
|
|
||||||
<div class="metric-change">
|
|
||||||
<Icon :name="metric.changeIcon" class="change-icon" />
|
|
||||||
<span>{{ metric.change }} from last period</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Governance Actions -->
|
|
||||||
<div class="governance-actions">
|
|
||||||
<div class="action-card neumorphic-card">
|
|
||||||
<Icon name="mdi:calendar-check" class="action-icon" />
|
|
||||||
<h3>Board Meetings</h3>
|
|
||||||
<p>Schedule and manage board meetings</p>
|
|
||||||
<button class="neumorphic-button primary">Schedule Meeting</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-card neumorphic-card">
|
|
||||||
<Icon name="mdi:file-document-outline" class="action-icon" />
|
|
||||||
<h3>Documents</h3>
|
|
||||||
<p>Access governance documents</p>
|
|
||||||
<button class="neumorphic-button primary">View Documents</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-card neumorphic-card">
|
|
||||||
<Icon name="mdi:vote" class="action-icon" />
|
|
||||||
<h3>Resolutions</h3>
|
|
||||||
<p>Review and vote on resolutions</p>
|
|
||||||
<button class="neumorphic-button primary">View Resolutions</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-card neumorphic-card">
|
|
||||||
<Icon name="mdi:chart-box-outline" class="action-icon" />
|
|
||||||
<h3>Reports</h3>
|
|
||||||
<p>Generate executive reports</p>
|
|
||||||
<button class="neumorphic-button primary">Generate Report</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue'
|
|
||||||
|
|
||||||
// Define page meta
|
|
||||||
definePageMeta({
|
|
||||||
layout: 'board',
|
|
||||||
middleware: 'auth'
|
|
||||||
})
|
|
||||||
|
|
||||||
// KPIs
|
|
||||||
const kpis = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: 'Member Growth',
|
|
||||||
value: '24.8%',
|
|
||||||
icon: 'mdi:account-multiple-plus',
|
|
||||||
color: '#10B981',
|
|
||||||
trendType: 'positive',
|
|
||||||
trendIcon: 'mdi:trending-up',
|
|
||||||
trendValue: '+5.2%',
|
|
||||||
progress: 82
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
label: 'Revenue YTD',
|
|
||||||
value: '$2.4M',
|
|
||||||
icon: 'mdi:cash-multiple',
|
|
||||||
color: '#3B82F6',
|
|
||||||
trendType: 'positive',
|
|
||||||
trendIcon: 'mdi:trending-up',
|
|
||||||
trendValue: '+12.3%',
|
|
||||||
progress: 68
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
label: 'Member Retention',
|
|
||||||
value: '94.5%',
|
|
||||||
icon: 'mdi:account-heart',
|
|
||||||
color: '#CC0000',
|
|
||||||
trendType: 'positive',
|
|
||||||
trendIcon: 'mdi:trending-up',
|
|
||||||
trendValue: '+2.1%',
|
|
||||||
progress: 95
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
label: 'NPS Score',
|
|
||||||
value: '72',
|
|
||||||
icon: 'mdi:emoticon-happy',
|
|
||||||
color: '#F59E0B',
|
|
||||||
trendType: 'neutral',
|
|
||||||
trendIcon: 'mdi:minus',
|
|
||||||
trendValue: '0%',
|
|
||||||
progress: 72
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Strategic Initiatives
|
|
||||||
const strategicInitiatives = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Digital Transformation Initiative',
|
|
||||||
status: 'on-track',
|
|
||||||
statusText: 'On Track',
|
|
||||||
progress: 65,
|
|
||||||
owner: 'John Smith',
|
|
||||||
deadline: 'Q2 2024'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Member Experience Enhancement',
|
|
||||||
status: 'ahead',
|
|
||||||
statusText: 'Ahead',
|
|
||||||
progress: 78,
|
|
||||||
owner: 'Sarah Johnson',
|
|
||||||
deadline: 'Q1 2024'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'International Expansion',
|
|
||||||
status: 'at-risk',
|
|
||||||
statusText: 'At Risk',
|
|
||||||
progress: 42,
|
|
||||||
owner: 'Mike Chen',
|
|
||||||
deadline: 'Q3 2024'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Committees
|
|
||||||
const committees = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Finance',
|
|
||||||
icon: 'mdi:calculator',
|
|
||||||
color: '#3B82F6',
|
|
||||||
members: 7,
|
|
||||||
meetings: 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Governance',
|
|
||||||
icon: 'mdi:gavel',
|
|
||||||
color: '#CC0000',
|
|
||||||
members: 5,
|
|
||||||
meetings: 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Audit',
|
|
||||||
icon: 'mdi:magnify',
|
|
||||||
color: '#F59E0B',
|
|
||||||
members: 4,
|
|
||||||
meetings: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Compensation',
|
|
||||||
icon: 'mdi:cash',
|
|
||||||
color: '#10B981',
|
|
||||||
members: 6,
|
|
||||||
meetings: 6
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Financial Metrics
|
|
||||||
const financialMetrics = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: 'Total Revenue',
|
|
||||||
value: '$2.4M',
|
|
||||||
type: 'positive',
|
|
||||||
changeIcon: 'mdi:arrow-up',
|
|
||||||
change: '+12.3%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
label: 'Operating Expenses',
|
|
||||||
value: '$1.8M',
|
|
||||||
type: 'neutral',
|
|
||||||
changeIcon: 'mdi:arrow-up',
|
|
||||||
change: '+8.1%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
label: 'Net Profit',
|
|
||||||
value: '$620K',
|
|
||||||
type: 'positive',
|
|
||||||
changeIcon: 'mdi:arrow-up',
|
|
||||||
change: '+24.5%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
label: 'Cash Flow',
|
|
||||||
value: '$450K',
|
|
||||||
type: 'positive',
|
|
||||||
changeIcon: 'mdi:arrow-up',
|
|
||||||
change: '+15.2%'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Dropdown states
|
|
||||||
const showQuarter = ref(false)
|
|
||||||
const selectedQuarter = ref('Q4 2023')
|
|
||||||
const quarters = ref(['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024'])
|
|
||||||
|
|
||||||
// Time period selector
|
|
||||||
const selectedPeriod = ref('YTD')
|
|
||||||
const timePeriods = ref(['MTD', 'QTD', 'YTD'])
|
|
||||||
|
|
||||||
// Methods
|
|
||||||
const toggleQuarter = () => {
|
|
||||||
showQuarter.value = !showQuarter.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectQuarter = (quarter) => {
|
|
||||||
selectedQuarter.value = quarter
|
|
||||||
showQuarter.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// Close dropdown when clicking outside
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.closest('.morphing-select-wrapper')) {
|
|
||||||
showQuarter.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/design-system-v2.scss';
|
|
||||||
|
|
||||||
.board-dashboard-v2 {
|
|
||||||
padding: 2rem;
|
|
||||||
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Executive Header
|
|
||||||
.executive-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
|
|
||||||
.dashboard-title {
|
|
||||||
font-size: $text-4xl;
|
|
||||||
font-weight: $font-bold;
|
|
||||||
background: linear-gradient(135deg, $primary-600, $primary-800);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-subtitle {
|
|
||||||
color: $neutral-600;
|
|
||||||
font-size: $text-lg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// KPI Grid
|
|
||||||
.kpi-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-card {
|
|
||||||
@include neumorphic-card('md');
|
|
||||||
padding: 1.5rem;
|
|
||||||
|
|
||||||
.kpi-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-icon-wrapper {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: $shadow-inset-sm;
|
|
||||||
|
|
||||||
.kpi-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-trend {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
font-size: $text-sm;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
|
|
||||||
&.positive { color: $success-500; }
|
|
||||||
&.negative { color: $error-500; }
|
|
||||||
&.neutral { color: $neutral-600; }
|
|
||||||
|
|
||||||
.trend-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-value {
|
|
||||||
font-size: $text-3xl;
|
|
||||||
font-weight: $font-bold;
|
|
||||||
color: $neutral-800;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-label {
|
|
||||||
color: $neutral-600;
|
|
||||||
font-size: $text-sm;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kpi-progress {
|
|
||||||
.progress-bar {
|
|
||||||
height: 8px;
|
|
||||||
border-radius: $radius-full;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: $radius-full;
|
|
||||||
transition: width 0.5s $spring-smooth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
font-size: $text-xs;
|
|
||||||
color: $neutral-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Governance Grid
|
|
||||||
.governance-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-lg) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-card,
|
|
||||||
.committee-card {
|
|
||||||
@include neumorphic-card('md');
|
|
||||||
padding: 2rem;
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.header-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
color: $primary-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: $text-xl;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
color: $neutral-800;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Strategic Initiatives
|
|
||||||
.initiatives-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-item {
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
background: $neutral-50;
|
|
||||||
|
|
||||||
.initiative-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-name {
|
|
||||||
font-weight: $font-medium;
|
|
||||||
color: $neutral-800;
|
|
||||||
font-size: $text-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-status {
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
border-radius: $radius-full;
|
|
||||||
font-size: $text-xs;
|
|
||||||
font-weight: $font-medium;
|
|
||||||
|
|
||||||
&.on-track {
|
|
||||||
background: rgba($success-500, 0.1);
|
|
||||||
color: $success-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ahead {
|
|
||||||
background: rgba($blue-500, 0.1);
|
|
||||||
color: $blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.at-risk {
|
|
||||||
background: rgba($warning-500, 0.1);
|
|
||||||
color: $warning-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-progress {
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
padding: 0.25rem;
|
|
||||||
border-radius: $radius-full;
|
|
||||||
|
|
||||||
.progress-bar-slim {
|
|
||||||
height: 4px;
|
|
||||||
border-radius: $radius-full;
|
|
||||||
background: rgba($neutral-300, 0.3);
|
|
||||||
|
|
||||||
.progress-fill-slim {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(135deg, $primary-600, $primary-700);
|
|
||||||
border-radius: $radius-full;
|
|
||||||
transition: width 0.5s $spring-smooth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.initiative-meta {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: $text-xs;
|
|
||||||
color: $neutral-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Committee Grid
|
|
||||||
.committee-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.committee-item {
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
|
|
||||||
.committee-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
.committee-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: $text-sm;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
color: $neutral-800;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.committee-stats {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
.stat {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
display: block;
|
|
||||||
font-size: $text-xl;
|
|
||||||
font-weight: $font-bold;
|
|
||||||
color: $neutral-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: $text-xs;
|
|
||||||
color: $neutral-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Financial Section
|
|
||||||
.financial-section {
|
|
||||||
@include neumorphic-card('lg');
|
|
||||||
padding: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
.time-selector {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
.time-button {
|
|
||||||
&.active {
|
|
||||||
background: linear-gradient(145deg, $primary-600, $primary-700);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.financial-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint-md) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.revenue-chart {
|
|
||||||
h3 {
|
|
||||||
font-size: $text-lg;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: $neutral-800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-placeholder {
|
|
||||||
height: 200px;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: $neutral-500;
|
|
||||||
|
|
||||||
.chart-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.financial-metrics {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-item {
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
.metric-label {
|
|
||||||
font-size: $text-xs;
|
|
||||||
color: $neutral-600;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-value {
|
|
||||||
font-size: $text-xl;
|
|
||||||
font-weight: $font-bold;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
|
|
||||||
&.positive { color: $success-500; }
|
|
||||||
&.negative { color: $error-500; }
|
|
||||||
&.neutral { color: $neutral-800; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-change {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
font-size: $text-xs;
|
|
||||||
color: $neutral-600;
|
|
||||||
|
|
||||||
.change-icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Governance Actions
|
|
||||||
.governance-actions {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-card {
|
|
||||||
@include neumorphic-card('md');
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
transition: all $transition-base;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include neumorphic-card('lg');
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
color: $primary-600;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: $text-lg;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
color: $neutral-800;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $neutral-600;
|
|
||||||
font-size: $text-sm;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Morphing Dropdown
|
|
||||||
.morphing-select-wrapper {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.select-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
.dropdown-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
transition: transform 0.3s $spring-smooth;
|
|
||||||
|
|
||||||
&.rotate {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.morphing-dropdown {
|
|
||||||
@include morphing-dropdown();
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 8px);
|
|
||||||
right: 0;
|
|
||||||
min-width: 150px;
|
|
||||||
z-index: $z-dropdown;
|
|
||||||
|
|
||||||
.dropdown-option {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all $transition-fast;
|
|
||||||
color: $neutral-700;
|
|
||||||
font-size: $text-sm;
|
|
||||||
|
|
||||||
&: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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.neumorphic-inset {
|
|
||||||
box-shadow: $shadow-inset-sm;
|
|
||||||
background: linear-gradient(145deg, #e6e6e6, #ffffff);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,804 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="glass-dashboard">
|
|
||||||
<!-- Ultra-Modern Hero Header -->
|
|
||||||
<div class="hero-header">
|
|
||||||
<!-- Animated background -->
|
|
||||||
<div class="hero-gradient"></div>
|
|
||||||
<div class="hero-overlay"></div>
|
|
||||||
|
|
||||||
<!-- Floating elements -->
|
|
||||||
<div class="floating-orb orb-1"></div>
|
|
||||||
<div class="floating-orb orb-2"></div>
|
|
||||||
<div class="floating-orb orb-3"></div>
|
|
||||||
|
|
||||||
<!-- Mesh gradient overlay -->
|
|
||||||
<div class="mesh-overlay"></div>
|
|
||||||
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-inner">
|
|
||||||
<!-- User Info -->
|
|
||||||
<div class="user-section">
|
|
||||||
<div class="avatar-wrapper">
|
|
||||||
<!-- Avatar glow -->
|
|
||||||
<div class="avatar-glow"></div>
|
|
||||||
|
|
||||||
<div class="avatar-container">
|
|
||||||
<div class="avatar">
|
|
||||||
<span class="avatar-text">JD</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Status indicator -->
|
|
||||||
<div class="status-indicator">
|
|
||||||
<div class="status-dot"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Crown icon -->
|
|
||||||
<div class="crown-badge">
|
|
||||||
👑
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="user-info">
|
|
||||||
<h1 class="welcome-title">
|
|
||||||
Welcome back,
|
|
||||||
<span class="name-gradient">Board Member!</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class="user-meta">
|
|
||||||
<div class="role-badge">
|
|
||||||
<span class="sparkle">✨</span>
|
|
||||||
<span class="role-text">Administrator</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<span class="org-name">MonacoUSA Association</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Date & Quick Actions -->
|
|
||||||
<div class="actions-section">
|
|
||||||
<!-- Date Card -->
|
|
||||||
<div class="date-card">
|
|
||||||
<div class="date-header">
|
|
||||||
<span class="calendar-icon">📅</span>
|
|
||||||
<p class="date-label">Today</p>
|
|
||||||
</div>
|
|
||||||
<p class="date-text">
|
|
||||||
{{ currentDate }}
|
|
||||||
</p>
|
|
||||||
<div class="date-progress">
|
|
||||||
<div class="progress-fill"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<div class="quick-actions">
|
|
||||||
<button class="action-btn action-alerts">
|
|
||||||
<span class="action-icon">🔔</span>
|
|
||||||
<span class="action-text">Alerts</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="action-btn action-primary">
|
|
||||||
<span class="action-icon">✨</span>
|
|
||||||
<span class="action-text">Quick Add</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Decorative line -->
|
|
||||||
<div class="hero-divider"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Statistics Grid -->
|
|
||||||
<div class="stats-section">
|
|
||||||
<div class="stats-grid">
|
|
||||||
<div v-for="stat in stats" :key="stat.label" class="stat-card">
|
|
||||||
<div class="stat-icon">{{ stat.icon }}</div>
|
|
||||||
<div class="stat-content">
|
|
||||||
<p class="stat-label">{{ stat.label }}</p>
|
|
||||||
<p class="stat-value">
|
|
||||||
{{ stat.prefix }}{{ stat.value.toLocaleString() }}{{ stat.suffix }}
|
|
||||||
</p>
|
|
||||||
<p v-if="stat.change" class="stat-change">
|
|
||||||
{{ stat.change }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dues Management Section -->
|
|
||||||
<div class="dues-section">
|
|
||||||
<h2 class="section-title">Member Dues Overview</h2>
|
|
||||||
|
|
||||||
<div class="dues-grid">
|
|
||||||
<div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-avatar">
|
|
||||||
<span>{{ member.initials }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="member-details">
|
|
||||||
<h3 class="member-name">{{ member.name }}</h3>
|
|
||||||
<p class="member-id">Member #{{ member.id }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dues-info">
|
|
||||||
<span class="dues-label">Amount Due</span>
|
|
||||||
<span class="dues-amount">${{ member.dueAmount }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="btn-pay">
|
|
||||||
Mark Paid
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="view-all-container">
|
|
||||||
<button class="btn-view-all">
|
|
||||||
View All Members →
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
layout: 'board',
|
|
||||||
middleware: 'board-auth'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
// Current date
|
|
||||||
const currentDate = computed(() => {
|
|
||||||
return new Date().toLocaleDateString('en-US', {
|
|
||||||
weekday: 'long',
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// Statistics data
|
|
||||||
const stats = ref([
|
|
||||||
{
|
|
||||||
icon: '👥',
|
|
||||||
label: 'TOTAL MEMBERS',
|
|
||||||
value: 1234,
|
|
||||||
change: '+12%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '💰',
|
|
||||||
label: 'DUES COLLECTED',
|
|
||||||
value: 45678,
|
|
||||||
prefix: '$',
|
|
||||||
change: '+8%',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '📅',
|
|
||||||
label: 'UPCOMING EVENTS',
|
|
||||||
value: 5,
|
|
||||||
change: '2 this week',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '📈',
|
|
||||||
label: 'GROWTH RATE',
|
|
||||||
value: 23,
|
|
||||||
suffix: '%',
|
|
||||||
change: '+3%',
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Sample dues members data
|
|
||||||
const visibleDuesMembers = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'John Smith',
|
|
||||||
initials: 'JS',
|
|
||||||
dueAmount: 250,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Marie Dubois',
|
|
||||||
initials: 'MD',
|
|
||||||
dueAmount: 250,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Alessandro Rossi',
|
|
||||||
initials: 'AR',
|
|
||||||
dueAmount: 250,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Emma Wilson',
|
|
||||||
initials: 'EW',
|
|
||||||
dueAmount: 250,
|
|
||||||
}
|
|
||||||
])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* Simplified Animations */
|
|
||||||
@keyframes fade-in {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-up {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in {
|
|
||||||
from { opacity: 0; transform: translateX(-20px); }
|
|
||||||
to { opacity: 1; transform: translateX(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Base Styles */
|
|
||||||
.glass-dashboard {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero Header */
|
|
||||||
.hero-header {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-gradient {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating Orbs */
|
|
||||||
.floating-orb {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.3;
|
|
||||||
filter: blur(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.orb-1 {
|
|
||||||
top: 40px;
|
|
||||||
right: 80px;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.orb-2 {
|
|
||||||
bottom: 40px;
|
|
||||||
left: 80px;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
background: rgba(220, 38, 38, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.orb-3 {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
background: rgba(220, 38, 38, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mesh-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
opacity: 0.2;
|
|
||||||
background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
|
|
||||||
mix-blend-mode: overlay;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
position: relative;
|
|
||||||
padding: 3rem;
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-inner {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.hero-inner {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* User Section */
|
|
||||||
.user-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
animation: fade-in 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
group: true;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-glow {
|
|
||||||
position: absolute;
|
|
||||||
inset: -4px;
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-wrapper:hover .avatar-glow {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background: linear-gradient(135deg, #ffffff, #f8f9fa);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow:
|
|
||||||
0 0 0 4px rgba(255,255,255,0.4),
|
|
||||||
0 10px 40px rgba(0,0,0,0.2);
|
|
||||||
border: 2px solid rgba(255,255,255,0.2);
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-text {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -8px;
|
|
||||||
right: -8px;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
background: linear-gradient(135deg, #10b981, #059669);
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 4px solid white;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: pulse-slow 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crown-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -12px;
|
|
||||||
right: -4px;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
||||||
animation: bounce-slow 3s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* User Info */
|
|
||||||
.user-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-gradient {
|
|
||||||
display: block;
|
|
||||||
color: #dc2626;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.role-badge {
|
|
||||||
background: rgba(255,255,255,0.6);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
border-radius: 9999px;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sparkle {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.role-text {
|
|
||||||
color: #27272a;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1.5rem;
|
|
||||||
width: 1px;
|
|
||||||
background: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.org-name {
|
|
||||||
color: #6b7280;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Actions Section */
|
|
||||||
.actions-section {
|
|
||||||
animation: fade-in 0.3s ease-out;
|
|
||||||
animation-delay: 100ms;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-card {
|
|
||||||
background: rgba(255,255,255,0.6);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
||||||
transition: all 0.3s;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-card:hover {
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-label {
|
|
||||||
color: #6b7280;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-text {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-progress {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
border-radius: 9999px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
width: 75%;
|
|
||||||
background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
|
|
||||||
border-radius: 9999px;
|
|
||||||
animation: pulse-slow 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
flex: 1;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
transition: all 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-alerts {
|
|
||||||
background: rgba(255,255,255,0.6);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
color: #27272a;
|
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-alerts:hover {
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-primary {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-primary:hover {
|
|
||||||
background: #b91c1c;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-divider {
|
|
||||||
margin-top: 2rem;
|
|
||||||
height: 1px;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stats Section */
|
|
||||||
.stats-section {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
||||||
border: 1px solid rgba(220, 38, 38, 0.1);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #6b7280;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
font-weight: 900;
|
|
||||||
color: #1f2937;
|
|
||||||
line-height: 1;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-change {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #10b981;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dues Section */
|
|
||||||
.dues-section {
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1f2937;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-card {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
background: linear-gradient(135deg, #e5e7eb, #d1d5db);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-details {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-name {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f2937;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-id {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: #f9fafb;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dues-amount {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-pay {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
color: #dc2626;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-pay:hover {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-all-container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view-all {
|
|
||||||
padding: 0.875rem 2rem;
|
|
||||||
background: white;
|
|
||||||
color: #dc2626;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 2px solid #dc2626;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view-all:hover {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,419 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="min-h-screen" style="background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)">
|
|
||||||
<!-- Glass Sidebar -->
|
|
||||||
<GlassSidebar
|
|
||||||
:is-open="sidebarOpen"
|
|
||||||
:is-mobile="isMobile"
|
|
||||||
:user-name="firstName"
|
|
||||||
:user-role="userRole"
|
|
||||||
:user-avatar="userAvatar"
|
|
||||||
@close="sidebarOpen = false"
|
|
||||||
@logout="handleLogout"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Main Content Area -->
|
|
||||||
<div :class="['transition-all duration-300', isMobile ? 'ml-0' : 'ml-72']">
|
|
||||||
<!-- Glass Navigation Bar -->
|
|
||||||
<header class="glass-navbar sticky top-0 z-30 px-6 py-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<!-- Mobile Menu Toggle -->
|
|
||||||
<button
|
|
||||||
v-if="isMobile"
|
|
||||||
@click="sidebarOpen = !sidebarOpen"
|
|
||||||
class="p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors lg:hidden"
|
|
||||||
>
|
|
||||||
<Menu class="w-6 h-6 text-gray-700" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Page Title -->
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<h1 class="text-2xl font-bold text-gradient-monaco">Board Dashboard</h1>
|
|
||||||
<span class="px-3 py-1 rounded-full bg-glass-monaco-soft text-monaco-600 text-sm font-medium">
|
|
||||||
{{ currentDate }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header Actions -->
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<!-- Notifications -->
|
|
||||||
<button class="relative p-2 rounded-lg hover:bg-glass-monaco-soft transition-colors">
|
|
||||||
<Bell class="w-5 h-5 text-gray-700" />
|
|
||||||
<span class="absolute top-1 right-1 w-2 h-2 bg-monaco-600 rounded-full"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<button
|
|
||||||
@click="showQuickActions = !showQuickActions"
|
|
||||||
class="btn-glass-primary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Plus class="w-4 h-4" />
|
|
||||||
Quick Action
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Dashboard Content -->
|
|
||||||
<main class="p-6 space-y-6">
|
|
||||||
<!-- Welcome Section -->
|
|
||||||
<div class="glass-ultra rounded-glass p-8 text-center animate-fade-in">
|
|
||||||
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
|
||||||
Welcome back, {{ firstName }}!
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600">
|
|
||||||
Here's an overview of MonacoUSA's current status and activities.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Statistics Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<GlassStatCard
|
|
||||||
v-for="stat in stats"
|
|
||||||
:key="stat.label"
|
|
||||||
:icon="stat.icon"
|
|
||||||
:label="stat.label"
|
|
||||||
:value="stat.value"
|
|
||||||
:prefix="stat.prefix"
|
|
||||||
:suffix="stat.suffix"
|
|
||||||
:change="stat.change"
|
|
||||||
:change-type="stat.changeType"
|
|
||||||
:icon-color="stat.color"
|
|
||||||
:action-label="stat.actionLabel"
|
|
||||||
@click="handleStatClick(stat)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dues Management Section - LIMITED TO 4 CARDS -->
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-xl font-semibold text-gray-800">Member Dues Overview</h3>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<!-- Filter Tabs -->
|
|
||||||
<div class="glass rounded-full p-1 flex gap-1">
|
|
||||||
<button
|
|
||||||
v-for="tab in duesTabs"
|
|
||||||
:key="tab.id"
|
|
||||||
@click="activeDuesTab = tab.id"
|
|
||||||
:class="[
|
|
||||||
'px-4 py-2 rounded-full text-sm font-medium transition-all',
|
|
||||||
activeDuesTab === tab.id
|
|
||||||
? 'bg-gradient-monaco text-white shadow-monaco-sm'
|
|
||||||
: 'text-gray-600 hover:text-monaco-600 hover:bg-glass-monaco-soft'
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ tab.label }}
|
|
||||||
<span v-if="tab.count" class="ml-1">({{ tab.count }})</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dues Cards Grid - MAX 4 VISIBLE -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<GlassDuesCard
|
|
||||||
v-for="member in visibleDuesMembers"
|
|
||||||
:key="member.id"
|
|
||||||
:member="member"
|
|
||||||
:status="activeDuesTab"
|
|
||||||
@mark-paid="handleMarkPaid"
|
|
||||||
@send-reminder="handleSendReminder"
|
|
||||||
@view-details="handleViewDetails"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- View All Button -->
|
|
||||||
<div v-if="totalDuesMembers > 4" class="text-center">
|
|
||||||
<button
|
|
||||||
@click="navigateToFullDuesList"
|
|
||||||
class="btn-glass-secondary inline-flex items-center gap-2"
|
|
||||||
>
|
|
||||||
View All {{ totalDuesMembers }} Members
|
|
||||||
<ArrowRight class="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Quick Actions Grid -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- Upcoming Events Card -->
|
|
||||||
<div class="glass-card-bright">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-semibold text-gray-800">Upcoming Events</h3>
|
|
||||||
<Calendar class="w-5 h-5 text-monaco-600" />
|
|
||||||
</div>
|
|
||||||
<div v-if="nextEvent" class="space-y-3">
|
|
||||||
<div class="p-4 bg-glass-monaco-soft rounded-xl">
|
|
||||||
<h4 class="font-medium text-gray-800">{{ nextEvent.title }}</h4>
|
|
||||||
<p class="text-sm text-gray-600 mt-1">{{ nextEvent.date }}</p>
|
|
||||||
<p class="text-xs text-gray-500 mt-2">{{ nextEvent.attendees }} attendees</p>
|
|
||||||
</div>
|
|
||||||
<button class="w-full btn-glass text-sm">
|
|
||||||
View All Events
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-center py-8 text-gray-500">
|
|
||||||
No upcoming events
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Recent Activity Card -->
|
|
||||||
<div class="glass-card-bright">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-semibold text-gray-800">Recent Activity</h3>
|
|
||||||
<Activity class="w-5 h-5 text-monaco-600" />
|
|
||||||
</div>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div
|
|
||||||
v-for="activity in recentActivity"
|
|
||||||
:key="activity.id"
|
|
||||||
class="flex items-start gap-3 p-3 rounded-lg hover:bg-glass-monaco-soft transition-colors"
|
|
||||||
>
|
|
||||||
<div class="w-2 h-2 bg-monaco-600 rounded-full mt-1.5"></div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<p class="text-sm text-gray-700">{{ activity.description }}</p>
|
|
||||||
<p class="text-xs text-gray-500 mt-1">{{ activity.time }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Quick Links Card -->
|
|
||||||
<div class="glass-card-bright">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="font-semibold text-gray-800">Quick Actions</h3>
|
|
||||||
<Zap class="w-5 h-5 text-monaco-600" />
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 gap-3">
|
|
||||||
<button
|
|
||||||
v-for="action in quickActions"
|
|
||||||
:key="action.label"
|
|
||||||
@click="action.handler"
|
|
||||||
class="p-3 rounded-xl bg-white/50 hover:bg-glass-monaco-soft
|
|
||||||
transition-all hover:scale-105 group text-center"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="action.icon"
|
|
||||||
class="w-6 h-6 text-gray-600 group-hover:text-monaco-600 mx-auto mb-2"
|
|
||||||
/>
|
|
||||||
<span class="text-xs text-gray-700 group-hover:text-monaco-600 font-medium">
|
|
||||||
{{ action.label }}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import {
|
|
||||||
Menu, Bell, Plus, ArrowRight, Calendar, Activity, Zap,
|
|
||||||
Users, DollarSign, FileText, Mail, TrendingUp, Settings,
|
|
||||||
LayoutDashboard, UserPlus, Send, Download
|
|
||||||
} from 'lucide-vue-next'
|
|
||||||
|
|
||||||
// Import our glass components
|
|
||||||
import GlassSidebar from '~/components/GlassSidebar.vue'
|
|
||||||
import GlassStatCard from '~/components/GlassStatCard.vue'
|
|
||||||
import GlassDuesCard from '~/components/GlassDuesCard.vue'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// Reactive state
|
|
||||||
const sidebarOpen = ref(false)
|
|
||||||
const isMobile = ref(false)
|
|
||||||
const showQuickActions = ref(false)
|
|
||||||
const activeDuesTab = ref('overdue')
|
|
||||||
const isLoading = ref(false)
|
|
||||||
|
|
||||||
// User data
|
|
||||||
const firstName = ref('Board Member')
|
|
||||||
const userRole = ref('Administrator')
|
|
||||||
const userAvatar = ref('/default-avatar.png')
|
|
||||||
|
|
||||||
// Current date
|
|
||||||
const currentDate = computed(() => {
|
|
||||||
return new Date().toLocaleDateString('en-US', {
|
|
||||||
weekday: 'long',
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// Statistics data with Lucide icons
|
|
||||||
const stats = ref([
|
|
||||||
{
|
|
||||||
icon: Users,
|
|
||||||
label: 'Total Members',
|
|
||||||
value: 1234,
|
|
||||||
change: '+12%',
|
|
||||||
changeType: 'increase',
|
|
||||||
color: 'monaco',
|
|
||||||
actionLabel: 'View all members'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: DollarSign,
|
|
||||||
label: 'Dues Collected',
|
|
||||||
value: 45678,
|
|
||||||
prefix: '$',
|
|
||||||
change: '+8%',
|
|
||||||
changeType: 'increase',
|
|
||||||
color: 'green',
|
|
||||||
actionLabel: 'View payments'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Calendar,
|
|
||||||
label: 'Upcoming Events',
|
|
||||||
value: 5,
|
|
||||||
change: '2 this week',
|
|
||||||
changeType: 'neutral',
|
|
||||||
color: 'blue',
|
|
||||||
actionLabel: 'View calendar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: TrendingUp,
|
|
||||||
label: 'Growth Rate',
|
|
||||||
value: 23,
|
|
||||||
suffix: '%',
|
|
||||||
change: '+3%',
|
|
||||||
changeType: 'increase',
|
|
||||||
color: 'purple',
|
|
||||||
actionLabel: 'View report'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Dues tabs
|
|
||||||
const duesTabs = ref([
|
|
||||||
{ id: 'overdue', label: 'Overdue', count: 12 },
|
|
||||||
{ id: 'upcoming', label: 'Upcoming', count: 24 },
|
|
||||||
{ id: 'paid', label: 'Recently Paid', count: 8 }
|
|
||||||
])
|
|
||||||
|
|
||||||
// Sample dues members data - LIMITED TO 4
|
|
||||||
const duesMembers = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'John Smith',
|
|
||||||
avatar: '/avatar1.jpg',
|
|
||||||
countryCode: 'US',
|
|
||||||
dueAmount: 250,
|
|
||||||
dueDate: '2024-01-15'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Marie Dubois',
|
|
||||||
avatar: '/avatar2.jpg',
|
|
||||||
countryCode: 'MC',
|
|
||||||
dueAmount: 250,
|
|
||||||
dueDate: '2024-01-20'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: 'Alessandro Rossi',
|
|
||||||
avatar: '/avatar3.jpg',
|
|
||||||
countryCode: 'IT',
|
|
||||||
dueAmount: 250,
|
|
||||||
dueDate: '2024-01-25'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: 'Emma Wilson',
|
|
||||||
avatar: '/avatar4.jpg',
|
|
||||||
countryCode: 'GB',
|
|
||||||
dueAmount: 250,
|
|
||||||
dueDate: '2024-01-30'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
// Computed: visible dues members (max 4)
|
|
||||||
const visibleDuesMembers = computed(() => {
|
|
||||||
return duesMembers.value.slice(0, 4)
|
|
||||||
})
|
|
||||||
|
|
||||||
const totalDuesMembers = computed(() => {
|
|
||||||
const tab = duesTabs.value.find(t => t.id === activeDuesTab.value)
|
|
||||||
return tab ? tab.count : 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// Next event
|
|
||||||
const nextEvent = ref({
|
|
||||||
title: 'Annual Gala Dinner',
|
|
||||||
date: 'January 28, 2024',
|
|
||||||
attendees: 150
|
|
||||||
})
|
|
||||||
|
|
||||||
// Recent activity
|
|
||||||
const recentActivity = ref([
|
|
||||||
{ id: 1, description: 'New member John Doe joined', time: '2 hours ago' },
|
|
||||||
{ id: 2, description: 'Payment received from Jane Smith', time: '5 hours ago' },
|
|
||||||
{ id: 3, description: 'Event "Wine Tasting" created', time: '1 day ago' }
|
|
||||||
])
|
|
||||||
|
|
||||||
// Quick actions
|
|
||||||
const quickActions = [
|
|
||||||
{ icon: UserPlus, label: 'Add Member', handler: () => router.push('/board/members/new') },
|
|
||||||
{ icon: Calendar, label: 'New Event', handler: () => router.push('/board/events/new') },
|
|
||||||
{ icon: Send, label: 'Send Email', handler: () => router.push('/board/communications') },
|
|
||||||
{ icon: Download, label: 'Export Data', handler: () => generateReport() }
|
|
||||||
]
|
|
||||||
|
|
||||||
// Event handlers
|
|
||||||
const handleStatClick = (stat) => {
|
|
||||||
console.log('Stat clicked:', stat.label)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMarkPaid = (member) => {
|
|
||||||
console.log('Mark paid:', member.name)
|
|
||||||
// Implement payment marking logic
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSendReminder = (member) => {
|
|
||||||
console.log('Send reminder:', member.name)
|
|
||||||
// Implement reminder logic
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleViewDetails = (member) => {
|
|
||||||
router.push(`/board/members/${member.id}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigateToFullDuesList = () => {
|
|
||||||
router.push('/board/dues')
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleLogout = () => {
|
|
||||||
// Implement logout logic
|
|
||||||
router.push('/logout')
|
|
||||||
}
|
|
||||||
|
|
||||||
const generateReport = () => {
|
|
||||||
console.log('Generating report...')
|
|
||||||
// Implement report generation
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if mobile
|
|
||||||
const checkMobile = () => {
|
|
||||||
isMobile.value = window.innerWidth < 1024
|
|
||||||
if (!isMobile.value) {
|
|
||||||
sidebarOpen.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lifecycle
|
|
||||||
onMounted(() => {
|
|
||||||
checkMobile()
|
|
||||||
window.addEventListener('resize', checkMobile)
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener('resize', checkMobile)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* Any additional custom styles */
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,889 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-container fluid>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<h1 class="text-h4 font-weight-bold mb-4">
|
|
||||||
<v-icon left>mdi-account</v-icon>
|
|
||||||
Welcome Back, {{ firstName }}
|
|
||||||
</h1>
|
|
||||||
<p class="text-body-1 mb-6">
|
|
||||||
Manage users and portal settings for the MonacoUSA Portal.
|
|
||||||
</p>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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="3">
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
@click="navigateTo('/dashboard/member-list')"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-account-cog</v-icon>
|
|
||||||
Manage Users
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<v-btn
|
|
||||||
color="success"
|
|
||||||
variant="outlined"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
@click="showCreateUserDialog = true"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-account-plus</v-icon>
|
|
||||||
Create User Account
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="3">
|
|
||||||
<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="3">
|
|
||||||
<v-btn
|
|
||||||
color="secondary"
|
|
||||||
variant="outlined"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
@click="showAdminConfig = true"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-cog</v-icon>
|
|
||||||
Portal Settings
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Dues Management -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12">
|
|
||||||
<BoardDuesManagement
|
|
||||||
:refresh-trigger="duesRefreshTrigger"
|
|
||||||
@view-member="handleViewMember"
|
|
||||||
@view-all-members="navigateToMembers"
|
|
||||||
@member-updated="handleMemberUpdated"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Portal Configuration -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card elevation="2">
|
|
||||||
<v-card-title>
|
|
||||||
<v-icon left>mdi-cog</v-icon>
|
|
||||||
Portal Configuration
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<p class="mb-4">Configure all portal settings including database, email, reCAPTCHA, and membership fees in one centralized location.</p>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12" md="4">
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
@click="showAdminConfig = true"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-cog</v-icon>
|
|
||||||
Portal Settings
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="8">
|
|
||||||
<v-row dense>
|
|
||||||
<v-col cols="6" sm="3">
|
|
||||||
<v-chip color="success" variant="tonal" size="small" block>
|
|
||||||
<v-icon start size="14">mdi-database</v-icon>
|
|
||||||
NocoDB
|
|
||||||
</v-chip>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" sm="3">
|
|
||||||
<v-chip color="info" variant="tonal" size="small" block>
|
|
||||||
<v-icon start size="14">mdi-email</v-icon>
|
|
||||||
Email
|
|
||||||
</v-chip>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" sm="3">
|
|
||||||
<v-chip color="warning" variant="tonal" size="small" block>
|
|
||||||
<v-icon start size="14">mdi-shield</v-icon>
|
|
||||||
reCAPTCHA
|
|
||||||
</v-chip>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" sm="3">
|
|
||||||
<v-chip color="primary" variant="tonal" size="small" block>
|
|
||||||
<v-icon start size="14">mdi-bank</v-icon>
|
|
||||||
Membership
|
|
||||||
</v-chip>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Data Management -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card elevation="2">
|
|
||||||
<v-card-title>
|
|
||||||
<v-icon left>mdi-database-cog</v-icon>
|
|
||||||
Data Management
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<p class="mb-4">Manage data integrity and perform maintenance operations on the portal database.</p>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-btn
|
|
||||||
@click="assignMemberIds"
|
|
||||||
color="warning"
|
|
||||||
variant="outlined"
|
|
||||||
prepend-icon="mdi-account-multiple-plus"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
:loading="assigningMemberIds"
|
|
||||||
>
|
|
||||||
Assign Member IDs
|
|
||||||
</v-btn>
|
|
||||||
<div class="text-caption mt-2 text-medium-emphasis">
|
|
||||||
Assign unique member IDs (MUSA-0001, MUSA-0002, etc.) to members who don't have them
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-btn
|
|
||||||
@click="backfillEventIds"
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
prepend-icon="mdi-calendar-sync"
|
|
||||||
block
|
|
||||||
size="large"
|
|
||||||
:loading="backfillLoading"
|
|
||||||
>
|
|
||||||
Backfill Event IDs
|
|
||||||
</v-btn>
|
|
||||||
<div class="text-caption mt-2 text-medium-emphasis">
|
|
||||||
Assign business IDs to events that don't have them
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<!-- NocoDB Settings Dialog -->
|
|
||||||
<NocoDBSettingsDialog
|
|
||||||
v-model="showNocoDBSettings"
|
|
||||||
@settings-saved="handleSettingsSaved"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Admin Configuration Dialog -->
|
|
||||||
<AdminConfigurationDialog
|
|
||||||
v-model="showAdminConfig"
|
|
||||||
@settings-saved="handleAdminConfigSaved"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- reCAPTCHA Configuration Dialog -->
|
|
||||||
<v-dialog v-model="showRecaptchaConfig" max-width="600">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title class="text-h5">
|
|
||||||
<v-icon left>mdi-shield-account</v-icon>
|
|
||||||
reCAPTCHA Configuration
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<v-alert type="info" variant="tonal" class="mb-4">
|
|
||||||
<v-alert-title>Security Configuration</v-alert-title>
|
|
||||||
Configure Google reCAPTCHA settings for form protection on the registration page.
|
|
||||||
</v-alert>
|
|
||||||
|
|
||||||
<v-form ref="recaptchaForm" v-model="recaptchaValid">
|
|
||||||
<v-text-field
|
|
||||||
v-model="recaptchaConfig.siteKey"
|
|
||||||
label="Site Key"
|
|
||||||
placeholder="6Lc6BAAAAAAAAChqRbQZcn_yyyyyyyyyyyyyyyyy"
|
|
||||||
:rules="[v => !!v || 'Site key is required']"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
v-model="recaptchaConfig.secretKey"
|
|
||||||
label="Secret Key"
|
|
||||||
placeholder="6Lc6BAAAAAAAAKN3DRm6VA_xxxxxxxxxxxxxxxxx"
|
|
||||||
:rules="[v => !!v || 'Secret key is required']"
|
|
||||||
variant="outlined"
|
|
||||||
type="password"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-alert type="warning" variant="tonal" class="mt-4">
|
|
||||||
<v-alert-title>Important</v-alert-title>
|
|
||||||
Keep your secret key confidential. You can get these keys from the Google reCAPTCHA admin console.
|
|
||||||
</v-alert>
|
|
||||||
</v-form>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn text @click="showRecaptchaConfig = false">Cancel</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
:loading="savingRecaptcha"
|
|
||||||
:disabled="!recaptchaValid"
|
|
||||||
@click="saveRecaptchaConfig"
|
|
||||||
>
|
|
||||||
Save Configuration
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
|
|
||||||
<!-- Membership Configuration Dialog -->
|
|
||||||
<v-dialog v-model="showMembershipConfig" max-width="600">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title class="text-h5">
|
|
||||||
<v-icon left>mdi-bank</v-icon>
|
|
||||||
Membership Configuration
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<v-alert type="info" variant="tonal" class="mb-4">
|
|
||||||
<v-alert-title>Payment Configuration</v-alert-title>
|
|
||||||
Configure membership fees and payment details displayed on the registration page.
|
|
||||||
</v-alert>
|
|
||||||
|
|
||||||
<v-form ref="membershipForm" v-model="membershipValid">
|
|
||||||
<v-text-field
|
|
||||||
v-model="membershipConfig.membershipFee"
|
|
||||||
label="Annual Membership Fee (€)"
|
|
||||||
type="number"
|
|
||||||
:rules="[
|
|
||||||
v => !!v || 'Membership fee is required',
|
|
||||||
v => v > 0 || 'Fee must be greater than 0'
|
|
||||||
]"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
v-model="membershipConfig.iban"
|
|
||||||
label="IBAN"
|
|
||||||
placeholder="DE89 3704 0044 0532 0130 00"
|
|
||||||
:rules="[v => !!v || 'IBAN is required']"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
v-model="membershipConfig.accountHolder"
|
|
||||||
label="Account Holder Name"
|
|
||||||
placeholder="MonacoUSA Association"
|
|
||||||
:rules="[v => !!v || 'Account holder is required']"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</v-form>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn text @click="showMembershipConfig = false">Cancel</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
:loading="savingMembership"
|
|
||||||
:disabled="!membershipValid"
|
|
||||||
@click="saveMembershipConfig"
|
|
||||||
>
|
|
||||||
Save Configuration
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
|
|
||||||
<!-- View Member Dialog -->
|
|
||||||
<ViewMemberDialog
|
|
||||||
v-model="showViewDialog"
|
|
||||||
:member="selectedMember"
|
|
||||||
@edit="handleEditMember"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Edit Member Dialog -->
|
|
||||||
<EditMemberDialog
|
|
||||||
v-model="showEditDialog"
|
|
||||||
:member="selectedMember"
|
|
||||||
@member-updated="handleMemberUpdated"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Create User Dialog -->
|
|
||||||
<v-dialog v-model="showCreateUserDialog" max-width="600">
|
|
||||||
<v-card>
|
|
||||||
<v-card-title class="text-h5">
|
|
||||||
<v-icon left>mdi-account-plus</v-icon>
|
|
||||||
Create User Account
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<v-alert type="info" variant="tonal" class="mb-4">
|
|
||||||
<v-alert-title>Create Portal Account</v-alert-title>
|
|
||||||
This will create a new user account in the MonacoUSA Portal with email verification.
|
|
||||||
</v-alert>
|
|
||||||
|
|
||||||
<v-form ref="createUserForm" v-model="createUserValid">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-text-field
|
|
||||||
v-model="newUser.firstName"
|
|
||||||
label="First Name"
|
|
||||||
:rules="[v => !!v || 'First name is required']"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-text-field
|
|
||||||
v-model="newUser.lastName"
|
|
||||||
label="Last Name"
|
|
||||||
:rules="[v => !!v || 'Last name is required']"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
v-model="newUser.email"
|
|
||||||
label="Email Address"
|
|
||||||
type="email"
|
|
||||||
:rules="[
|
|
||||||
v => !!v || 'Email is required',
|
|
||||||
v => /.+@.+\..+/.test(v) || 'Email must be valid'
|
|
||||||
]"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-select
|
|
||||||
v-model="newUser.role"
|
|
||||||
label="User Role"
|
|
||||||
:items="roleOptions"
|
|
||||||
item-title="title"
|
|
||||||
item-value="value"
|
|
||||||
variant="outlined"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</v-form>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn text @click="showCreateUserDialog = false">Cancel</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
:loading="creatingUser"
|
|
||||||
:disabled="!createUserValid"
|
|
||||||
@click="createUserAccount"
|
|
||||||
>
|
|
||||||
Create Account
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
layout: 'dashboard',
|
|
||||||
middleware: 'auth-admin'
|
|
||||||
});
|
|
||||||
|
|
||||||
const { firstName } = useAuth();
|
|
||||||
|
|
||||||
// Reactive data
|
|
||||||
const userCount = ref(0);
|
|
||||||
const loading = ref(false);
|
|
||||||
const showCreateUserDialog = ref(false);
|
|
||||||
const showAdminConfig = ref(false);
|
|
||||||
const showRecaptchaConfig = ref(false);
|
|
||||||
const showMembershipConfig = ref(false);
|
|
||||||
const showEmailConfig = ref(false);
|
|
||||||
|
|
||||||
// Dues management
|
|
||||||
const overdueCount = ref(0);
|
|
||||||
const overdueRefreshTrigger = ref(0);
|
|
||||||
const duesRefreshTrigger = ref(0);
|
|
||||||
|
|
||||||
// Data management
|
|
||||||
const assigningMemberIds = ref(false);
|
|
||||||
const backfillLoading = ref(false);
|
|
||||||
|
|
||||||
// Member dialog state
|
|
||||||
const showViewDialog = ref(false);
|
|
||||||
const showEditDialog = ref(false);
|
|
||||||
const selectedMember = ref(null);
|
|
||||||
|
|
||||||
// Create user dialog data
|
|
||||||
const createUserValid = ref(false);
|
|
||||||
const creatingUser = ref(false);
|
|
||||||
const newUser = ref({
|
|
||||||
firstName: '',
|
|
||||||
lastName: '',
|
|
||||||
email: '',
|
|
||||||
role: 'user'
|
|
||||||
});
|
|
||||||
|
|
||||||
const roleOptions = [
|
|
||||||
{ title: 'User', value: 'user' },
|
|
||||||
{ title: 'Board Member', value: 'board' },
|
|
||||||
{ title: 'Administrator', value: 'admin' }
|
|
||||||
];
|
|
||||||
|
|
||||||
// reCAPTCHA configuration data
|
|
||||||
const recaptchaValid = ref(false);
|
|
||||||
const savingRecaptcha = ref(false);
|
|
||||||
const recaptchaConfig = ref({
|
|
||||||
siteKey: '',
|
|
||||||
secretKey: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
// Membership configuration data
|
|
||||||
const membershipValid = ref(false);
|
|
||||||
const savingMembership = ref(false);
|
|
||||||
const membershipConfig = ref({
|
|
||||||
membershipFee: 50,
|
|
||||||
iban: '',
|
|
||||||
accountHolder: ''
|
|
||||||
});
|
|
||||||
|
|
||||||
const recentActivity = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
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: 'Role Updated',
|
|
||||||
description: 'User role updated from User to Board Member',
|
|
||||||
time: '4 hours ago',
|
|
||||||
icon: 'mdi-shield-account',
|
|
||||||
color: 'warning'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: 'System Backup',
|
|
||||||
description: 'Automated system backup completed successfully',
|
|
||||||
time: '1 day ago',
|
|
||||||
icon: 'mdi-backup-restore',
|
|
||||||
color: 'info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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 simplified admin stats (without system metrics)
|
|
||||||
const loadStats = async () => {
|
|
||||||
try {
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
// 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
|
|
||||||
userCount.value = 25;
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Action methods (placeholders for now)
|
|
||||||
const manageUsers = () => {
|
|
||||||
window.open('https://auth.monacousa.org', '_blank');
|
|
||||||
};
|
|
||||||
|
|
||||||
const viewAuditLogs = () => {
|
|
||||||
console.log('Navigate to audit logs');
|
|
||||||
// TODO: Implement audit logs navigation
|
|
||||||
};
|
|
||||||
|
|
||||||
const showNocoDBSettings = ref(false);
|
|
||||||
|
|
||||||
const portalSettings = () => {
|
|
||||||
showNocoDBSettings.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSettingsSaved = () => {
|
|
||||||
console.log('NocoDB settings saved successfully');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAdminConfigSaved = () => {
|
|
||||||
console.log('Admin configuration saved successfully');
|
|
||||||
showAdminConfig.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle opening email configuration directly
|
|
||||||
const openEmailConfig = () => {
|
|
||||||
// Set the activeTab to email when opening the admin config dialog
|
|
||||||
showEmailConfig.value = true;
|
|
||||||
showAdminConfig.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Watch for showEmailConfig to set the initial tab
|
|
||||||
watch(showEmailConfig, (newValue) => {
|
|
||||||
if (newValue) {
|
|
||||||
// This will be handled by the AdminConfigurationDialog to set initial tab
|
|
||||||
showEmailConfig.value = false; // Reset the flag
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const saveRecaptchaConfig = async () => {
|
|
||||||
if (!recaptchaValid.value) return;
|
|
||||||
|
|
||||||
savingRecaptcha.value = true;
|
|
||||||
try {
|
|
||||||
const response = await $fetch('/api/admin/recaptcha-config', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
siteKey: recaptchaConfig.value.siteKey,
|
|
||||||
secretKey: recaptchaConfig.value.secretKey
|
|
||||||
}
|
|
||||||
}) as any;
|
|
||||||
|
|
||||||
if (response?.success) {
|
|
||||||
showRecaptchaConfig.value = false;
|
|
||||||
console.log('reCAPTCHA configuration saved successfully');
|
|
||||||
// TODO: Show success notification
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save reCAPTCHA configuration:', error);
|
|
||||||
// TODO: Show error notification
|
|
||||||
} finally {
|
|
||||||
savingRecaptcha.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveMembershipConfig = async () => {
|
|
||||||
if (!membershipValid.value) return;
|
|
||||||
|
|
||||||
savingMembership.value = true;
|
|
||||||
try {
|
|
||||||
const response = await $fetch('/api/admin/registration-config', {
|
|
||||||
method: 'POST',
|
|
||||||
body: {
|
|
||||||
membershipFee: membershipConfig.value.membershipFee,
|
|
||||||
iban: membershipConfig.value.iban,
|
|
||||||
accountHolder: membershipConfig.value.accountHolder
|
|
||||||
}
|
|
||||||
}) as any;
|
|
||||||
|
|
||||||
if (response?.success) {
|
|
||||||
showMembershipConfig.value = false;
|
|
||||||
console.log('Membership configuration saved successfully');
|
|
||||||
// TODO: Show success notification
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save membership configuration:', error);
|
|
||||||
// TODO: Show error notification
|
|
||||||
} finally {
|
|
||||||
savingMembership.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createUserAccount = async () => {
|
|
||||||
if (!createUserValid.value) return;
|
|
||||||
|
|
||||||
creatingUser.value = true;
|
|
||||||
try {
|
|
||||||
console.log('Creating user account:', newUser.value);
|
|
||||||
|
|
||||||
// TODO: Implement actual user creation using enhanced Keycloak API
|
|
||||||
// For now, just show success
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
|
|
||||||
|
|
||||||
// Reset form
|
|
||||||
newUser.value = {
|
|
||||||
firstName: '',
|
|
||||||
lastName: '',
|
|
||||||
email: '',
|
|
||||||
role: 'user'
|
|
||||||
};
|
|
||||||
|
|
||||||
showCreateUserDialog.value = false;
|
|
||||||
console.log('User account created successfully');
|
|
||||||
|
|
||||||
// TODO: Show success notification
|
|
||||||
// TODO: Refresh user list
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to create user account:', error);
|
|
||||||
// TODO: Show error notification
|
|
||||||
} finally {
|
|
||||||
creatingUser.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createUser = () => {
|
|
||||||
console.log('Create new user');
|
|
||||||
// TODO: Implement create user dialog/form
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateReport = () => {
|
|
||||||
console.log('Generate user report');
|
|
||||||
// TODO: Implement report generation
|
|
||||||
};
|
|
||||||
|
|
||||||
const manageRoles = () => {
|
|
||||||
console.log('Manage user roles');
|
|
||||||
// TODO: Implement role management
|
|
||||||
};
|
|
||||||
|
|
||||||
const systemMaintenance = () => {
|
|
||||||
console.log('System maintenance');
|
|
||||||
// TODO: Implement maintenance mode
|
|
||||||
};
|
|
||||||
|
|
||||||
// Dues management handlers
|
|
||||||
const loadOverdueCount = async () => {
|
|
||||||
try {
|
|
||||||
const response = await $fetch<{ success: boolean; data: { count: number } }>('/api/members/overdue-count');
|
|
||||||
if (response.success) {
|
|
||||||
overdueCount.value = response.data.count;
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Error loading overdue count:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const viewOverdueMembers = () => {
|
|
||||||
// Navigate to member list with overdue filter applied
|
|
||||||
navigateTo('/dashboard/member-list');
|
|
||||||
};
|
|
||||||
|
|
||||||
const sendDuesReminders = () => {
|
|
||||||
// Placeholder for dues reminder functionality
|
|
||||||
console.log('Send dues reminders - feature to be implemented');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleStatusesUpdated = async (updatedCount: number) => {
|
|
||||||
console.log(`Successfully updated ${updatedCount} member${updatedCount !== 1 ? 's' : ''} to inactive status`);
|
|
||||||
|
|
||||||
// Refresh overdue count
|
|
||||||
await loadOverdueCount();
|
|
||||||
|
|
||||||
// Trigger banner refresh
|
|
||||||
overdueRefreshTrigger.value += 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleViewMember = (member: any) => {
|
|
||||||
// Open the view dialog instead of navigating away
|
|
||||||
selectedMember.value = member;
|
|
||||||
showViewDialog.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditMember = (member: any) => {
|
|
||||||
// Close the view dialog and open the edit dialog
|
|
||||||
showViewDialog.value = false;
|
|
||||||
selectedMember.value = member;
|
|
||||||
showEditDialog.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigateToMembers = () => {
|
|
||||||
// Navigate to member list page
|
|
||||||
navigateTo('/dashboard/member-list');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMemberUpdated = (member: any) => {
|
|
||||||
console.log('Member updated:', member.FullName || `${member.first_name} ${member.last_name}`);
|
|
||||||
|
|
||||||
// Close edit dialog
|
|
||||||
showEditDialog.value = false;
|
|
||||||
|
|
||||||
// Trigger dues refresh
|
|
||||||
duesRefreshTrigger.value += 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Data management functions
|
|
||||||
const assignMemberIds = async () => {
|
|
||||||
assigningMemberIds.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('Starting member ID assignment...');
|
|
||||||
|
|
||||||
const response = await $fetch<{
|
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
data: {
|
|
||||||
totalMembers: number;
|
|
||||||
membersUpdated: number;
|
|
||||||
updatedMembers: Array<{
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
memberId: string;
|
|
||||||
}>;
|
|
||||||
startingId: string | null;
|
|
||||||
endingId: string | null;
|
|
||||||
};
|
|
||||||
}>('/api/admin/assign-member-ids', {
|
|
||||||
method: 'POST'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
console.log('✅ Member ID assignment completed:', {
|
|
||||||
totalMembers: response.data.totalMembers,
|
|
||||||
membersUpdated: response.data.membersUpdated,
|
|
||||||
startingId: response.data.startingId,
|
|
||||||
endingId: response.data.endingId
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
alert(`Success! Assigned member IDs to ${response.data.membersUpdated} members.\nRange: ${response.data.startingId} to ${response.data.endingId}`);
|
|
||||||
|
|
||||||
// Refresh dues management data
|
|
||||||
duesRefreshTrigger.value += 1;
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('❌ Failed to assign member IDs:', error);
|
|
||||||
alert(`Error: ${error.statusMessage || error.message || 'Failed to assign member IDs'}`);
|
|
||||||
} finally {
|
|
||||||
assigningMemberIds.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const backfillEventIds = async () => {
|
|
||||||
backfillLoading.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('Starting event ID backfill...');
|
|
||||||
|
|
||||||
const response = await $fetch<{
|
|
||||||
success: boolean;
|
|
||||||
message: string;
|
|
||||||
data: {
|
|
||||||
totalEvents: number;
|
|
||||||
eventsUpdated: number;
|
|
||||||
};
|
|
||||||
}>('/api/admin/backfill-event-ids', {
|
|
||||||
method: 'POST'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
console.log('✅ Event ID backfill completed:', {
|
|
||||||
totalEvents: response.data.totalEvents,
|
|
||||||
eventsUpdated: response.data.eventsUpdated
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
alert(`Success! Assigned event IDs to ${response.data.eventsUpdated} events.`);
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('❌ Failed to backfill event IDs:', error);
|
|
||||||
alert(`Error: ${error.statusMessage || error.message || 'Failed to backfill event IDs'}`);
|
|
||||||
} finally {
|
|
||||||
backfillLoading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Load stats and overdue count on component mount
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadStats();
|
|
||||||
await loadOverdueCount();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.v-card {
|
|
||||||
border-radius: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-card:hover {
|
|
||||||
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;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-list-item {
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-list-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,350 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container>
|
|
||||||
<!-- Dues Payment Banner -->
|
|
||||||
<DuesPaymentBanner />
|
|
||||||
|
|
||||||
<!-- 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 Board Portal
|
|
||||||
</p>
|
|
||||||
<div class="text-center">
|
|
||||||
<v-chip color="primary" variant="elevated" class="mt-2">
|
|
||||||
<v-icon start>mdi-shield-account</v-icon>
|
|
||||||
Board Member
|
|
||||||
</v-chip>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Board Tools -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
|
||||||
<v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
|
|
||||||
<h3 class="mb-2">Events</h3>
|
|
||||||
<p class="text-body-2 mb-4">View and manage association events</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="navigateToEvents"
|
|
||||||
>
|
|
||||||
View Events
|
|
||||||
</v-btn>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
|
||||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
|
||||||
<v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
|
|
||||||
<h3 class="mb-2">Members</h3>
|
|
||||||
<p class="text-body-2 mb-4">View and manage association members</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="navigateToMembers"
|
|
||||||
>
|
|
||||||
View Members
|
|
||||||
</v-btn>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Board Statistics -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12" md="8">
|
|
||||||
<v-card elevation="2">
|
|
||||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
|
||||||
<v-icon class="mr-2" color="primary">mdi-chart-box-outline</v-icon>
|
|
||||||
Board Overview
|
|
||||||
</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;">{{ stats.totalMembers }}</div>
|
|
||||||
<div class="text-body-2">Total Members</div>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" md="3" class="text-center">
|
|
||||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.activeMembers }}</div>
|
|
||||||
<div class="text-body-2">Active Members</div>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" md="6" class="text-center">
|
|
||||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingEvents }}</div>
|
|
||||||
<div class="text-body-2">Upcoming Events</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="4">
|
|
||||||
<v-card elevation="2">
|
|
||||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
|
||||||
<v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
|
|
||||||
Next Event
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text class="pa-4">
|
|
||||||
<div class="text-h6 mb-2">{{ nextEvent.title }}</div>
|
|
||||||
<div class="text-body-2 mb-2">
|
|
||||||
<v-icon size="small" class="mr-1">mdi-calendar</v-icon>
|
|
||||||
{{ nextEvent.date }}
|
|
||||||
</div>
|
|
||||||
<div class="text-body-2 mb-4">
|
|
||||||
<v-icon size="small" class="mr-1">mdi-clock</v-icon>
|
|
||||||
{{ nextEvent.time }}
|
|
||||||
</div>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="viewEventDetails"
|
|
||||||
>
|
|
||||||
View Details
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Dues Management Section -->
|
|
||||||
<v-row class="mb-6">
|
|
||||||
<v-col cols="12">
|
|
||||||
<BoardDuesManagement
|
|
||||||
:refresh-trigger="duesRefreshTrigger"
|
|
||||||
@view-member="handleViewMember"
|
|
||||||
@view-all-members="navigateToMembers"
|
|
||||||
@member-updated="handleMemberUpdated"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- View Member Dialog -->
|
|
||||||
<ViewMemberDialog
|
|
||||||
v-model="showViewDialog"
|
|
||||||
:member="selectedMember"
|
|
||||||
@edit="handleEditMember"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Edit Member Dialog -->
|
|
||||||
<EditMemberDialog
|
|
||||||
v-model="showEditDialog"
|
|
||||||
:member="selectedMember"
|
|
||||||
@member-updated="handleMemberUpdated"
|
|
||||||
/>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { Member } from '~/utils/types';
|
|
||||||
|
|
||||||
definePageMeta({
|
|
||||||
layout: 'dashboard',
|
|
||||||
middleware: 'auth'
|
|
||||||
});
|
|
||||||
|
|
||||||
const { firstName, isBoard, isAdmin } = useAuth();
|
|
||||||
|
|
||||||
// Check board access on mount
|
|
||||||
onMounted(() => {
|
|
||||||
if (!isBoard.value && !isAdmin.value) {
|
|
||||||
throw createError({
|
|
||||||
statusCode: 403,
|
|
||||||
statusMessage: 'Access denied. Board membership required.'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dues management state
|
|
||||||
const duesRefreshTrigger = ref(0);
|
|
||||||
|
|
||||||
// Member dialog state
|
|
||||||
const showViewDialog = ref(false);
|
|
||||||
const showEditDialog = ref(false);
|
|
||||||
const selectedMember = ref<Member | null>(null);
|
|
||||||
|
|
||||||
// Real data for board dashboard
|
|
||||||
const stats = ref({
|
|
||||||
totalMembers: 0,
|
|
||||||
activeMembers: 0,
|
|
||||||
upcomingEvents: 0
|
|
||||||
});
|
|
||||||
|
|
||||||
const nextEvent = ref({
|
|
||||||
id: null,
|
|
||||||
title: 'Next Event',
|
|
||||||
date: 'Loading...',
|
|
||||||
time: 'Loading...',
|
|
||||||
location: 'TBD',
|
|
||||||
description: 'Upcoming association event'
|
|
||||||
});
|
|
||||||
|
|
||||||
const isLoading = ref(true);
|
|
||||||
|
|
||||||
// Load real data on component mount
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadBoardData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadBoardData = async () => {
|
|
||||||
try {
|
|
||||||
isLoading.value = true;
|
|
||||||
|
|
||||||
// Load board statistics
|
|
||||||
const [statsResponse, meetingResponse] = await Promise.allSettled([
|
|
||||||
$fetch('/api/board/stats'),
|
|
||||||
$fetch('/api/board/next-meeting')
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Handle stats response
|
|
||||||
if (statsResponse.status === 'fulfilled') {
|
|
||||||
const statsData = statsResponse.value as any;
|
|
||||||
if (statsData?.success) {
|
|
||||||
stats.value = {
|
|
||||||
totalMembers: statsData.data.totalMembers || 0,
|
|
||||||
activeMembers: statsData.data.activeMembers || 0,
|
|
||||||
upcomingEvents: statsData.data.upcomingEvents || 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle next meeting response
|
|
||||||
if (meetingResponse.status === 'fulfilled') {
|
|
||||||
const meetingData = meetingResponse.value as any;
|
|
||||||
if (meetingData?.success) {
|
|
||||||
nextEvent.value = {
|
|
||||||
id: meetingData.data.id,
|
|
||||||
title: meetingData.data.title || 'Next Event',
|
|
||||||
date: meetingData.data.date || 'TBD',
|
|
||||||
time: meetingData.data.time || 'TBD',
|
|
||||||
location: meetingData.data.location || 'TBD',
|
|
||||||
description: meetingData.data.description || 'Upcoming association event'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading board data:', error);
|
|
||||||
// Keep fallback values
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const recentActivity = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: 'Monthly Board Meeting',
|
|
||||||
description: 'Meeting minutes approved and distributed',
|
|
||||||
type: 'success',
|
|
||||||
status: 'Completed'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: 'Budget Review',
|
|
||||||
description: 'Q4 financial report under review',
|
|
||||||
type: 'warning',
|
|
||||||
status: 'In Progress'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: 'Member Application',
|
|
||||||
description: 'New member application pending approval',
|
|
||||||
type: 'info',
|
|
||||||
status: 'Pending'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Dues management handlers
|
|
||||||
const handleViewMember = (member: Member) => {
|
|
||||||
// Open the view dialog instead of navigating away
|
|
||||||
selectedMember.value = member;
|
|
||||||
showViewDialog.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditMember = (member: Member) => {
|
|
||||||
// Close the view dialog and open the edit dialog
|
|
||||||
showViewDialog.value = false;
|
|
||||||
selectedMember.value = member;
|
|
||||||
showEditDialog.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMemberUpdated = (member: Member) => {
|
|
||||||
console.log('Member updated:', member.FullName || `${member.first_name} ${member.last_name}`);
|
|
||||||
|
|
||||||
// Close edit dialog
|
|
||||||
showEditDialog.value = false;
|
|
||||||
|
|
||||||
// Trigger dues refresh to update the lists
|
|
||||||
duesRefreshTrigger.value += 1;
|
|
||||||
|
|
||||||
// You could also update stats here if needed
|
|
||||||
// stats.value = await fetchUpdatedStats();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Navigation methods
|
|
||||||
const navigateToEvents = () => {
|
|
||||||
// Navigate to events page
|
|
||||||
navigateTo('/dashboard/events');
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigateToMembers = () => {
|
|
||||||
// Navigate to member list page
|
|
||||||
navigateTo('/dashboard/member-list');
|
|
||||||
};
|
|
||||||
|
|
||||||
const viewEventDetails = () => {
|
|
||||||
console.log('View event details');
|
|
||||||
};
|
|
||||||
|
|
||||||
const scheduleNewMeeting = () => {
|
|
||||||
console.log('Schedule new meeting');
|
|
||||||
};
|
|
||||||
|
|
||||||
const createAnnouncement = () => {
|
|
||||||
console.log('Create announcement');
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateReport = () => {
|
|
||||||
console.log('Generate report');
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.v-card {
|
|
||||||
border-radius: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
transition: transform 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-btn {
|
|
||||||
text-transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-icon {
|
|
||||||
color: #a31515 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body-2 {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-chip {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,613 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dashboard-mockup">
|
|
||||||
<!-- Header -->
|
|
||||||
<header class="dashboard-header">
|
|
||||||
<div class="dashboard-header__content">
|
|
||||||
<h1
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: -20 }"
|
|
||||||
:enter="{ opacity: 1, x: 0 }"
|
|
||||||
class="dashboard-header__title"
|
|
||||||
>
|
|
||||||
Welcome back, {{ userName }}
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: -20 }"
|
|
||||||
:enter="{ opacity: 1, x: 0, transition: { delay: 100 } }"
|
|
||||||
class="dashboard-header__subtitle"
|
|
||||||
>
|
|
||||||
Here's what's happening with MonacoUSA today
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dashboard-header__actions">
|
|
||||||
<MonacoButton variant="glass" icon="bell">
|
|
||||||
Notifications
|
|
||||||
</MonacoButton>
|
|
||||||
<MonacoButton variant="primary" icon="plus">
|
|
||||||
New Event
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Stats Grid -->
|
|
||||||
<section class="dashboard-stats">
|
|
||||||
<StatsCard
|
|
||||||
v-for="(stat, index) in stats"
|
|
||||||
:key="stat.label"
|
|
||||||
:label="stat.label"
|
|
||||||
:value="stat.value"
|
|
||||||
:icon="stat.icon"
|
|
||||||
:prefix="stat.prefix"
|
|
||||||
:suffix="stat.suffix"
|
|
||||||
:trend="stat.trend"
|
|
||||||
:progress="stat.progress"
|
|
||||||
:sparkline="stat.sparkline"
|
|
||||||
:delay="index"
|
|
||||||
variant="glass"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Main Content Grid -->
|
|
||||||
<div class="dashboard-grid">
|
|
||||||
<!-- Recent Activity -->
|
|
||||||
<GlassCard
|
|
||||||
title="Recent Activity"
|
|
||||||
variant="glass"
|
|
||||||
:delay="400"
|
|
||||||
class="dashboard-activity"
|
|
||||||
>
|
|
||||||
<div class="activity-list">
|
|
||||||
<div
|
|
||||||
v-for="(activity, index) in recentActivities"
|
|
||||||
:key="index"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, x: -20 }"
|
|
||||||
:enter="{
|
|
||||||
opacity: 1,
|
|
||||||
x: 0,
|
|
||||||
transition: { delay: 500 + (index * 50) }
|
|
||||||
}"
|
|
||||||
class="activity-item"
|
|
||||||
>
|
|
||||||
<div class="activity-item__icon">
|
|
||||||
<span :class="`activity-icon activity-icon--${activity.type}`">
|
|
||||||
{{ activity.icon }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="activity-item__content">
|
|
||||||
<p class="activity-item__text">{{ activity.text }}</p>
|
|
||||||
<span class="activity-item__time">{{ activity.time }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
|
|
||||||
<!-- Upcoming Events -->
|
|
||||||
<GlassCard
|
|
||||||
title="Upcoming Events"
|
|
||||||
variant="glass"
|
|
||||||
:delay="450"
|
|
||||||
class="dashboard-events"
|
|
||||||
>
|
|
||||||
<div class="events-list">
|
|
||||||
<div
|
|
||||||
v-for="(event, index) in upcomingEvents"
|
|
||||||
:key="index"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: 20 }"
|
|
||||||
:enter="{
|
|
||||||
opacity: 1,
|
|
||||||
y: 0,
|
|
||||||
transition: { delay: 550 + (index * 50) }
|
|
||||||
}"
|
|
||||||
class="event-card"
|
|
||||||
>
|
|
||||||
<div class="event-card__date">
|
|
||||||
<span class="event-card__day">{{ event.day }}</span>
|
|
||||||
<span class="event-card__month">{{ event.month }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="event-card__content">
|
|
||||||
<h4 class="event-card__title">{{ event.title }}</h4>
|
|
||||||
<p class="event-card__location">{{ event.location }}</p>
|
|
||||||
<div class="event-card__attendees">
|
|
||||||
<span class="event-card__count">{{ event.attendees }} attending</span>
|
|
||||||
<MonacoButton variant="ghost" size="sm">
|
|
||||||
View Details
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
|
|
||||||
<!-- Member Status -->
|
|
||||||
<GlassCard
|
|
||||||
title="Member Status"
|
|
||||||
variant="gradient"
|
|
||||||
:delay="500"
|
|
||||||
class="dashboard-member-status"
|
|
||||||
>
|
|
||||||
<div class="member-status">
|
|
||||||
<div class="member-status__badge">
|
|
||||||
<span class="badge badge--active">Active Member</span>
|
|
||||||
</div>
|
|
||||||
<div class="member-status__info">
|
|
||||||
<div class="status-item">
|
|
||||||
<span class="status-item__label">Dues Status</span>
|
|
||||||
<span class="status-item__value status-item__value--success">Paid</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-item">
|
|
||||||
<span class="status-item__label">Next Payment</span>
|
|
||||||
<span class="status-item__value">January 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-item">
|
|
||||||
<span class="status-item__label">Member Since</span>
|
|
||||||
<span class="status-item__value">March 2023</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<MonacoButton variant="primary" block>
|
|
||||||
Manage Membership
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<GlassCard
|
|
||||||
title="Quick Actions"
|
|
||||||
variant="glass"
|
|
||||||
:delay="550"
|
|
||||||
class="dashboard-actions"
|
|
||||||
>
|
|
||||||
<div class="quick-actions">
|
|
||||||
<button
|
|
||||||
v-for="(action, index) in quickActions"
|
|
||||||
:key="action.label"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, scale: 0.8 }"
|
|
||||||
:enter="{
|
|
||||||
opacity: 1,
|
|
||||||
scale: 1,
|
|
||||||
transition: { delay: 600 + (index * 50) }
|
|
||||||
}"
|
|
||||||
class="action-button"
|
|
||||||
>
|
|
||||||
<span class="action-button__icon">{{ action.icon }}</span>
|
|
||||||
<span class="action-button__label">{{ action.label }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import GlassCard from '~/components/ui/GlassCard.vue'
|
|
||||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
||||||
import StatsCard from '~/components/ui/StatsCard.vue'
|
|
||||||
|
|
||||||
const userName = ref('John')
|
|
||||||
|
|
||||||
const stats = ref([
|
|
||||||
{
|
|
||||||
label: 'Total Members',
|
|
||||||
value: 1234,
|
|
||||||
icon: 'users',
|
|
||||||
trend: { type: 'up', value: 12 },
|
|
||||||
sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 95]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Events This Month',
|
|
||||||
value: 8,
|
|
||||||
icon: 'calendar',
|
|
||||||
suffix: ' events',
|
|
||||||
trend: { type: 'up', value: 33 }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Dues Collected',
|
|
||||||
value: 45670,
|
|
||||||
icon: 'dollar',
|
|
||||||
prefix: '$',
|
|
||||||
trend: { type: 'up', value: 5 },
|
|
||||||
progress: 78
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Active Projects',
|
|
||||||
value: 12,
|
|
||||||
icon: 'briefcase',
|
|
||||||
trend: { type: 'neutral', value: 0 }
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const recentActivities = ref([
|
|
||||||
{
|
|
||||||
icon: '👤',
|
|
||||||
type: 'member',
|
|
||||||
text: 'New member John Doe joined',
|
|
||||||
time: '2 hours ago'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '📅',
|
|
||||||
type: 'event',
|
|
||||||
text: 'Summer Gala event created',
|
|
||||||
time: '5 hours ago'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '💳',
|
|
||||||
type: 'payment',
|
|
||||||
text: 'Sarah Smith paid dues',
|
|
||||||
time: '1 day ago'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '📝',
|
|
||||||
type: 'update',
|
|
||||||
text: 'Board meeting minutes posted',
|
|
||||||
time: '2 days ago'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const upcomingEvents = ref([
|
|
||||||
{
|
|
||||||
day: '15',
|
|
||||||
month: 'DEC',
|
|
||||||
title: 'Monaco Winter Gala',
|
|
||||||
location: 'Grand Ballroom',
|
|
||||||
attendees: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '22',
|
|
||||||
month: 'DEC',
|
|
||||||
title: 'Board Meeting',
|
|
||||||
location: 'Conference Room A',
|
|
||||||
attendees: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '31',
|
|
||||||
month: 'DEC',
|
|
||||||
title: 'New Year Celebration',
|
|
||||||
location: 'Monaco Club',
|
|
||||||
attendees: 200
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const quickActions = ref([
|
|
||||||
{ icon: '📝', label: 'Register for Event' },
|
|
||||||
{ icon: '💳', label: 'Pay Dues' },
|
|
||||||
{ icon: '📊', label: 'View Reports' },
|
|
||||||
{ icon: '👥', label: 'Member Directory' },
|
|
||||||
{ icon: '📧', label: 'Send Newsletter' },
|
|
||||||
{ icon: '⚙️', label: 'Settings' }
|
|
||||||
])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.dashboard-mockup {
|
|
||||||
padding: 2rem;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__subtitle {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #6b7280;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(12, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
|
|
||||||
.dashboard-activity {
|
|
||||||
grid-column: span 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-events {
|
|
||||||
grid-column: span 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-member-status {
|
|
||||||
grid-column: span 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-actions {
|
|
||||||
grid-column: span 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: background 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
margin: 0 0 0.25rem;
|
|
||||||
color: #27272a;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
&--member {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--event {
|
|
||||||
background: rgba(168, 85, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--payment {
|
|
||||||
background: rgba(16, 185, 129, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--update {
|
|
||||||
background: rgba(251, 146, 60, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__date {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__day {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__month {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0 0 0.25rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__location {
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__attendees {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #dc2626;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-status {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
|
|
||||||
&__badge {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
|
|
||||||
&--success {
|
|
||||||
color: #10b981;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-actions {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-button {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.dashboard-grid {
|
|
||||||
.dashboard-activity,
|
|
||||||
.dashboard-events,
|
|
||||||
.dashboard-member-status,
|
|
||||||
.dashboard-actions {
|
|
||||||
grid-column: span 12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-actions {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.dashboard-header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
button {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stats {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,304 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container>
|
|
||||||
<!-- Dues Payment Banner -->
|
|
||||||
<DuesPaymentBanner />
|
|
||||||
|
|
||||||
<!-- 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 Member Portal
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
|
||||||
<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="primary" class="mb-2">mdi-account</v-icon>
|
|
||||||
<h3 class="mb-2">My Profile</h3>
|
|
||||||
<p class="text-body-2 mb-4">View and update your information</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="navigateToProfile"
|
|
||||||
>
|
|
||||||
View Profile
|
|
||||||
</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="primary" class="mb-2">mdi-calendar</v-icon>
|
|
||||||
<h3 class="mb-2">Events</h3>
|
|
||||||
<p class="text-body-2 mb-4">View upcoming association events</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="navigateToEvents"
|
|
||||||
>
|
|
||||||
View Events
|
|
||||||
</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="primary" class="mb-2">mdi-file-document</v-icon>
|
|
||||||
<h3 class="mb-2">Resources</h3>
|
|
||||||
<p class="text-body-2 mb-4">Access member resources</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="navigateToResources"
|
|
||||||
>
|
|
||||||
View Resources
|
|
||||||
</v-btn>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Recent Activity Section -->
|
|
||||||
<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-clock-outline</v-icon>
|
|
||||||
Recent Activity
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text class="pa-4">
|
|
||||||
<v-list>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Welcome to MonacoUSA Portal!</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
You've successfully logged in to your member dashboard.
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
<v-list-item-action>
|
|
||||||
<v-chip color="success" size="small">New</v-chip>
|
|
||||||
</v-list-item-action>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- Member Information -->
|
|
||||||
<v-row>
|
|
||||||
<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-information-outline</v-icon>
|
|
||||||
Member Information
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text class="pa-4">
|
|
||||||
<v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
|
|
||||||
<div v-else-if="error" class="text-error text-center pa-4">
|
|
||||||
<v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
|
|
||||||
<div>Failed to load member information</div>
|
|
||||||
</div>
|
|
||||||
<v-list v-else>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Member ID</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<v-chip color="primary" size="small" variant="outlined">
|
|
||||||
{{ memberInfo?.memberId || 'Not assigned' }}
|
|
||||||
</v-chip>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Name</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Email</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Phone</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Nationality</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Member Since</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Dues Status</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<v-chip
|
|
||||||
:color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
{{ memberInfo?.duesStatus || 'Unknown' }}
|
|
||||||
</v-chip>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Last Payment</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>Member Type</v-list-item-title>
|
|
||||||
<v-list-item-subtitle>
|
|
||||||
<v-chip color="primary" size="small">{{ userTier.toUpperCase() }}</v-chip>
|
|
||||||
</v-list-item-subtitle>
|
|
||||||
</v-list-item-content>
|
|
||||||
</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-help-circle-outline</v-icon>
|
|
||||||
Need Help?
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text class="pa-4">
|
|
||||||
<p class="mb-4">
|
|
||||||
If you need assistance or have questions about your membership,
|
|
||||||
please don't hesitate to contact our support team.
|
|
||||||
</p>
|
|
||||||
<v-btn
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
style="border-color: #a31515; color: #a31515;"
|
|
||||||
@click="contactSupport"
|
|
||||||
>
|
|
||||||
<v-icon start>mdi-email</v-icon>
|
|
||||||
Contact Support
|
|
||||||
</v-btn>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { Member } from '~/utils/types';
|
|
||||||
|
|
||||||
definePageMeta({
|
|
||||||
layout: 'dashboard',
|
|
||||||
middleware: 'auth'
|
|
||||||
});
|
|
||||||
|
|
||||||
const { firstName, user, userTier } = useAuth();
|
|
||||||
|
|
||||||
// Fetch complete member data
|
|
||||||
const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
|
|
||||||
server: false
|
|
||||||
});
|
|
||||||
|
|
||||||
const member = computed(() => memberData.value?.member);
|
|
||||||
|
|
||||||
// Format member information for display
|
|
||||||
const memberInfo = computed(() => {
|
|
||||||
if (!member.value) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
memberId: member.value.member_id || 'Not assigned',
|
|
||||||
fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
|
|
||||||
email: member.value.email || 'Not provided',
|
|
||||||
phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
|
|
||||||
nationality: member.value.nationality || 'Not provided',
|
|
||||||
memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
|
|
||||||
duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
|
|
||||||
membershipStatus: member.value.membership_status || 'Active',
|
|
||||||
lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
|
|
||||||
dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Navigation methods (placeholder implementations)
|
|
||||||
const navigateToProfile = () => {
|
|
||||||
navigateTo('/dashboard/profile');
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigateToEvents = () => {
|
|
||||||
// TODO: Implement events navigation
|
|
||||||
console.log('Navigate to events');
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigateToResources = () => {
|
|
||||||
// TODO: Implement resources navigation
|
|
||||||
console.log('Navigate to resources');
|
|
||||||
};
|
|
||||||
|
|
||||||
const contactSupport = () => {
|
|
||||||
const subject = encodeURIComponent('MonacoUSA Portal Support Request');
|
|
||||||
const body = encodeURIComponent(`Hello,
|
|
||||||
|
|
||||||
I need assistance with:
|
|
||||||
|
|
||||||
[Please describe your issue]
|
|
||||||
|
|
||||||
Member ID: ${memberInfo.value?.memberId || 'Not provided'}
|
|
||||||
Name: ${memberInfo.value?.fullName || 'Not provided'}
|
|
||||||
Email: ${memberInfo.value?.email || 'Not provided'}
|
|
||||||
|
|
||||||
Thank you!`);
|
|
||||||
|
|
||||||
window.open(`mailto:support@monacousa.org?subject=${subject}&body=${body}`, '_self');
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.v-card {
|
|
||||||
border-radius: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
transition: transform 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-btn {
|
|
||||||
text-transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-icon {
|
|
||||||
color: #a31515 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body-2 {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,710 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="events-mockup">
|
|
||||||
<!-- Header -->
|
|
||||||
<header class="events-header">
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: -20 }"
|
|
||||||
:enter="{ opacity: 1, y: 0 }"
|
|
||||||
class="events-header__content"
|
|
||||||
>
|
|
||||||
<h1 class="events-header__title">Events</h1>
|
|
||||||
<p class="events-header__subtitle">Discover and join MonacoUSA events</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: -20 }"
|
|
||||||
:enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
|
|
||||||
class="events-header__actions"
|
|
||||||
>
|
|
||||||
<FloatingInput
|
|
||||||
v-model="searchQuery"
|
|
||||||
label="Search events..."
|
|
||||||
leftIcon="search"
|
|
||||||
variant="glass"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<MonacoButton variant="primary" icon="plus">
|
|
||||||
Create Event
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Filter Bar -->
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: 20 }"
|
|
||||||
:enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
|
|
||||||
class="events-filters"
|
|
||||||
>
|
|
||||||
<div class="filter-chips">
|
|
||||||
<button
|
|
||||||
v-for="filter in filters"
|
|
||||||
:key="filter.value"
|
|
||||||
class="filter-chip"
|
|
||||||
:class="{ 'filter-chip--active': selectedFilter === filter.value }"
|
|
||||||
@click="selectedFilter = filter.value"
|
|
||||||
>
|
|
||||||
{{ filter.label }}
|
|
||||||
<span v-if="filter.count" class="filter-chip__count">{{ filter.count }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="view-toggles">
|
|
||||||
<button
|
|
||||||
class="view-toggle"
|
|
||||||
:class="{ 'view-toggle--active': viewMode === 'grid' }"
|
|
||||||
@click="viewMode = 'grid'"
|
|
||||||
>
|
|
||||||
<span>⊞</span> Grid
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="view-toggle"
|
|
||||||
:class="{ 'view-toggle--active': viewMode === 'list' }"
|
|
||||||
@click="viewMode = 'list'"
|
|
||||||
>
|
|
||||||
<span>☰</span> List
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Events Grid/List -->
|
|
||||||
<div
|
|
||||||
class="events-container"
|
|
||||||
:class="`events-container--${viewMode}`"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(event, index) in events"
|
|
||||||
:key="event.id"
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0, y: 30 }"
|
|
||||||
:enter="{
|
|
||||||
opacity: 1,
|
|
||||||
y: 0,
|
|
||||||
transition: {
|
|
||||||
delay: 300 + (index * 50),
|
|
||||||
type: 'spring',
|
|
||||||
stiffness: 200,
|
|
||||||
damping: 20
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
class="event-card-full"
|
|
||||||
:class="{ 'event-card-full--featured': event.featured }"
|
|
||||||
>
|
|
||||||
<div class="event-card-full__image">
|
|
||||||
<img :src="event.image" :alt="event.title" />
|
|
||||||
<div v-if="event.featured" class="event-card-full__badge">Featured</div>
|
|
||||||
<div class="event-card-full__date-overlay">
|
|
||||||
<span class="date-day">{{ event.date.day }}</span>
|
|
||||||
<span class="date-month">{{ event.date.month }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="event-card-full__content">
|
|
||||||
<div class="event-card-full__header">
|
|
||||||
<h3 class="event-card-full__title">{{ event.title }}</h3>
|
|
||||||
<span class="event-card-full__category">{{ event.category }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="event-card-full__description">{{ event.description }}</p>
|
|
||||||
|
|
||||||
<div class="event-card-full__meta">
|
|
||||||
<div class="meta-item">
|
|
||||||
<span class="meta-icon">📍</span>
|
|
||||||
<span class="meta-text">{{ event.location }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="meta-item">
|
|
||||||
<span class="meta-icon">🕐</span>
|
|
||||||
<span class="meta-text">{{ event.time }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="meta-item">
|
|
||||||
<span class="meta-icon">👥</span>
|
|
||||||
<span class="meta-text">{{ event.attendees }} attending</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="event-card-full__footer">
|
|
||||||
<div class="event-card-full__price">
|
|
||||||
<span v-if="event.price === 0" class="price-free">Free</span>
|
|
||||||
<span v-else class="price-amount">${{ event.price }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="event-card-full__actions">
|
|
||||||
<MonacoButton variant="ghost" size="sm" icon="heart">
|
|
||||||
Save
|
|
||||||
</MonacoButton>
|
|
||||||
<MonacoButton variant="primary" size="sm">
|
|
||||||
Register
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Load More -->
|
|
||||||
<div
|
|
||||||
v-motion
|
|
||||||
:initial="{ opacity: 0 }"
|
|
||||||
:enter="{ opacity: 1, transition: { delay: 800 } }"
|
|
||||||
class="load-more"
|
|
||||||
>
|
|
||||||
<MonacoButton variant="glass" icon="refresh" block>
|
|
||||||
Load More Events
|
|
||||||
</MonacoButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Floating Calendar Widget -->
|
|
||||||
<GlassCard
|
|
||||||
variant="glass"
|
|
||||||
class="calendar-widget"
|
|
||||||
:animated="true"
|
|
||||||
:delay="900"
|
|
||||||
>
|
|
||||||
<h4 class="calendar-widget__title">Quick Calendar</h4>
|
|
||||||
<div class="calendar-mini">
|
|
||||||
<div class="calendar-mini__header">
|
|
||||||
<button class="calendar-nav">‹</button>
|
|
||||||
<span class="calendar-month">December 2024</span>
|
|
||||||
<button class="calendar-nav">›</button>
|
|
||||||
</div>
|
|
||||||
<div class="calendar-mini__grid">
|
|
||||||
<div
|
|
||||||
v-for="day in 31"
|
|
||||||
:key="day"
|
|
||||||
class="calendar-day"
|
|
||||||
:class="{
|
|
||||||
'calendar-day--event': [5, 12, 15, 22, 31].includes(day),
|
|
||||||
'calendar-day--today': day === 10
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ day }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import GlassCard from '~/components/ui/GlassCard.vue'
|
|
||||||
import MonacoButton from '~/components/ui/MonacoButton.vue'
|
|
||||||
import FloatingInput from '~/components/ui/FloatingInput.vue'
|
|
||||||
|
|
||||||
const searchQuery = ref('')
|
|
||||||
const selectedFilter = ref('all')
|
|
||||||
const viewMode = ref('grid')
|
|
||||||
|
|
||||||
const filters = ref([
|
|
||||||
{ label: 'All Events', value: 'all', count: 24 },
|
|
||||||
{ label: 'Upcoming', value: 'upcoming', count: 12 },
|
|
||||||
{ label: 'This Week', value: 'week', count: 5 },
|
|
||||||
{ label: 'This Month', value: 'month', count: 8 },
|
|
||||||
{ label: 'Free', value: 'free', count: 7 },
|
|
||||||
{ label: 'Members Only', value: 'members', count: 10 }
|
|
||||||
])
|
|
||||||
|
|
||||||
const events = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: 'Monaco Winter Gala 2024',
|
|
||||||
category: 'Social',
|
|
||||||
description: 'Join us for an elegant evening celebrating the Monaco-US friendship with fine dining, live entertainment, and networking.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '15', month: 'DEC' },
|
|
||||||
time: '7:00 PM - 11:00 PM',
|
|
||||||
location: 'Grand Ballroom, Downtown',
|
|
||||||
attendees: 120,
|
|
||||||
price: 150,
|
|
||||||
featured: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: 'Business Networking Lunch',
|
|
||||||
category: 'Networking',
|
|
||||||
description: 'Connect with fellow Monaco-US business professionals over lunch and expand your network.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '18', month: 'DEC' },
|
|
||||||
time: '12:00 PM - 2:00 PM',
|
|
||||||
location: 'Monaco Club',
|
|
||||||
attendees: 45,
|
|
||||||
price: 35,
|
|
||||||
featured: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: 'Cultural Exchange Workshop',
|
|
||||||
category: 'Education',
|
|
||||||
description: 'Learn about Monaco culture, history, and traditions in this interactive workshop.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '20', month: 'DEC' },
|
|
||||||
time: '3:00 PM - 5:00 PM',
|
|
||||||
location: 'Community Center',
|
|
||||||
attendees: 30,
|
|
||||||
price: 0,
|
|
||||||
featured: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: 'New Year Celebration',
|
|
||||||
category: 'Social',
|
|
||||||
description: 'Ring in the new year with the MonacoUSA community! Champagne toast, live music, and dancing.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '31', month: 'DEC' },
|
|
||||||
time: '9:00 PM - 2:00 AM',
|
|
||||||
location: 'Monaco Club Rooftop',
|
|
||||||
attendees: 200,
|
|
||||||
price: 200,
|
|
||||||
featured: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: 'Wine Tasting Evening',
|
|
||||||
category: 'Social',
|
|
||||||
description: 'Discover exceptional wines from Monaco and France guided by our sommelier.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '22', month: 'DEC' },
|
|
||||||
time: '6:00 PM - 9:00 PM',
|
|
||||||
location: 'Wine Gallery',
|
|
||||||
attendees: 60,
|
|
||||||
price: 75,
|
|
||||||
featured: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: 'Board Meeting',
|
|
||||||
category: 'Meeting',
|
|
||||||
description: 'Monthly board meeting to discuss club activities and initiatives.',
|
|
||||||
image: '/api/placeholder/400/250',
|
|
||||||
date: { day: '28', month: 'DEC' },
|
|
||||||
time: '5:00 PM - 7:00 PM',
|
|
||||||
location: 'Conference Room A',
|
|
||||||
attendees: 15,
|
|
||||||
price: 0,
|
|
||||||
featured: false
|
|
||||||
}
|
|
||||||
])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.events-mockup {
|
|
||||||
padding: 2rem;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1.5rem;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #27272a;
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__subtitle {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
color: #6b7280;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.floating-input {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-filters {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-chips {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #6b7280;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
border-color: #dc2626;
|
|
||||||
|
|
||||||
.filter-chip__count {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggles {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #6b7280;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
background: white;
|
|
||||||
color: #dc2626;
|
|
||||||
border-color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-container {
|
|
||||||
display: grid;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
&--grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
&--list {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card-full {
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--featured {
|
|
||||||
border: 2px solid #dc2626;
|
|
||||||
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
position: relative;
|
|
||||||
height: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 1rem;
|
|
||||||
left: 1rem;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__date-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.date-day {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-month {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #6b7280;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
flex: 1;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__category {
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
color: #dc2626;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__description {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid rgba(220, 38, 38, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__price {
|
|
||||||
.price-free {
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
background: rgba(16, 185, 129, 0.1);
|
|
||||||
color: #10b981;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-amount {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #6b7280;
|
|
||||||
|
|
||||||
.meta-icon {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 2rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-widget {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
width: 280px;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-mini {
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-nav {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #dc2626;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-month {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-day {
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #6b7280;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--event {
|
|
||||||
background: rgba(220, 38, 38, 0.1);
|
|
||||||
color: #dc2626;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--today {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.events-header {
|
|
||||||
&__actions {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.floating-input {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-container--grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-widget {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue