532 lines
20 KiB
HTML
Executable File
532 lines
20 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
|
<title>Subscribers - MSPE Admin</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="/admin/css/admin.css">
|
|
<style>
|
|
.subscribers-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.stat-card h4 {
|
|
font-size: 0.875rem;
|
|
color: var(--gray-500);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-card .value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.subscribers-table-container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-header {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-header h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.subscribers-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.subscribers-table th {
|
|
background: var(--gray-100);
|
|
padding: 1rem 1.5rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.subscribers-table td {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.subscribers-table tr:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-active {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.status-inactive {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
margin-right: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn.delete {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.action-btn.delete:hover {
|
|
background: #fecaca;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.export-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-wrapper">
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="/admin/dashboard.html" class="sidebar-logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span>MSPE</span>
|
|
</a>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Main</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/dashboard.html" class="nav-link">
|
|
<i class="fas fa-th-large"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Content</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/pages.html" class="nav-link">
|
|
<i class="fas fa-file-alt"></i>
|
|
<span>Pages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/services.html" class="nav-link">
|
|
<i class="fas fa-concierge-bell"></i>
|
|
<span>Services</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/portfolio.html" class="nav-link">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/news.html" class="nav-link">
|
|
<i class="fas fa-newspaper"></i>
|
|
<span>News & Events</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/testimonials.html" class="nav-link">
|
|
<i class="fas fa-quote-right"></i>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/team.html" class="nav-link">
|
|
<i class="fas fa-users"></i>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Media</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/media.html" class="nav-link">
|
|
<i class="fas fa-images"></i>
|
|
<span>Media Library</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Inquiries</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/messages.html" class="nav-link">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/admin/subscribers.html" class="nav-link">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Subscribers</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/bookings.html" class="nav-link">
|
|
<i class="fas fa-calendar-check"></i>
|
|
<span>Bookings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-section-title">Settings</span>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="/admin/settings.html" class="nav-link">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Site Settings</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/admin/users.html" class="nav-link">
|
|
<i class="fas fa-user-shield"></i>
|
|
<span>Admin Users</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<a href="/index.html" class="view-site-btn" target="_blank">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
<span>View Website</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="admin-header">
|
|
<div class="header-left">
|
|
<button class="mobile-toggle" id="mobile-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<h1 class="page-title">Newsletter Subscribers</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<button class="btn btn-primary export-btn" onclick="exportSubscribers()">
|
|
<i class="fas fa-download"></i> Export CSV
|
|
</button>
|
|
|
|
<div class="header-user">
|
|
<div class="user-avatar">
|
|
<img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="Admin">
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Admin</span>
|
|
<span class="user-role">Administrator</span>
|
|
</div>
|
|
<div class="user-dropdown">
|
|
<button class="dropdown-toggle">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/admin/settings.html"><i class="fas fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<h4>Total Subscribers</h4>
|
|
<div class="value" id="total-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>Active Subscribers</h4>
|
|
<div class="value" id="active-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>This Month</h4>
|
|
<div class="value" id="month-count">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="subscribers-table-container">
|
|
<div class="table-header">
|
|
<h3>Subscriber List</h3>
|
|
<div class="header-search" style="max-width: 250px;">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" placeholder="Search subscribers..." id="search-input">
|
|
</div>
|
|
</div>
|
|
|
|
<table class="subscribers-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Subscribed</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="subscribers-table-body">
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="empty-state">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading subscribers...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/admin/js/admin.js"></script>
|
|
<script>
|
|
let allSubscribers = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadSubscribers();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.getElementById('search-input').addEventListener('input', MSPE.debounce(filterSubscribers, 300));
|
|
}
|
|
|
|
async function loadSubscribers() {
|
|
try {
|
|
const response = await MSPE.API.get('subscribe.php');
|
|
|
|
if (response && response.success) {
|
|
allSubscribers = response.data || [];
|
|
updateStats();
|
|
renderSubscribers(allSubscribers);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load subscribers:', error);
|
|
document.getElementById('subscribers-table-body').innerHTML = `
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<p>Failed to load subscribers</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function updateStats() {
|
|
const total = allSubscribers.length;
|
|
const active = allSubscribers.filter(s => s.status === 'active').length;
|
|
|
|
// This month
|
|
const now = new Date();
|
|
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
const thisMonth = allSubscribers.filter(s =>
|
|
new Date(s.created_at) >= monthStart
|
|
).length;
|
|
|
|
document.getElementById('total-count').textContent = total;
|
|
document.getElementById('active-count').textContent = active;
|
|
document.getElementById('month-count').textContent = thisMonth;
|
|
}
|
|
|
|
function renderSubscribers(subscribers) {
|
|
const tbody = document.getElementById('subscribers-table-body');
|
|
|
|
if (!subscribers || subscribers.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="empty-state">
|
|
<i class="fas fa-users"></i>
|
|
<p>No subscribers yet</p>
|
|
<span style="font-size: 0.875rem;">Subscribers from your newsletter signup will appear here</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = subscribers.map(subscriber => {
|
|
const date = new Date(subscriber.created_at);
|
|
const formattedDate = date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
const statusClass = subscriber.status === 'active' ? 'status-active' : 'status-inactive';
|
|
|
|
return `
|
|
<tr data-id="${subscriber.id}">
|
|
<td>${subscriber.name || 'Unknown'}</td>
|
|
<td>
|
|
<a href="mailto:${subscriber.email}" style="color: var(--primary);">
|
|
${subscriber.email}
|
|
</a>
|
|
</td>
|
|
<td>${formattedDate}</td>
|
|
<td>
|
|
<span class="status-badge ${statusClass}">${subscriber.status}</span>
|
|
</td>
|
|
<td>
|
|
<button class="action-btn delete" onclick="deleteSubscriber('${subscriber.id}')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function filterSubscribers() {
|
|
const search = document.getElementById('search-input').value.toLowerCase();
|
|
|
|
if (!search) {
|
|
renderSubscribers(allSubscribers);
|
|
return;
|
|
}
|
|
|
|
const filtered = allSubscribers.filter(s =>
|
|
(s.name && s.name.toLowerCase().includes(search)) ||
|
|
s.email.toLowerCase().includes(search)
|
|
);
|
|
|
|
renderSubscribers(filtered);
|
|
}
|
|
|
|
async function deleteSubscriber(id) {
|
|
if (!await MSPE.confirmDialog('Are you sure you want to delete this subscriber?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await MSPE.API.delete(`subscribe.php?id=${id}`);
|
|
|
|
if (response && response.success) {
|
|
MSPE.showNotification('Subscriber deleted successfully', 'success');
|
|
allSubscribers = allSubscribers.filter(s => s.id !== id);
|
|
updateStats();
|
|
renderSubscribers(allSubscribers);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to delete subscriber:', error);
|
|
MSPE.showNotification('Failed to delete subscriber', 'error');
|
|
}
|
|
}
|
|
|
|
function exportSubscribers() {
|
|
if (allSubscribers.length === 0) {
|
|
MSPE.showNotification('No subscribers to export', 'error');
|
|
return;
|
|
}
|
|
|
|
const activeSubscribers = allSubscribers.filter(s => s.status === 'active');
|
|
|
|
const csv = [
|
|
['Name', 'Email', 'Subscribed Date', 'Status'].join(','),
|
|
...activeSubscribers.map(s => [
|
|
`"${s.name || ''}"`,
|
|
`"${s.email}"`,
|
|
`"${new Date(s.created_at).toLocaleDateString()}"`,
|
|
`"${s.status}"`
|
|
].join(','))
|
|
].join('\n');
|
|
|
|
const blob = new Blob([csv], { type: 'text/csv' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `subscribers-${new Date().toISOString().split('T')[0]}.csv`;
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
MSPE.showNotification(`Exported ${activeSubscribers.length} subscribers`, 'success');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|