admin and vendor backends features
This commit is contained in:
@@ -4,601 +4,426 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Dashboard - Multi-Tenant Ecommerce Platform</title>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/shared/components.css">
|
||||
<link rel="stylesheet" href="/static/css/shared/modals.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<h1>🔐 Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">Welcome, <strong id="adminUsername">Admin</strong></span>
|
||||
<button class="btn-logout" onclick="handleLogout()">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
<body x-data="adminDashboard()" x-init="init()" x-cloak>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="admin-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" onclick="showSection('dashboard')">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link" onclick="showSection('vendors')">
|
||||
🏪 Vendors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link" onclick="showSection('users')">
|
||||
👥 Users
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link" onclick="showSection('imports')">
|
||||
📦 Import Jobs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- Admin Header (Injected from template) -->
|
||||
<div x-html="adminLayoutTemplates.header()"></div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Dashboard View -->
|
||||
<div id="dashboardView">
|
||||
<!-- Stats Grid -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div>
|
||||
<div class="stat-title">Total Vendors</div>
|
||||
</div>
|
||||
<div class="stat-icon">🏪</div>
|
||||
</div>
|
||||
<div class="stat-value" id="totalVendors">-</div>
|
||||
<div class="stat-subtitle">
|
||||
<span id="activeVendors">-</span> active
|
||||
</div>
|
||||
<!-- Admin Sidebar (Injected from template) -->
|
||||
<div x-html="adminLayoutTemplates.sidebar()"></div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Dashboard View -->
|
||||
<div x-show="currentSection === 'dashboard'">
|
||||
<!-- Stats Grid -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Total Vendors</div>
|
||||
<div class="stat-icon">🏪</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div>
|
||||
<div class="stat-title">Total Users</div>
|
||||
</div>
|
||||
<div class="stat-icon">👥</div>
|
||||
</div>
|
||||
<div class="stat-value" id="totalUsers">-</div>
|
||||
<div class="stat-subtitle">
|
||||
<span id="activeUsers">-</span> active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div>
|
||||
<div class="stat-title">Verified Vendors</div>
|
||||
</div>
|
||||
<div class="stat-icon">✅</div>
|
||||
</div>
|
||||
<div class="stat-value" id="verifiedVendors">-</div>
|
||||
<div class="stat-subtitle">
|
||||
<span id="verificationRate">-</span>% verification rate
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div>
|
||||
<div class="stat-title">Import Jobs</div>
|
||||
</div>
|
||||
<div class="stat-icon">📦</div>
|
||||
</div>
|
||||
<div class="stat-value" id="totalImports">-</div>
|
||||
<div class="stat-subtitle">
|
||||
<span id="completedImports">-</span> completed
|
||||
</div>
|
||||
<div class="stat-value" x-text="stats.vendors?.total_vendors || 0"></div>
|
||||
<div class="stat-subtitle">
|
||||
<span x-text="stats.vendors?.active_vendors || 0"></span> active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Vendors -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Recent Vendors</h2>
|
||||
<button class="btn-primary" onclick="showSection('vendors')">View All</button>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Total Users</div>
|
||||
<div class="stat-icon">👥</div>
|
||||
</div>
|
||||
<div id="recentVendorsList">
|
||||
<div class="loading">Loading recent vendors...</div>
|
||||
<div class="stat-value" x-text="stats.users?.total_users || 0"></div>
|
||||
<div class="stat-subtitle">
|
||||
<span x-text="stats.users?.active_users || 0"></span> active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Import Jobs -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Recent Import Jobs</h2>
|
||||
<button class="btn-primary" onclick="showSection('imports')">View All</button>
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Verified Vendors</div>
|
||||
<div class="stat-icon">✅</div>
|
||||
</div>
|
||||
<div id="recentImportsList">
|
||||
<div class="loading">Loading recent imports...</div>
|
||||
<div class="stat-value" x-text="stats.vendors?.verified_vendors || 0"></div>
|
||||
<div class="stat-subtitle">
|
||||
<span x-text="Math.round(stats.vendors?.verification_rate || 0)"></span>% verification rate
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Import Jobs</div>
|
||||
<div class="stat-icon">📦</div>
|
||||
</div>
|
||||
<div class="stat-value" x-text="stats.imports?.total_imports || 0"></div>
|
||||
<div class="stat-subtitle">
|
||||
<span x-text="stats.imports?.completed_imports || 0"></span> completed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendors View -->
|
||||
<div id="vendorsView" style="display: none;">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Vendor Management</h2>
|
||||
<button class="btn-primary" onclick="window.location.href='/static/admin/vendors.html'">
|
||||
➕ Create New Vendor
|
||||
<!-- Recent Vendors -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Recent Vendors</h2>
|
||||
<button class="btn-primary" @click="showSection('vendors')">View All</button>
|
||||
</div>
|
||||
|
||||
<div x-show="loading && !recentVendors.length" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading recent vendors...</p>
|
||||
</div>
|
||||
|
||||
<template x-if="!loading && recentVendors.length === 0">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🏪</div>
|
||||
<h3>No Vendors Yet</h3>
|
||||
<p>Create your first vendor to get started</p>
|
||||
<button class="btn-primary mt-3" onclick="window.location.href='/admin/vendors.html'">
|
||||
Create Vendor
|
||||
</button>
|
||||
</div>
|
||||
<div id="vendorsList">
|
||||
<div class="loading">Loading vendors...</div>
|
||||
</template>
|
||||
|
||||
<template x-if="recentVendors.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vendor Code</th>
|
||||
<th>Name</th>
|
||||
<th>Subdomain</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="vendor in recentVendors" :key="vendor.id">
|
||||
<tr>
|
||||
<td><strong x-text="vendor.vendor_code"></strong></td>
|
||||
<td x-text="vendor.name"></td>
|
||||
<td x-text="vendor.subdomain"></td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
:class="vendor.is_verified ? 'badge-success' : 'badge-warning'"
|
||||
x-text="vendor.is_verified ? 'Verified' : 'Pending'"></span>
|
||||
<span class="badge"
|
||||
:class="vendor.is_active ? 'badge-success' : 'badge-danger'"
|
||||
x-text="vendor.is_active ? 'Active' : 'Inactive'"></span>
|
||||
</td>
|
||||
<td x-text="formatDate(vendor.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Users View -->
|
||||
<div id="usersView" style="display: none;">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">User Management</h2>
|
||||
</div>
|
||||
<div id="usersList">
|
||||
<div class="loading">Loading users...</div>
|
||||
</div>
|
||||
<!-- Recent Import Jobs -->
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Recent Import Jobs</h2>
|
||||
<button class="btn-primary" @click="showSection('imports')">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Imports View -->
|
||||
<div id="importsView" style="display: none;">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Import Jobs</h2>
|
||||
</div>
|
||||
<div id="importsList">
|
||||
<div class="loading">Loading import jobs...</div>
|
||||
</div>
|
||||
<div x-show="loading && !recentImports.length" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading recent imports...</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = '/api/v1';
|
||||
let currentSection = 'dashboard';
|
||||
|
||||
// Check authentication
|
||||
function checkAuth() {
|
||||
const token = localStorage.getItem('admin_token');
|
||||
const user = localStorage.getItem('admin_user');
|
||||
|
||||
if (!token || !user) {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = JSON.parse(user);
|
||||
if (userData.role !== 'admin') {
|
||||
alert('Access denied. Admin privileges required.');
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
document.getElementById('adminUsername').textContent = userData.username;
|
||||
return true;
|
||||
} catch (e) {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Logout
|
||||
function handleLogout() {
|
||||
if (confirm('Are you sure you want to logout?')) {
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
window.location.href = '/static/admin/login.html';
|
||||
}
|
||||
}
|
||||
|
||||
// API Call with auth
|
||||
async function apiCall(endpoint, options = {}) {
|
||||
const token = localStorage.getItem('admin_token');
|
||||
|
||||
const defaultOptions = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
||||
...defaultOptions,
|
||||
...options,
|
||||
headers: {
|
||||
...defaultOptions.headers,
|
||||
...options.headers
|
||||
}
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
window.location.href = '/static/admin/login.html';
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'API request failed');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// Load dashboard data
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const data = await apiCall('/admin/dashboard');
|
||||
|
||||
// Update stats
|
||||
document.getElementById('totalVendors').textContent = data.vendors.total_vendors || 0;
|
||||
document.getElementById('activeVendors').textContent = data.vendors.active_vendors || 0;
|
||||
document.getElementById('verifiedVendors').textContent = data.vendors.verified_vendors || 0;
|
||||
document.getElementById('verificationRate').textContent = Math.round(data.vendors.verification_rate || 0);
|
||||
|
||||
document.getElementById('totalUsers').textContent = data.users.total_users || 0;
|
||||
document.getElementById('activeUsers').textContent = data.users.active_users || 0;
|
||||
|
||||
// Display recent vendors
|
||||
displayRecentVendors(data.recent_vendors || []);
|
||||
|
||||
// Display recent imports
|
||||
displayRecentImports(data.recent_imports || []);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Display recent vendors
|
||||
function displayRecentVendors(vendors) {
|
||||
const container = document.getElementById('recentVendorsList');
|
||||
|
||||
if (vendors.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🏪</div>
|
||||
<p>No vendors yet</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const tableHTML = `
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vendor Code</th>
|
||||
<th>Name</th>
|
||||
<th>Subdomain</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${vendors.map(v => `
|
||||
<tr>
|
||||
<td><strong>${v.vendor_code}</strong></td>
|
||||
<td>${v.name}</td>
|
||||
<td>${v.subdomain}</td>
|
||||
<td>
|
||||
${v.is_verified ? '<span class="badge badge-success">Verified</span>' : '<span class="badge badge-warning">Pending</span>'}
|
||||
${v.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>'}
|
||||
</td>
|
||||
<td>${new Date(v.created_at).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
container.innerHTML = tableHTML;
|
||||
}
|
||||
|
||||
// Display recent imports
|
||||
function displayRecentImports(imports) {
|
||||
const container = document.getElementById('recentImportsList');
|
||||
|
||||
if (imports.length === 0) {
|
||||
container.innerHTML = `
|
||||
<template x-if="!loading && recentImports.length === 0">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📦</div>
|
||||
<p>No import jobs yet</p>
|
||||
<h3>No Import Jobs Yet</h3>
|
||||
<p>Import jobs will appear here once vendors start importing products</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
</template>
|
||||
|
||||
const tableHTML = `
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Marketplace</th>
|
||||
<th>Vendor</th>
|
||||
<th>Status</th>
|
||||
<th>Processed</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${imports.map(j => `
|
||||
<tr>
|
||||
<td>#${j.id}</td>
|
||||
<td>${j.marketplace}</td>
|
||||
<td>${j.vendor_name || '-'}</td>
|
||||
<td>
|
||||
${j.status === 'completed' ? '<span class="badge badge-success">Completed</span>' :
|
||||
j.status === 'failed' ? '<span class="badge badge-danger">Failed</span>' :
|
||||
'<span class="badge badge-warning">Processing</span>'}
|
||||
</td>
|
||||
<td>${j.total_processed || 0}</td>
|
||||
<td>${new Date(j.created_at).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
container.innerHTML = tableHTML;
|
||||
}
|
||||
|
||||
// Show section
|
||||
function showSection(section) {
|
||||
// Update nav
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Hide all views
|
||||
document.getElementById('dashboardView').style.display = 'none';
|
||||
document.getElementById('vendorsView').style.display = 'none';
|
||||
document.getElementById('usersView').style.display = 'none';
|
||||
document.getElementById('importsView').style.display = 'none';
|
||||
|
||||
// Show selected view
|
||||
currentSection = section;
|
||||
|
||||
switch(section) {
|
||||
case 'dashboard':
|
||||
document.getElementById('dashboardView').style.display = 'block';
|
||||
loadDashboard();
|
||||
break;
|
||||
case 'vendors':
|
||||
document.getElementById('vendorsView').style.display = 'block';
|
||||
loadVendors();
|
||||
break;
|
||||
case 'users':
|
||||
document.getElementById('usersView').style.display = 'block';
|
||||
loadUsers();
|
||||
break;
|
||||
case 'imports':
|
||||
document.getElementById('importsView').style.display = 'block';
|
||||
loadImports();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Load vendors
|
||||
async function loadVendors() {
|
||||
try {
|
||||
const data = await apiCall('/admin/vendors?limit=100');
|
||||
displayVendorsList(data.vendors);
|
||||
} catch (error) {
|
||||
console.error('Failed to load vendors:', error);
|
||||
document.getElementById('vendorsList').innerHTML = `
|
||||
<div class="empty-state">
|
||||
<p>Failed to load vendors: ${error.message}</p>
|
||||
<template x-if="recentImports.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Marketplace</th>
|
||||
<th>Vendor</th>
|
||||
<th>Status</th>
|
||||
<th>Processed</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="job in recentImports" :key="job.id">
|
||||
<tr>
|
||||
<td><strong x-text="'#' + job.id"></strong></td>
|
||||
<td x-text="job.marketplace"></td>
|
||||
<td x-text="job.vendor_name || '-'"></td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
:class="{
|
||||
'badge-success': job.status === 'completed',
|
||||
'badge-danger': job.status === 'failed',
|
||||
'badge-warning': job.status !== 'completed' && job.status !== 'failed'
|
||||
}"
|
||||
x-text="job.status === 'completed' ? 'Completed' :
|
||||
job.status === 'failed' ? 'Failed' : 'Processing'"></span>
|
||||
</td>
|
||||
<td x-text="job.total_processed || 0"></td>
|
||||
<td x-text="formatDate(job.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Display vendors list
|
||||
function displayVendorsList(vendors) {
|
||||
const container = document.getElementById('vendorsList');
|
||||
<!-- Vendors View -->
|
||||
<div x-show="currentSection === 'vendors'">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Vendor Management</h2>
|
||||
<a href="/admin/vendors.html" class="btn-primary">
|
||||
➕ Create New Vendor
|
||||
</a>
|
||||
</div>
|
||||
|
||||
if (vendors.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div x-show="loading" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading vendors...</p>
|
||||
</div>
|
||||
|
||||
<template x-if="!loading && vendors.length === 0">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🏪</div>
|
||||
<p>No vendors found</p>
|
||||
<h3>No Vendors Found</h3>
|
||||
<p>Get started by creating your first vendor</p>
|
||||
<a href="/admin/vendors.html" class="btn-primary mt-3">
|
||||
Create First Vendor
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
</template>
|
||||
|
||||
const tableHTML = `
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Vendor Code</th>
|
||||
<th>Name</th>
|
||||
<th>Subdomain</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${vendors.map(v => `
|
||||
<tr>
|
||||
<td>${v.id}</td>
|
||||
<td><strong>${v.vendor_code}</strong></td>
|
||||
<td>${v.name}</td>
|
||||
<td>${v.subdomain}</td>
|
||||
<td>${v.contact_email || '-'}</td>
|
||||
<td>
|
||||
${v.is_verified ? '<span class="badge badge-success">Verified</span>' : '<span class="badge badge-warning">Pending</span>'}
|
||||
${v.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>'}
|
||||
</td>
|
||||
<td>${new Date(v.created_at).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
container.innerHTML = tableHTML;
|
||||
}
|
||||
|
||||
// Load users
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await apiCall('/admin/users?limit=100');
|
||||
displayUsersList(users);
|
||||
} catch (error) {
|
||||
console.error('Failed to load users:', error);
|
||||
document.getElementById('usersList').innerHTML = `
|
||||
<div class="empty-state">
|
||||
<p>Failed to load users: ${error.message}</p>
|
||||
<template x-if="vendors.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Vendor Code</th>
|
||||
<th>Name</th>
|
||||
<th>Subdomain</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="vendor in vendors" :key="vendor.id">
|
||||
<tr>
|
||||
<td x-text="vendor.id"></td>
|
||||
<td><strong x-text="vendor.vendor_code"></strong></td>
|
||||
<td x-text="vendor.name"></td>
|
||||
<td x-text="vendor.subdomain"></td>
|
||||
<td x-text="vendor.business_email || vendor.contact_email || '-'"></td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
:class="vendor.is_verified ? 'badge-success' : 'badge-warning'"
|
||||
x-text="vendor.is_verified ? 'Verified' : 'Pending'"></span>
|
||||
<span class="badge"
|
||||
:class="vendor.is_active ? 'badge-success' : 'badge-danger'"
|
||||
x-text="vendor.is_active ? 'Active' : 'Inactive'"></span>
|
||||
</td>
|
||||
<td x-text="formatDate(vendor.created_at)"></td>
|
||||
<td>
|
||||
<a :href="`/admin/vendor-edit.html?id=${vendor.id}`"
|
||||
class="btn btn-sm btn-primary">
|
||||
✏️ Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Display users list
|
||||
function displayUsersList(users) {
|
||||
const container = document.getElementById('usersList');
|
||||
<!-- Users View -->
|
||||
<div x-show="currentSection === 'users'">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">User Management</h2>
|
||||
</div>
|
||||
|
||||
if (users.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div x-show="loading" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading users...</p>
|
||||
</div>
|
||||
|
||||
<template x-if="!loading && users.length === 0">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">👥</div>
|
||||
<p>No users found</p>
|
||||
<h3>No Users Found</h3>
|
||||
<p>Users will appear here when vendors are created</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
</template>
|
||||
|
||||
const tableHTML = `
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${users.map(u => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td><strong>${u.username}</strong></td>
|
||||
<td>${u.email}</td>
|
||||
<td>${u.role}</td>
|
||||
<td>
|
||||
${u.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>'}
|
||||
</td>
|
||||
<td>${new Date(u.created_at).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
container.innerHTML = tableHTML;
|
||||
}
|
||||
|
||||
// Load imports
|
||||
async function loadImports() {
|
||||
try {
|
||||
const imports = await apiCall('/admin/marketplace-import-jobs?limit=100');
|
||||
displayImportsList(imports);
|
||||
} catch (error) {
|
||||
console.error('Failed to load imports:', error);
|
||||
document.getElementById('importsList').innerHTML = `
|
||||
<div class="empty-state">
|
||||
<p>Failed to load import jobs: ${error.message}</p>
|
||||
<template x-if="users.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="user in users" :key="user.id">
|
||||
<tr>
|
||||
<td x-text="user.id"></td>
|
||||
<td><strong x-text="user.username"></strong></td>
|
||||
<td x-text="user.email"></td>
|
||||
<td>
|
||||
<span class="badge badge-primary" x-text="user.role"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
:class="user.is_active ? 'badge-success' : 'badge-danger'"
|
||||
x-text="user.is_active ? 'Active' : 'Inactive'"></span>
|
||||
</td>
|
||||
<td x-text="formatDate(user.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Display imports list
|
||||
function displayImportsList(imports) {
|
||||
const container = document.getElementById('importsList');
|
||||
<!-- Imports View -->
|
||||
<div x-show="currentSection === 'imports'">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Import Jobs</h2>
|
||||
</div>
|
||||
|
||||
if (imports.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div x-show="loading" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading import jobs...</p>
|
||||
</div>
|
||||
|
||||
<template x-if="!loading && imports.length === 0">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📦</div>
|
||||
<p>No import jobs found</p>
|
||||
<h3>No Import Jobs Found</h3>
|
||||
<p>Marketplace import jobs will appear here</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
</template>
|
||||
|
||||
const tableHTML = `
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Job ID</th>
|
||||
<th>Marketplace</th>
|
||||
<th>Vendor</th>
|
||||
<th>Status</th>
|
||||
<th>Processed</th>
|
||||
<th>Errors</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${imports.map(j => `
|
||||
<tr>
|
||||
<td>#${j.job_id}</td>
|
||||
<td>${j.marketplace}</td>
|
||||
<td>${j.vendor_name || '-'}</td>
|
||||
<td>
|
||||
${j.status === 'completed' ? '<span class="badge badge-success">Completed</span>' :
|
||||
j.status === 'failed' ? '<span class="badge badge-danger">Failed</span>' :
|
||||
'<span class="badge badge-warning">Processing</span>'}
|
||||
</td>
|
||||
<td>${j.total_processed || 0}</td>
|
||||
<td>${j.error_count || 0}</td>
|
||||
<td>${new Date(j.created_at).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
<template x-if="imports.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Job ID</th>
|
||||
<th>Marketplace</th>
|
||||
<th>Vendor</th>
|
||||
<th>Status</th>
|
||||
<th>Processed</th>
|
||||
<th>Errors</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="job in imports" :key="job.id">
|
||||
<tr>
|
||||
<td><strong x-text="'#' + (job.job_id || job.id)"></strong></td>
|
||||
<td x-text="job.marketplace"></td>
|
||||
<td x-text="job.vendor_name || '-'"></td>
|
||||
<td>
|
||||
<span class="badge"
|
||||
:class="{
|
||||
'badge-success': job.status === 'completed',
|
||||
'badge-danger': job.status === 'failed',
|
||||
'badge-warning': job.status !== 'completed' && job.status !== 'failed'
|
||||
}"
|
||||
x-text="job.status === 'completed' ? 'Completed' :
|
||||
job.status === 'failed' ? 'Failed' : 'Processing'"></span>
|
||||
</td>
|
||||
<td x-text="job.total_processed || 0"></td>
|
||||
<td>
|
||||
<span x-text="job.error_count || 0"
|
||||
:class="{ 'text-danger': (job.error_count || 0) > 0 }"></span>
|
||||
</td>
|
||||
<td x-text="formatDate(job.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
container.innerHTML = tableHTML;
|
||||
}
|
||||
<!-- Universal Modals (Injected from shared templates) -->
|
||||
<div x-html="modalTemplates.confirmModal()"></div>
|
||||
<div x-html="modalTemplates.successModal()"></div>
|
||||
<div x-html="modalTemplates.errorModal()"></div>
|
||||
<div x-html="modalTemplates.loadingOverlay()"></div>
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
if (checkAuth()) {
|
||||
loadDashboard();
|
||||
}
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script src="/static/js/shared/modal-templates.js"></script>
|
||||
<script src="/static/js/shared/alpine-components.js"></script>
|
||||
<script src="/static/js/shared/modal-system.js"></script>
|
||||
<script src="/static/js/admin/admin-layout-templates.js"></script>
|
||||
<script src="/static/js/admin/dashboard.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize table scroll detection
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// Wait for Alpine to finish rendering
|
||||
setTimeout(() => {
|
||||
const tables = document.querySelectorAll('.table-responsive');
|
||||
tables.forEach(table => {
|
||||
table.addEventListener('scroll', function() {
|
||||
if (this.scrollLeft > 0) {
|
||||
this.classList.add('is-scrolled');
|
||||
} else {
|
||||
this.classList.remove('is-scrolled');
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user