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>
|
||||
@@ -6,195 +6,90 @@
|
||||
<title>Admin Login - Multi-Tenant Ecommerce Platform</title>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h1>🔐 Admin Portal</h1>
|
||||
<p>Multi-Tenant Ecommerce Platform</p>
|
||||
</div>
|
||||
|
||||
<div id="alertBox" class="alert"></div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="Enter your username"
|
||||
>
|
||||
<div class="error-message" id="usernameError"></div>
|
||||
<div class="auth-page" x-data="adminLogin()" x-cloak>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="auth-logo">🔐</div>
|
||||
<h1>Admin Portal</h1>
|
||||
<p>Multi-Tenant Ecommerce Platform</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter your password"
|
||||
>
|
||||
<div class="error-message" id="passwordError"></div>
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="error"
|
||||
x-text="error"
|
||||
class="alert alert-error"
|
||||
x-transition></div>
|
||||
|
||||
<div x-show="success"
|
||||
x-text="success"
|
||||
class="alert alert-success"
|
||||
x-transition></div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
x-model="credentials.username"
|
||||
:class="{ 'error': errors.username }"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="Enter your username"
|
||||
:disabled="loading"
|
||||
@input="clearErrors"
|
||||
>
|
||||
<div x-show="errors.username"
|
||||
x-text="errors.username"
|
||||
class="error-message show"
|
||||
x-transition></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
x-model="credentials.password"
|
||||
:class="{ 'error': errors.password }"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter your password"
|
||||
:disabled="loading"
|
||||
@input="clearErrors"
|
||||
>
|
||||
<div x-show="errors.password"
|
||||
x-text="errors.password"
|
||||
class="error-message show"
|
||||
x-transition></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="btn-login"
|
||||
:disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span>Sign In</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span>
|
||||
<span class="loading-spinner"></span>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<a href="/">← Back to Platform</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login" id="loginButton">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<a href="/">← Back to Platform</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script>
|
||||
// API Client Configuration
|
||||
const API_BASE_URL = '/api/v1';
|
||||
|
||||
// DOM Elements
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const loginButton = document.getElementById('loginButton');
|
||||
const alertBox = document.getElementById('alertBox');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const usernameError = document.getElementById('usernameError');
|
||||
const passwordError = document.getElementById('passwordError');
|
||||
|
||||
// Show alert message
|
||||
function showAlert(message, type = 'error') {
|
||||
alertBox.textContent = message;
|
||||
alertBox.className = `alert alert-${type} show`;
|
||||
|
||||
if (type === 'success') {
|
||||
setTimeout(() => {
|
||||
alertBox.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Show field error
|
||||
function showFieldError(field, message) {
|
||||
const input = field === 'username' ? usernameInput : passwordInput;
|
||||
const errorDiv = field === 'username' ? usernameError : passwordError;
|
||||
|
||||
input.classList.add('error');
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.classList.add('show');
|
||||
}
|
||||
|
||||
// Clear field errors
|
||||
function clearFieldErrors() {
|
||||
usernameInput.classList.remove('error');
|
||||
passwordInput.classList.remove('error');
|
||||
usernameError.classList.remove('show');
|
||||
passwordError.classList.remove('show');
|
||||
alertBox.classList.remove('show');
|
||||
}
|
||||
|
||||
// Set loading state
|
||||
function setLoadingState(loading) {
|
||||
loginButton.disabled = loading;
|
||||
|
||||
if (loading) {
|
||||
loginButton.innerHTML = '<span class="loading-spinner"></span>Signing in...';
|
||||
} else {
|
||||
loginButton.innerHTML = 'Sign In';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle login
|
||||
async function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
clearFieldErrors();
|
||||
|
||||
const username = usernameInput.value.trim();
|
||||
const password = passwordInput.value;
|
||||
|
||||
// Basic validation
|
||||
if (!username) {
|
||||
showFieldError('username', 'Username is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
showFieldError('password', 'Password is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingState(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/admin/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || 'Login failed');
|
||||
}
|
||||
|
||||
// Check if user is admin
|
||||
if (data.user.role !== 'admin') {
|
||||
throw new Error('Access denied. Admin privileges required.');
|
||||
}
|
||||
|
||||
// Store token
|
||||
localStorage.setItem('admin_token', data.access_token);
|
||||
localStorage.setItem('admin_user', JSON.stringify(data.user));
|
||||
|
||||
// Show success message
|
||||
showAlert('Login successful! Redirecting...', 'success');
|
||||
|
||||
// Redirect to admin dashboard
|
||||
setTimeout(() => {
|
||||
window.location.href = '/static/admin/dashboard.html';
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
showAlert(error.message || 'Login failed. Please try again.');
|
||||
} finally {
|
||||
setLoadingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
loginForm.addEventListener('submit', handleLogin);
|
||||
|
||||
// Clear errors on input
|
||||
usernameInput.addEventListener('input', clearFieldErrors);
|
||||
passwordInput.addEventListener('input', clearFieldErrors);
|
||||
|
||||
// Check if already logged in
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const token = localStorage.getItem('admin_token');
|
||||
const user = localStorage.getItem('admin_user');
|
||||
|
||||
if (token && user) {
|
||||
try {
|
||||
const userData = JSON.parse(user);
|
||||
if (userData.role === 'admin') {
|
||||
window.location.href = '/static/admin/dashboard.html';
|
||||
}
|
||||
} catch (e) {
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/admin/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
498
static/admin/vendor-edit.html
Normal file
498
static/admin/vendor-edit.html
Normal file
@@ -0,0 +1,498 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Edit Vendor - Admin Portal</title>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body x-data="vendorEdit()" x-init="init()" x-cloak>
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<h1>🔐 Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">Welcome, <strong x-text="currentUser.username"></strong></span>
|
||||
<button class="btn-logout" @click="handleLogout">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="admin-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html" class="nav-link">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#vendors" class="nav-link active">
|
||||
🏪 Vendors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#users" class="nav-link">
|
||||
👥 Users
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#imports" class="nav-link">
|
||||
📦 Import Jobs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Loading State -->
|
||||
<div x-show="loadingVendor" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading vendor details...</p>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div x-show="!loadingVendor && vendor">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
Edit Vendor: <span x-text="vendor?.name"></span>
|
||||
</h2>
|
||||
<div>
|
||||
<a href="/static/admin/dashboard.html#vendors" class="btn btn-secondary">
|
||||
← Back to Vendor Management
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions mb-3">
|
||||
<button
|
||||
@click="showVerificationModal()"
|
||||
class="btn"
|
||||
:class="vendor?.is_verified ? 'btn-warning' : 'btn-success'"
|
||||
:disabled="saving">
|
||||
<span x-text="vendor?.is_verified ? '❌ Unverify Vendor' : '✅ Verify Vendor'"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="showStatusModal()"
|
||||
class="btn"
|
||||
:class="vendor?.is_active ? 'btn-danger' : 'btn-success'"
|
||||
:disabled="saving">
|
||||
<span x-text="vendor?.is_active ? '🔒 Deactivate Vendor' : '🔓 Activate Vendor'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Basic Information</h3>
|
||||
|
||||
<!-- Vendor Code (read-only) -->
|
||||
<div class="form-group">
|
||||
<label for="vendorCode">Vendor Code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="vendorCode"
|
||||
name="vendor_code"
|
||||
x-model="vendor.vendor_code"
|
||||
disabled
|
||||
class="form-control-disabled"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">Cannot be changed after creation</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Name -->
|
||||
<div class="form-group">
|
||||
<label for="name">
|
||||
Vendor Name <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="vendor_name"
|
||||
x-model="formData.name"
|
||||
:class="{ 'error': errors.name }"
|
||||
required
|
||||
maxlength="255"
|
||||
:disabled="saving"
|
||||
autocomplete="organization"
|
||||
>
|
||||
<div x-show="errors.name"
|
||||
x-text="errors.name"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Subdomain -->
|
||||
<div class="form-group">
|
||||
<label for="subdomain">
|
||||
Subdomain <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subdomain"
|
||||
name="subdomain"
|
||||
x-model="formData.subdomain"
|
||||
@input="formatSubdomain"
|
||||
:class="{ 'error': errors.subdomain }"
|
||||
required
|
||||
maxlength="100"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">Lowercase letters, numbers, and hyphens only</div>
|
||||
<div x-show="errors.subdomain"
|
||||
x-text="errors.subdomain"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
x-model="formData.description"
|
||||
rows="3"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Contact & Business Information</h3>
|
||||
|
||||
<!-- Owner Email (read-only with warning) -->
|
||||
<div class="form-group">
|
||||
<label for="ownerEmail">Owner Email (Login)</label>
|
||||
<input
|
||||
type="email"
|
||||
id="ownerEmail"
|
||||
name="owner_email"
|
||||
x-model="vendor.owner_email"
|
||||
disabled
|
||||
class="form-control-disabled"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">
|
||||
⚠️ Owner email cannot be changed here. Use "Transfer Ownership" below to change the owner.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Email (editable) -->
|
||||
<div class="form-group">
|
||||
<label for="contactEmail">Business Contact Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="contactEmail"
|
||||
name="contact_email"
|
||||
x-model="formData.contact_email"
|
||||
:disabled="saving"
|
||||
autocomplete="email"
|
||||
>
|
||||
<div class="form-help">
|
||||
Public business contact email (can be different from owner email)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Phone -->
|
||||
<div class="form-group">
|
||||
<label for="contactPhone">Contact Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="contactPhone"
|
||||
name="contact_phone"
|
||||
x-model="formData.contact_phone"
|
||||
:disabled="saving"
|
||||
autocomplete="tel"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="form-group">
|
||||
<label for="website">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
name="website"
|
||||
x-model="formData.website"
|
||||
:disabled="saving"
|
||||
autocomplete="url"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Business Address -->
|
||||
<div class="form-group">
|
||||
<label for="businessAddress">Business Address</label>
|
||||
<textarea
|
||||
id="businessAddress"
|
||||
name="business_address"
|
||||
x-model="formData.business_address"
|
||||
rows="3"
|
||||
:disabled="saving"
|
||||
autocomplete="street-address"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tax Number -->
|
||||
<div class="form-group">
|
||||
<label for="taxNumber">Tax Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="taxNumber"
|
||||
name="tax_number"
|
||||
x-model="formData.tax_number"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transfer Ownership Section -->
|
||||
<div class="form-section-divider"></div>
|
||||
|
||||
<div class="form-group">
|
||||
<h3 class="form-section-title">⚠️ Change Vendor Owner</h3>
|
||||
<p class="text-muted mb-2">
|
||||
To change the owner to a different user account, use the Transfer Ownership feature.
|
||||
This will assign ownership to another user and demote the current owner to Manager.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@click="showTransferOwnership = true"
|
||||
class="btn btn-warning"
|
||||
:disabled="saving">
|
||||
🔄 Transfer Ownership to Different User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="window.location.href='/static/admin/dashboard.html#vendors'"
|
||||
:disabled="saving">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving">
|
||||
<span x-show="!saving">💾 Save Changes</span>
|
||||
<span x-show="saving">
|
||||
<span class="loading-spinner"></span>
|
||||
Saving...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal (for verify/status changes) -->
|
||||
<div x-show="confirmModal.show"
|
||||
class="modal-overlay"
|
||||
@click.self="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)"
|
||||
x-transition>
|
||||
<div class="modal-content modal-sm">
|
||||
<div class="modal-header">
|
||||
<h3 x-text="confirmModal.title"></h3>
|
||||
<button @click="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p x-text="confirmModal.message"></p>
|
||||
|
||||
<div x-show="confirmModal.warning" class="alert alert-warning mt-3" style="white-space: pre-line;">
|
||||
<strong>⚠️ Warning:</strong><br>
|
||||
<span x-text="confirmModal.warning"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)"
|
||||
class="btn btn-secondary"
|
||||
:disabled="saving">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="confirmModal.onConfirm(); confirmModal.show = false"
|
||||
class="btn"
|
||||
:class="confirmModal.buttonClass"
|
||||
:disabled="saving">
|
||||
<span x-show="!saving" x-text="confirmModal.buttonText"></span>
|
||||
<span x-show="saving">
|
||||
<span class="loading-spinner"></span>
|
||||
Processing...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal (for transfer ownership success) -->
|
||||
<div x-show="successModal.show"
|
||||
class="modal-overlay"
|
||||
@click.self="successModal.show = false"
|
||||
x-transition>
|
||||
<div class="modal-content modal-md">
|
||||
<div class="modal-header modal-header-success">
|
||||
<h3>✅ <span x-text="successModal.title"></span></h3>
|
||||
<button @click="successModal.show = false" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="success-icon-wrapper">
|
||||
<div class="success-icon">✓</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center mb-4" x-text="successModal.message"></p>
|
||||
|
||||
<!-- Transfer Details -->
|
||||
<div x-show="successModal.details" class="transfer-details">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Previous Owner:</div>
|
||||
<div class="detail-value">
|
||||
<strong x-text="successModal.details?.oldOwner?.username"></strong>
|
||||
<br>
|
||||
<span class="text-muted" x-text="successModal.details?.oldOwner?.email"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-arrow">→</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">New Owner:</div>
|
||||
<div class="detail-value">
|
||||
<strong x-text="successModal.details?.newOwner?.username"></strong>
|
||||
<br>
|
||||
<span class="text-muted" x-text="successModal.details?.newOwner?.email"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="successModal.note" class="alert alert-info mt-3">
|
||||
<strong>ℹ️ Note:</strong>
|
||||
<span x-text="successModal.note"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="successModal.show = false"
|
||||
class="btn btn-primary btn-block">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal (for verify/status changes) -->
|
||||
|
||||
<!-- Transfer Ownership Modal -->
|
||||
<div x-show="showTransferOwnership"
|
||||
class="modal-overlay"
|
||||
@click.self="showTransferOwnership = false"
|
||||
x-transition>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>🔄 Transfer Vendor Ownership</h3>
|
||||
<button @click="showTransferOwnership = false" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-warning mb-3">
|
||||
<strong>⚠️ Warning:</strong> This will transfer complete ownership to another user.
|
||||
The current owner will be demoted to Manager role.
|
||||
</div>
|
||||
|
||||
<div class="info-box mb-3">
|
||||
<strong>Current Owner:</strong><br>
|
||||
<span x-text="vendor?.owner_username"></span> (<span x-text="vendor?.owner_email"></span>)
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="newOwnerId">
|
||||
New Owner User ID <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="newOwnerId"
|
||||
name="new_owner_user_id"
|
||||
x-model.number="transferData.new_owner_user_id"
|
||||
required
|
||||
placeholder="Enter user ID"
|
||||
min="1"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">
|
||||
Enter the ID of the user who will become the new owner
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="transferReason">Reason for Transfer</label>
|
||||
<textarea
|
||||
id="transferReason"
|
||||
name="transfer_reason"
|
||||
x-model="transferData.transfer_reason"
|
||||
rows="3"
|
||||
placeholder="Optional: Why is ownership being transferred?"
|
||||
autocomplete="off"
|
||||
></textarea>
|
||||
<div class="form-help">
|
||||
This will be logged for audit purposes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirmTransfer" class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="confirmTransfer"
|
||||
name="confirm_transfer"
|
||||
x-model="transferData.confirm_transfer"
|
||||
>
|
||||
I confirm this ownership transfer
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="showTransferOwnership = false"
|
||||
class="btn btn-secondary"
|
||||
:disabled="transferring">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="handleTransferOwnership()"
|
||||
class="btn btn-danger"
|
||||
:disabled="!transferData.confirm_transfer || !transferData.new_owner_user_id || transferring">
|
||||
<span x-show="!transferring">🔄 Transfer Ownership</span>
|
||||
<span x-show="transferring">
|
||||
<span class="loading-spinner"></span>
|
||||
Transferring...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script src="/static/js/admin/vendor-edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,342 +6,396 @@
|
||||
<title>Create Vendor - Admin Portal</title>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1>Create New Vendor</h1>
|
||||
<a href="/static/admin/dashboard.html" class="btn-back">← Back to Dashboard</a>
|
||||
<body x-data="vendorCreation()" x-init="init()" x-cloak>
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<h1>🔐 Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">Welcome, <strong x-text="currentUser.username"></strong></span>
|
||||
<button class="btn-logout" @click="handleLogout">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="form-card">
|
||||
<h2 class="form-title">Vendor Information</h2>
|
||||
<!-- Main Container -->
|
||||
<div class="admin-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html" class="nav-link">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active">
|
||||
🏪 Vendors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#users" class="nav-link">
|
||||
👥 Users
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#imports" class="nav-link">
|
||||
📦 Import Jobs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div id="alertBox" class="alert"></div>
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Form View -->
|
||||
<div x-show="!showCredentials">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Create New Vendor</h2>
|
||||
<a href="/static/admin/dashboard.html" class="btn btn-secondary">
|
||||
← Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form id="createVendorForm">
|
||||
<!-- Vendor Code -->
|
||||
<div class="form-group">
|
||||
<label for="vendorCode">
|
||||
Vendor Code <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="vendorCode"
|
||||
name="vendor_code"
|
||||
required
|
||||
placeholder="e.g., TECHSTORE"
|
||||
pattern="[A-Z0-9_-]+"
|
||||
maxlength="50"
|
||||
>
|
||||
<div class="form-help">Uppercase letters, numbers, underscores, and hyphens only</div>
|
||||
<div class="error-message" id="vendorCodeError"></div>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Basic Information</h3>
|
||||
|
||||
<!-- Vendor Code -->
|
||||
<div class="form-group">
|
||||
<label for="vendorCode">
|
||||
Vendor Code <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="vendorCode"
|
||||
x-model="formData.vendor_code"
|
||||
@input="formatVendorCode"
|
||||
:class="{ 'error': errors.vendor_code }"
|
||||
required
|
||||
placeholder="e.g., TECHSTORE"
|
||||
maxlength="50"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Uppercase letters, numbers, underscores, and hyphens only</div>
|
||||
<div x-show="errors.vendor_code"
|
||||
x-text="errors.vendor_code"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Name -->
|
||||
<div class="form-group">
|
||||
<label for="name">
|
||||
Vendor Name <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
x-model="formData.name"
|
||||
:class="{ 'error': errors.name }"
|
||||
required
|
||||
placeholder="e.g., Tech Store Luxembourg"
|
||||
maxlength="255"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Display name for the vendor</div>
|
||||
<div x-show="errors.name"
|
||||
x-text="errors.name"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Subdomain -->
|
||||
<div class="form-group">
|
||||
<label for="subdomain">
|
||||
Subdomain <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subdomain"
|
||||
x-model="formData.subdomain"
|
||||
@input="formatSubdomain"
|
||||
:class="{ 'error': errors.subdomain }"
|
||||
required
|
||||
placeholder="e.g., techstore"
|
||||
maxlength="100"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Lowercase letters, numbers, and hyphens only</div>
|
||||
<div x-show="errors.subdomain"
|
||||
x-text="errors.subdomain"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
x-model="formData.description"
|
||||
placeholder="Brief description of the vendor's business"
|
||||
rows="3"
|
||||
:disabled="loading"
|
||||
></textarea>
|
||||
<div class="form-help">Optional description of the vendor</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Contact & Business Information</h3>
|
||||
|
||||
<!-- Owner Email -->
|
||||
<div class="form-group">
|
||||
<label for="ownerEmail">
|
||||
Owner Email <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="ownerEmail"
|
||||
x-model="formData.owner_email"
|
||||
:class="{ 'error': errors.owner_email }"
|
||||
required
|
||||
placeholder="owner@example.com"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Login credentials will be sent to this email</div>
|
||||
<div x-show="errors.owner_email"
|
||||
x-text="errors.owner_email"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Phone -->
|
||||
<div class="form-group">
|
||||
<label for="contactPhone">Contact Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="contactPhone"
|
||||
x-model="formData.business_phone"
|
||||
placeholder="+352 123 456 789"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Optional contact phone number</div>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="form-group">
|
||||
<label for="website">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
x-model="formData.website"
|
||||
placeholder="https://example.com"
|
||||
:disabled="loading"
|
||||
>
|
||||
<div class="form-help">Optional website URL</div>
|
||||
</div>
|
||||
|
||||
<!-- Business Address -->
|
||||
<div class="form-group">
|
||||
<label for="businessAddress">Business Address</label>
|
||||
<textarea
|
||||
id="businessAddress"
|
||||
x-model="formData.business_address"
|
||||
placeholder="Street, City, Country"
|
||||
rows="3"
|
||||
:disabled="loading"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tax Number -->
|
||||
<div class="form-group">
|
||||
<label for="taxNumber">Tax Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="taxNumber"
|
||||
x-model="formData.tax_number"
|
||||
placeholder="LU12345678"
|
||||
:disabled="loading"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="window.location.href='/static/admin/dashboard.html'"
|
||||
:disabled="loading">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="loading">
|
||||
<span x-show="!loading">Create Vendor</span>
|
||||
<span x-show="loading">
|
||||
<span class="loading-spinner"></span>
|
||||
Creating vendor...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Name -->
|
||||
<div class="form-group">
|
||||
<label for="name">
|
||||
Vendor Name <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
placeholder="e.g., Tech Store Luxembourg"
|
||||
maxlength="255"
|
||||
>
|
||||
<div class="form-help">Display name for the vendor</div>
|
||||
<div class="error-message" id="nameError"></div>
|
||||
</div>
|
||||
|
||||
<!-- Subdomain -->
|
||||
<div class="form-group">
|
||||
<label for="subdomain">
|
||||
Subdomain <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subdomain"
|
||||
name="subdomain"
|
||||
required
|
||||
placeholder="e.g., techstore"
|
||||
pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
|
||||
maxlength="100"
|
||||
>
|
||||
<div class="form-help">Lowercase letters, numbers, and hyphens only (e.g., techstore.platform.com)</div>
|
||||
<div class="error-message" id="subdomainError"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
placeholder="Brief description of the vendor's business"
|
||||
></textarea>
|
||||
<div class="form-help">Optional description of the vendor</div>
|
||||
</div>
|
||||
|
||||
<!-- Owner Email -->
|
||||
<div class="form-group">
|
||||
<label for="ownerEmail">
|
||||
Owner Email <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="ownerEmail"
|
||||
name="owner_email"
|
||||
required
|
||||
placeholder="owner@example.com"
|
||||
>
|
||||
<div class="form-help">Email for the vendor owner (login credentials will be sent here)</div>
|
||||
<div class="error-message" id="ownerEmailError"></div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Phone -->
|
||||
<div class="form-group">
|
||||
<label for="contactPhone">Contact Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="contactPhone"
|
||||
name="contact_phone"
|
||||
placeholder="+352 123 456 789"
|
||||
>
|
||||
<div class="form-help">Optional contact phone number</div>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="form-group">
|
||||
<label for="website">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
name="website"
|
||||
placeholder="https://example.com"
|
||||
>
|
||||
<div class="form-help">Optional website URL</div>
|
||||
</div>
|
||||
|
||||
<!-- Business Address -->
|
||||
<div class="form-group">
|
||||
<label for="businessAddress">Business Address</label>
|
||||
<textarea
|
||||
id="businessAddress"
|
||||
name="business_address"
|
||||
placeholder="Street, City, Country"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tax Number -->
|
||||
<div class="form-group">
|
||||
<label for="taxNumber">Tax Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="taxNumber"
|
||||
name="tax_number"
|
||||
placeholder="LU12345678"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="window.history.back()">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" id="submitButton">
|
||||
Create Vendor
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Success credentials display -->
|
||||
<div id="credentialsDisplay" style="display: none;">
|
||||
<div class="credentials-card">
|
||||
<h3>✅ Vendor Created Successfully!</h3>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Vendor Code:</label>
|
||||
<span class="value" id="displayVendorCode"></span>
|
||||
<div x-show="showCredentials">
|
||||
<div class="content-section">
|
||||
<div class="credentials-success">
|
||||
<div class="success-icon">✅</div>
|
||||
<h2>Vendor Created Successfully!</h2>
|
||||
<p class="success-message">
|
||||
The vendor has been created and credentials have been generated.
|
||||
Please save these credentials securely.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Subdomain:</label>
|
||||
<span class="value" id="displaySubdomain"></span>
|
||||
<!-- Debug info (remove in production) -->
|
||||
<div x-show="credentials" style="display: none;">
|
||||
<pre x-text="JSON.stringify(credentials, null, 2)"></pre>
|
||||
</div>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Owner Username:</label>
|
||||
<span class="value" id="displayUsername"></span>
|
||||
<div class="credentials-grid">
|
||||
<div class="credential-card">
|
||||
<div class="credential-label">Vendor Code</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value" x-text="credentials?.vendor_code || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.vendor_code, 'Vendor code')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.vendor_code">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card">
|
||||
<div class="credential-label">Vendor Name</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value" x-text="credentials?.name || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.name, 'Vendor name')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.name">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card">
|
||||
<div class="credential-label">Subdomain</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value" x-text="credentials?.subdomain || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.subdomain, 'Subdomain')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.subdomain">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card">
|
||||
<div class="credential-label">Owner Email</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value" x-text="credentials?.owner_email || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.owner_email, 'Email')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.owner_email">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card">
|
||||
<div class="credential-label">Owner Username</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value" x-text="credentials?.owner_username || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.owner_username, 'Username')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.owner_username">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card credential-card-highlight">
|
||||
<div class="credential-label">
|
||||
<span>⚠️ Temporary Password</span>
|
||||
</div>
|
||||
<div class="credential-value-group">
|
||||
<template x-if="credentials?.temporary_password && credentials.temporary_password !== 'PASSWORD_NOT_RETURNED'">
|
||||
<span class="credential-value" x-text="credentials.temporary_password"></span>
|
||||
</template>
|
||||
<template x-if="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'">
|
||||
<span class="credential-value text-danger">
|
||||
⚠️ Password not returned - Check server logs
|
||||
</span>
|
||||
</template>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.temporary_password, 'Password')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
<div class="credential-warning">
|
||||
This password will not be shown again. Make sure to save it securely.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-card credential-card-full">
|
||||
<div class="credential-label">Login URL</div>
|
||||
<div class="credential-value-group">
|
||||
<span class="credential-value credential-value-url" x-text="credentials?.login_url || 'N/A'"></span>
|
||||
<button type="button"
|
||||
class="btn-icon"
|
||||
@click="copyToClipboard(credentials?.login_url, 'Login URL')"
|
||||
title="Copy to clipboard"
|
||||
:disabled="!credentials?.login_url">
|
||||
📋
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Owner Email:</label>
|
||||
<span class="value" id="displayEmail"></span>
|
||||
<!-- Warning if password not returned -->
|
||||
<div x-show="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'"
|
||||
class="alert alert-warning mt-3">
|
||||
<strong>⚠️ Warning:</strong> The temporary password was not returned by the server.
|
||||
This might be a backend configuration issue. Please check the server logs or contact the system administrator.
|
||||
</div>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Temporary Password:</label>
|
||||
<span class="value" id="displayPassword"></span>
|
||||
</div>
|
||||
|
||||
<div class="credential-item">
|
||||
<label>Login URL:</label>
|
||||
<span class="value" id="displayLoginUrl"></span>
|
||||
</div>
|
||||
|
||||
<p class="warning-text">
|
||||
⚠️ Important: Save these credentials! The password will not be shown again.
|
||||
</p>
|
||||
|
||||
<div class="form-actions" style="margin-top: 20px;">
|
||||
<button class="btn btn-primary" onclick="window.location.href='/static/admin/dashboard.html'">
|
||||
Go to Dashboard
|
||||
<div class="form-actions" style="margin-top: 24px;">
|
||||
<button class="btn btn-secondary"
|
||||
@click="resetForm(); showCredentials = false">
|
||||
➕ Create Another Vendor
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="location.reload()">
|
||||
Create Another Vendor
|
||||
<button class="btn btn-primary"
|
||||
@click="window.location.href='/static/admin/dashboard.html'">
|
||||
← Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = '/api/v1';
|
||||
|
||||
// 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.');
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch (e) {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Show alert
|
||||
function showAlert(message, type = 'error') {
|
||||
const alertBox = document.getElementById('alertBox');
|
||||
alertBox.textContent = message;
|
||||
alertBox.className = `alert alert-${type} show`;
|
||||
|
||||
// Scroll to top
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Clear all errors
|
||||
function clearErrors() {
|
||||
document.querySelectorAll('.error-message').forEach(el => {
|
||||
el.classList.remove('show');
|
||||
});
|
||||
document.querySelectorAll('input, textarea').forEach(el => {
|
||||
el.classList.remove('error');
|
||||
});
|
||||
document.getElementById('alertBox').classList.remove('show');
|
||||
}
|
||||
|
||||
// Show field error
|
||||
function showFieldError(fieldName, message) {
|
||||
const input = document.querySelector(`[name="${fieldName}"]`);
|
||||
const errorDiv = document.getElementById(`${fieldName.replace('_', '')}Error`);
|
||||
|
||||
if (input) input.classList.add('error');
|
||||
if (errorDiv) {
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-format inputs
|
||||
document.getElementById('vendorCode').addEventListener('input', function(e) {
|
||||
this.value = this.value.toUpperCase().replace(/[^A-Z0-9_-]/g, '');
|
||||
});
|
||||
|
||||
document.getElementById('subdomain').addEventListener('input', function(e) {
|
||||
this.value = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
||||
});
|
||||
|
||||
// Handle form submission
|
||||
document.getElementById('createVendorForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
clearErrors();
|
||||
|
||||
const submitButton = document.getElementById('submitButton');
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<span class="loading-spinner"></span>Creating vendor...';
|
||||
|
||||
// Collect form data
|
||||
const formData = {
|
||||
vendor_code: document.getElementById('vendorCode').value.trim(),
|
||||
name: document.getElementById('name').value.trim(),
|
||||
subdomain: document.getElementById('subdomain').value.trim(),
|
||||
description: document.getElementById('description').value.trim() || null,
|
||||
owner_email: document.getElementById('ownerEmail').value.trim(),
|
||||
contact_phone: document.getElementById('contactPhone').value.trim() || null,
|
||||
website: document.getElementById('website').value.trim() || null,
|
||||
business_address: document.getElementById('businessAddress').value.trim() || null,
|
||||
tax_number: document.getElementById('taxNumber').value.trim() || null,
|
||||
};
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('admin_token');
|
||||
const response = await fetch(`${API_BASE_URL}/admin/vendors`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || 'Failed to create vendor');
|
||||
}
|
||||
|
||||
// Display success and credentials
|
||||
document.getElementById('createVendorForm').style.display = 'none';
|
||||
document.getElementById('credentialsDisplay').style.display = 'block';
|
||||
|
||||
document.getElementById('displayVendorCode').textContent = data.vendor_code;
|
||||
document.getElementById('displaySubdomain').textContent = data.subdomain;
|
||||
document.getElementById('displayUsername').textContent = data.owner_username;
|
||||
document.getElementById('displayEmail').textContent = data.owner_email;
|
||||
document.getElementById('displayPassword').textContent = data.temporary_password;
|
||||
document.getElementById('displayLoginUrl').textContent = data.login_url || `${data.subdomain}.platform.com/vendor/login`;
|
||||
|
||||
showAlert('Vendor created successfully!', 'success');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating vendor:', error);
|
||||
showAlert(error.message || 'Failed to create vendor');
|
||||
|
||||
submitButton.disabled = false;
|
||||
submitButton.innerHTML = 'Create Vendor';
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
checkAuth();
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script src="/static/js/admin/vendors.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user