651 lines
34 KiB
HTML
651 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MonacoUSA Portal - Board Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: linear-gradient(135deg, #fff5f5 0%, #ffffff 25%, #fef2f2 50%, #ffffff 75%, #fff5f5 100%);
|
|
}
|
|
|
|
/* Monaco Gradients */
|
|
.monaco-gradient {
|
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
|
}
|
|
|
|
.monaco-gradient-dark {
|
|
background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
|
|
}
|
|
|
|
.monaco-gradient-vibrant {
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
|
|
}
|
|
|
|
/* Glass Effects */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.08);
|
|
}
|
|
|
|
.glass-red {
|
|
background: linear-gradient(135deg, rgba(254, 202, 202, 0.3) 0%, rgba(252, 165, 165, 0.2) 100%);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(220, 38, 38, 0.15);
|
|
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.12);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Animated Elements */
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(100px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from { transform: translateY(30px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.slide-in-right {
|
|
animation: slideInRight 0.8s ease-out;
|
|
}
|
|
|
|
.slide-in-up {
|
|
animation: slideInUp 0.6s ease-out;
|
|
}
|
|
|
|
/* Status Indicators */
|
|
@keyframes pulse-green {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
|
|
70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
|
|
}
|
|
|
|
@keyframes pulse-red {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
|
|
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
|
|
}
|
|
|
|
@keyframes pulse-amber {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
|
|
70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
|
|
}
|
|
|
|
.pulse-green { animation: pulse-green 2s infinite; }
|
|
.pulse-red { animation: pulse-red 2s infinite; }
|
|
.pulse-amber { animation: pulse-amber 2s infinite; }
|
|
|
|
/* Card Effects */
|
|
.card-3d {
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.card-3d:hover {
|
|
transform: translateY(-10px) rotateX(5deg) scale(1.02);
|
|
box-shadow: 0 30px 60px rgba(220, 38, 38, 0.2);
|
|
}
|
|
|
|
/* Gradient Text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Floating Elements */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(2deg); }
|
|
}
|
|
|
|
.floating {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Shimmer Effect */
|
|
@keyframes shimmer {
|
|
0% { background-position: -1000px 0; }
|
|
100% { background-position: 1000px 0; }
|
|
}
|
|
|
|
.shimmer {
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
|
|
background-size: 1000px 100%;
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
|
|
/* Data Grid Styles */
|
|
.data-row {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.data-row:hover {
|
|
background: linear-gradient(90deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Chart Container */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen overflow-x-hidden">
|
|
<!-- Animated Background -->
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute -top-40 -right-40 w-80 h-80 bg-red-200 rounded-full opacity-20 blur-3xl floating"></div>
|
|
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-red-100 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 2s;"></div>
|
|
<div class="absolute top-1/2 left-1/3 w-60 h-60 bg-red-300 rounded-full opacity-10 blur-3xl floating" style="animation-delay: 4s;"></div>
|
|
</div>
|
|
|
|
<!-- Executive Header -->
|
|
<header class="fixed top-0 left-0 right-0 z-50 glass border-b border-red-100">
|
|
<div class="px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Brand -->
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative group">
|
|
<div class="absolute inset-0 monaco-gradient rounded-xl blur opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
|
<div class="relative w-12 h-12 bg-white rounded-xl overflow-hidden shadow-xl">
|
|
<div class="h-1/2 bg-red-600"></div>
|
|
<div class="h-1/2 bg-white"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold gradient-text">MonacoUSA Portal</h1>
|
|
<p class="text-xs text-gray-600 font-medium">Board Executive Dashboard</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Controls -->
|
|
<div class="hidden lg:flex items-center space-x-4">
|
|
<div class="flex items-center space-x-2 px-4 py-2 glass-red rounded-full">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full pulse-green"></div>
|
|
<span class="text-sm font-medium text-gray-700">System Status: Operational</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 px-4 py-2 glass rounded-full">
|
|
<i data-lucide="users" class="w-4 h-4 text-gray-500"></i>
|
|
<span class="text-sm font-medium text-gray-700">287 Active Members</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center space-x-3">
|
|
<button class="px-4 py-2 monaco-gradient text-white rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
|
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
|
<span>Add Member</span>
|
|
</button>
|
|
<button class="px-4 py-2 glass hover:bg-red-50 rounded-lg font-semibold transition-all flex items-center space-x-2">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
<span>Export</span>
|
|
</button>
|
|
|
|
<!-- Profile -->
|
|
<div class="flex items-center space-x-3 pl-3 ml-3 border-l border-gray-200">
|
|
<div class="text-right">
|
|
<p class="text-sm font-semibold text-gray-900">Board Executive</p>
|
|
<p class="text-xs text-red-600">Administrative Access</p>
|
|
</div>
|
|
<div class="relative">
|
|
<img src="https://ui-avatars.com/api/?name=Board+Executive&background=dc2626&color=fff&bold=true"
|
|
alt="Profile" class="w-11 h-11 rounded-full ring-2 ring-red-200">
|
|
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Executive Sidebar -->
|
|
<aside class="fixed left-0 top-20 bottom-0 w-72 glass-dark border-r border-red-100/20 overflow-y-auto">
|
|
<!-- Quick Stats Panel -->
|
|
<div class="p-6 border-b border-red-100/20">
|
|
<div class="glass-red rounded-2xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-3">Today's Overview</h3>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold gradient-text">43</p>
|
|
<p class="text-xs text-gray-600">Overdue</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-green-600">$43K</p>
|
|
<p class="text-xs text-gray-600">Revenue</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-blue-600">89%</p>
|
|
<p class="text-xs text-gray-600">Attendance</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-purple-600">15</p>
|
|
<p class="text-xs text-gray-600">New</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="p-4">
|
|
<div class="space-y-1">
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl monaco-gradient text-white font-medium shadow-lg">
|
|
<i data-lucide="shield" class="w-5 h-5"></i>
|
|
<span>Executive Overview</span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="users" class="w-5 h-5"></i>
|
|
<span>Member Management</span>
|
|
<span class="ml-auto text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">43</span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="credit-card" class="w-5 h-5"></i>
|
|
<span>Dues & Revenue</span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
<span>Event Planning</span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
|
<span>Analytics</span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
|
<span>Communications</span>
|
|
<span class="ml-auto w-2 h-2 bg-red-500 rounded-full pulse-red"></span>
|
|
</a>
|
|
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Board Access Badge -->
|
|
<div class="absolute bottom-4 left-4 right-4">
|
|
<div class="monaco-gradient rounded-xl p-4 text-white text-center">
|
|
<i data-lucide="shield-check" class="w-8 h-8 mx-auto mb-2"></i>
|
|
<p class="text-xs font-semibold">BOARD EXECUTIVE</p>
|
|
<p class="text-xs opacity-80">Full Administrative Access</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="ml-72 mt-20 p-8">
|
|
<!-- Executive Header -->
|
|
<div class="mb-8 slide-in-right">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-4xl font-bold gradient-text mb-2">Board Executive Dashboard</h2>
|
|
<p class="text-gray-600">Real-time organization management and insights</p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-right">
|
|
<p class="text-sm text-gray-500">Last Updated</p>
|
|
<p class="text-lg font-semibold text-gray-900">2 min ago</p>
|
|
</div>
|
|
<button class="p-3 glass rounded-xl hover:bg-red-50 transition-colors">
|
|
<i data-lucide="refresh-cw" class="w-5 h-5 text-gray-700"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Total Members KPI -->
|
|
<div class="glass rounded-2xl p-6 card-3d slide-in-up">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-14 h-14 monaco-gradient rounded-xl flex items-center justify-center shadow-lg">
|
|
<i data-lucide="users" class="w-7 h-7 text-white"></i>
|
|
</div>
|
|
<div class="flex items-center space-x-1 text-green-600">
|
|
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
|
<span class="text-sm font-bold">+12%</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-1">Total Members</p>
|
|
<p class="text-3xl font-bold text-gray-900">287</p>
|
|
<div class="mt-4 flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Target: 300</span>
|
|
<div class="w-24 bg-gray-200 rounded-full h-2">
|
|
<div class="monaco-gradient h-2 rounded-full" style="width: 95.7%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenue KPI -->
|
|
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.1s">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i data-lucide="dollar-sign" class="w-7 h-7 text-white"></i>
|
|
</div>
|
|
<div class="flex items-center space-x-1 text-green-600">
|
|
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
|
<span class="text-sm font-bold">+8%</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-1">YTD Revenue</p>
|
|
<p class="text-3xl font-bold text-gray-900">$43,050</p>
|
|
<div class="mt-4 flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Goal: $50,000</span>
|
|
<div class="w-24 bg-gray-200 rounded-full h-2">
|
|
<div class="bg-gradient-to-r from-green-500 to-emerald-600 h-2 rounded-full" style="width: 86%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overdue Dues KPI -->
|
|
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.2s">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i data-lucide="alert-triangle" class="w-7 h-7 text-white"></i>
|
|
</div>
|
|
<span class="px-2 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full pulse-amber">ACTION</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-1">Overdue Dues</p>
|
|
<p class="text-3xl font-bold text-gray-900">43</p>
|
|
<div class="mt-4 flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Amount: $6,450</span>
|
|
<button class="text-amber-600 font-semibold hover:text-amber-700">View All →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Success KPI -->
|
|
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.3s">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i data-lucide="calendar-check" class="w-7 h-7 text-white"></i>
|
|
</div>
|
|
<div class="flex items-center space-x-1 text-green-600">
|
|
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
|
<span class="text-sm font-bold">+25%</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-1">Avg Attendance</p>
|
|
<p class="text-3xl font-bold text-gray-900">89%</p>
|
|
<div class="mt-4 flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Last 3 events</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
|
|
<div class="w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
|
|
<div class="w-6 h-6 bg-amber-500 rounded-full border-2 border-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Priority Actions Banner -->
|
|
<div class="mb-8 slide-in-right">
|
|
<div class="monaco-gradient-vibrant rounded-2xl p-6 text-white relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full blur-3xl opacity-10"></div>
|
|
<div class="relative z-10 flex items-center justify-between">
|
|
<div class="flex items-center space-x-6">
|
|
<div class="w-16 h-16 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center">
|
|
<i data-lucide="alert-circle" class="w-8 h-8"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-1">43 Members with Overdue Dues</h3>
|
|
<p class="text-white/90">Total outstanding amount: $6,450 • Average days overdue: 67</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button class="px-5 py-2.5 bg-white/20 backdrop-blur rounded-lg font-semibold hover:bg-white/30 transition-all">
|
|
View Details
|
|
</button>
|
|
<button class="px-5 py-2.5 bg-white text-red-600 rounded-lg font-semibold hover:shadow-xl transition-all flex items-center space-x-2">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
<span>Send Reminders</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Member Management Panel -->
|
|
<div class="lg:col-span-2">
|
|
<div class="glass rounded-2xl p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-900">Dues Management</h3>
|
|
<div class="flex space-x-2">
|
|
<button class="px-3 py-1.5 text-sm font-medium text-white monaco-gradient rounded-lg">Overdue (43)</button>
|
|
<button class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">Due Soon (5)</button>
|
|
<button class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">Paid (239)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Cards -->
|
|
<div class="space-y-4">
|
|
<!-- Member Card 1 -->
|
|
<div class="glass-red rounded-xl p-4 data-row">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="https://ui-avatars.com/api/?name=Annette+Anderson&background=dc2626&color=fff"
|
|
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Annette Anderson</h4>
|
|
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
|
<span>ID: MUSA-16</span>
|
|
<span>•</span>
|
|
<span class="text-red-600 font-medium">85 days overdue</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-right">
|
|
<p class="text-lg font-bold text-gray-900">$150</p>
|
|
<p class="text-xs text-gray-500">Due Jun 6, 2024</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Card 2 -->
|
|
<div class="glass-red rounded-xl p-4 data-row">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="https://ui-avatars.com/api/?name=Danilo+Copiz&background=dc2626&color=fff"
|
|
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Danilo Copiz</h4>
|
|
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
|
<span>ID: MUSA-19</span>
|
|
<span>•</span>
|
|
<span class="text-red-600 font-medium">85 days overdue</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-right">
|
|
<p class="text-lg font-bold text-gray-900">$150</p>
|
|
<p class="text-xs text-gray-500">Due Jun 6, 2024</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Card 3 -->
|
|
<div class="glass-red rounded-xl p-4 data-row">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="https://ui-avatars.com/api/?name=Ian+Sosso&background=dc2626&color=fff"
|
|
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Ian Sosso</h4>
|
|
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
|
<span>ID: MUSA-78</span>
|
|
<span>•</span>
|
|
<span class="text-red-600 font-medium">81 days overdue</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-right">
|
|
<p class="text-lg font-bold text-gray-900">$150</p>
|
|
<p class="text-xs text-gray-500">Due Jun 10, 2024</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
|
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center">
|
|
<button class="text-red-600 hover:text-red-700 font-semibold">
|
|
View All 43 Overdue Members →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Panel -->
|
|
<div class="space-y-6">
|
|
<!-- Revenue Chart -->
|
|
<div class="glass rounded-2xl p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-4">Revenue Trend</h3>
|
|
<div class="chart-container">
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="glass rounded-2xl p-6">
|
|
<h3 class="text-lg font-bold text-gray-900 mb-4">Quick Actions</h3>
|
|
<div class="space-y-3">
|
|
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="user-plus" class="w-5 h-5 text-red-600"></i>
|
|
<span class="font-medium text-gray-700">Add New Member</span>
|
|
</div>
|
|
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="calendar-plus" class="w-5 h-5 text-red-600"></i>
|
|
<span class="font-medium text-gray-700">Create Event</span>
|
|
</div>
|
|
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-red-600"></i>
|
|
<span class="font-medium text-gray-700">Generate Report</span>
|
|
</div>
|
|
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// Revenue Chart
|
|
const ctx = document.getElementById('revenueChart').getContext('2d');
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 250);
|
|
gradient.addColorStop(0, 'rgba(220, 38, 38, 0.3)');
|
|
gradient.addColorStop(1, 'rgba(220, 38, 38, 0)');
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
|
datasets: [{
|
|
label: 'Revenue',
|
|
data: [32000, 34000, 35500, 38000, 41000, 43050],
|
|
borderColor: '#dc2626',
|
|
backgroundColor: gradient,
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#dc2626',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
callback: function(value) {
|
|
return '$' + (value / 1000) + 'k';
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |