SKYSLIPS Admin

License Management

Dashboard

Overview of your license and subscription system

1,247

Total Licenses

↗ +12% this month

892

Active Subscriptions

↗ +8% this month

189

Trial Users

↗ +15% this month

$12,450

Monthly Revenue

↗ +22% this month

License Distribution

Revenue Trends

Recent Activity

New license activated

john.doe@example.com - Premium Plan

2 minutes ago

Trial period started

jane.smith@example.com - 14-day trial

5 minutes ago

Subscription renewed

mike.wilson@example.com - Professional Plan

12 minutes ago

License Management

Manage all software licenses and activations

All Licenses

License Key	User	Plan	Status	Expires	Actions
SKY-2024-ABC123	john.doe@example.com	Premium	Active	2025-12-31
SKY-2024-DEF456	jane.smith@example.com	Professional	Trial	2024-12-21
SKY-2024-GHI789	mike.wilson@example.com	Basic	Expired	2024-11-15

Subscription Plans

Manage subscription tiers and pricing

Basic

$9/mo

Core features
5 projects
Basic support
Advanced tools

Most Popular

Professional

$19/mo

All Basic features
Unlimited projects
Priority support
Advanced tools

Premium

$39/mo

All Professional features
AI-powered tools
24/7 support
Custom integrations

Subscription Analytics

89%

Retention Rate

$42

Average LTV

3.2%

Churn Rate

User Management

Manage user accounts and permissions

All Users

User	Email	Plan	Status	Last Active	Actions
JD John Doe Admin	john.doe@example.com	Premium	Active	2 minutes ago
JS Jane Smith User	jane.smith@example.com	Trial	Trial	1 hour ago

Analytics

Detailed insights and reporting

User Growth

Revenue by Plan

Key Metrics

2,847

Total Signups

+18% this month

31%

Conversion Rate

+5% this month

$156

ARPU

+12% this month

4.8

Customer Rating

+0.3 this month

Settings

Configure your license system

License Settings

Trial Period (days)

License Key Prefix

Auto-renew Grace Period (days)

API Settings

API Key

Rate Limit (requests/minute)

Webhook URL

"py-3 px-4">${user.id} ${user.name} ${user.email} ${user.plan} ${user.status} ${user.created.toLocaleDateString()}

`; userList.appendChild(row); }); } loadAnalytics() { this.createGrowthChart(); this.createActivityChart(); } createGrowthChart() { const chartDom = document.getElementById('growth-chart'); if (!chartDom) return; const chart = echarts.init(chartDom); // Sample growth data const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']; const newUsers = [45, 52, 61, 58, 67, 73]; const churnedUsers = [12, 8, 15, 11, 9, 13]; const option = { backgroundColor: 'transparent', tooltip: { trigger: 'axis', backgroundColor: 'rgba(10, 10, 10, 0.9)', borderColor: '#00D4FF', textStyle: { color: '#F8FAFB' } }, legend: { data: ['New Users', 'Churned Users'], textStyle: { color: '#F8FAFB' } }, xAxis: { type: 'category', data: months, axisLine: { lineStyle: { color: '#374151' } }, axisLabel: { color: '#9CA3AF' } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#374151' } }, axisLabel: { color: '#9CA3AF' }, splitLine: { lineStyle: { color: '#374151' } } }, series: [ { name: 'New Users', type: 'bar', data: newUsers, itemStyle: { color: '#10B981' } }, { name: 'Churned Users', type: 'bar', data: churnedUsers, itemStyle: { color: '#EF4444' } } ] }; chart.setOption(option); } createActivityChart() { const chartDom = document.getElementById('activity-chart'); if (!chartDom) return; const chart = echarts.init(chartDom); // Sample activity data const hours = []; const activity = []; for (let i = 0; i < 24; i++) { hours.push(`${i}:00`); activity.push(Math.floor(Math.random() * 100) + 20); } const option = { backgroundColor: 'transparent', tooltip: { trigger: 'axis', backgroundColor: 'rgba(10, 10, 10, 0.9)', borderColor: '#00D4FF', textStyle: { color: '#F8FAFB' } }, xAxis: { type: 'category', data: hours, axisLine: { lineStyle: { color: '#374151' } }, axisLabel: { color: '#9CA3AF', interval: 3 } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#374151' } }, axisLabel: { color: '#9CA3AF' }, splitLine: { lineStyle: { color: '#374151' } } }, series: [{ data: activity, type: 'line', smooth: true, lineStyle: { color: '#6366F1', width: 2 }, itemStyle: { color: '#6366F1' }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(99, 102, 241, 0.3)' }, { offset: 1, color: 'rgba(99, 102, 241, 0.1)' } ] } } }] }; chart.setOption(option); } showGenerateLicenseModal() { document.getElementById('generate-license-modal').classList.add('active'); } closeModal(modalId) { document.getElementById(modalId).classList.remove('active'); } closeAllModals() { document.querySelectorAll('.modal').forEach(modal => { modal.classList.remove('active'); }); } generateLicenseKey() { const type = document.getElementById('license-type').value; const email = document.getElementById('user-email').value; const duration = document.getElementById('license-duration').value; if (!email) { this.showNotification('Please enter a valid email address', 'error'); return; } // Generate license key const licenseKey = this.generateLicenseKeyString(); // Add to licenses array this.licenses.unshift({ id: licenseKey, user: email, type: type, status: 'active', created: new Date(), expires: new Date(Date.now() + duration * 30 * 24 * 60 * 60 * 1000), features: ['neural', 'quantum'] }); this.closeModal('generate-license-modal'); this.showNotification(`License ${licenseKey} generated successfully!`); this.loadLicenses(); // Reset form document.getElementById('user-email').value = ''; } generateLicenseKeyString() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let result = 'SKY-'; for (let i = 0; i < 20; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); if ((i + 1) % 4 === 0 && i < 19) result += '-'; } return result; } searchLicenses() { const searchTerm = document.getElementById('license-search').value.toLowerCase(); const rows = document.querySelectorAll('#license-list tr'); rows.forEach(row => { const text = row.textContent.toLowerCase(); row.style.display = text.includes(searchTerm) ? '' : 'none'; }); } filterLicenses() { const statusFilter = document.getElementById('status-filter').value; const typeFilter = document.getElementById('type-filter').value; const rows = document.querySelectorAll('#license-list tr'); rows.forEach(row => { let show = true; if (statusFilter) { const statusCell = row.cells[4]; show = show && statusCell.textContent.toLowerCase().includes(statusFilter); } if (typeFilter) { const typeCell = row.cells[3]; show = show && typeCell.textContent.toLowerCase().includes(typeFilter); } row.style.display = show ? '' : 'none'; }); } resetFilters() { document.getElementById('license-search').value = ''; document.getElementById('status-filter').value = ''; document.getElementById('type-filter').value = ''; this.loadLicenses(); } showNotification(message, type = 'success') { const notification = document.getElementById('notification'); notification.textContent = message; notification.className = `notification ${type === 'error' ? 'bg-red-500' : ''}`; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } logout() { this.showNotification('Logged out successfully'); setTimeout(() => { window.location.href = 'index.html'; }, 1000); } } // Global functions function showSection(sectionName) { adminPanel.showSection(sectionName); } function generateLicense() { adminPanel.showGenerateLicenseModal(); } function showGenerateLicenseModal() { adminPanel.showGenerateLicenseModal(); } function closeModal(modalId) { adminPanel.closeModal(modalId); } function generateLicenseKey() { adminPanel.generateLicenseKey(); } function searchLicenses() { adminPanel.searchLicenses(); } function filterLicenses() { adminPanel.filterLicenses(); } function resetFilters() { adminPanel.resetFilters(); } function logout() { adminPanel.logout(); } function editLicense(licenseId) { adminPanel.showNotification(`Editing license ${licenseId}`); } function revokeLicense(licenseId) { adminPanel.showNotification(`License ${licenseId} revoked`); } function editPlan(planId) { adminPanel.showNotification(`Editing plan ${planId}`); } function viewPlanAnalytics(planId) { adminPanel.showNotification(`Viewing analytics for plan ${planId}`); } function editUser(userId) { adminPanel.showNotification(`Editing user ${userId}`); } function impersonateUser(userId) { adminPanel.showNotification(`Impersonating user ${userId}`); } function exportData() { adminPanel.showNotification('Exporting data...'); } function bulkActions() { adminPanel.showNotification('Bulk actions coming soon'); } function showCreatePlanModal() { adminPanel.showNotification('Create plan modal coming soon'); } function showCreateUserModal() { adminPanel.showNotification('Create user modal coming soon'); } function generateReport() { adminPanel.showNotification('Generating report...'); } function saveSettings() { adminPanel.showNotification('Settings saved successfully'); } function toggleSetting(element) { element.classList.toggle('active'); } function toggleSelectAll() { const checkboxes = document.querySelectorAll('.license-checkbox'); const selectAll = document.getElementById('select-all'); checkboxes.forEach(checkbox => { checkbox.checked = selectAll.checked; }); } // Initialize admin panel let adminPanel; document.addEventListener('DOMContentLoaded', () => { adminPanel = new LicenseAdmin(); });