admin login migration to new structure, new design

This commit is contained in:
2025-10-19 19:20:21 +02:00
parent f65a40b533
commit a7d9d44a13
25 changed files with 1081 additions and 970 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,429 +1,258 @@
<!DOCTYPE html>
<html lang="en">
<html :class="{ 'theme-dark': dark }" x-data="dashboardData()" lang="en">
<head>
<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">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Dashboard - Multi-Tenant Platform</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body x-data="adminDashboard()" x-init="init()" x-cloak>
<body x-cloak>
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
<!-- Sidebar Container -->
<div id="sidebar-container"></div>
<!-- Admin Header (Injected from template) -->
<div x-html="adminLayoutTemplates.header()"></div>
<div class="flex flex-col flex-1 w-full">
<!-- Header Container -->
<div id="header-container"></div>
<!-- Admin Sidebar (Injected from template) -->
<div x-html="adminLayoutTemplates.sidebar()"></div>
<!-- Main Content -->
<main class="h-full overflow-y-auto">
<div class="container px-6 mx-auto grid">
<h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
Dashboard
</h2>
<!-- 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>
<!-- Stats Cards -->
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
<!-- Card: Total Vendors -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path>
</svg>
</div>
<div>
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
Total Vendors
</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalVendors">
0
</p>
</div>
</div>
<!-- Card: Active Users -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
Active Users
</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.activeUsers">
0
</p>
</div>
</div>
<!-- Card: Verified Vendors -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
</div>
<div>
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
Verified Vendors
</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.verifiedVendors">
0
</p>
</div>
</div>
<!-- Card: Import Jobs -->
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-3 mr-4 text-teal-500 bg-teal-100 rounded-full dark:text-teal-100 dark:bg-teal-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
Import Jobs
</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.importJobs">
0
</p>
</div>
</div>
</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>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Total Users</div>
<div class="stat-icon">👥</div>
</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>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Verified Vendors</div>
<div class="stat-icon"></div>
</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>
<!-- 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>
</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>
<!-- Recent Vendors Table -->
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</template>
</tbody>
</table>
</div>
</template>
</div>
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="vendors.length === 0">
<tr>
<td colspan="4" class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-400">
No vendors yet. <a href="/static/admin/vendors.html" class="text-purple-600 hover:underline">Create your first vendor</a>
</td>
</tr>
</template>
<!-- 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>
<template x-for="vendor in vendors" :key="vendor.id">
<tr class="text-gray-700 dark:text-gray-400">
<td class="px-4 py-3">
<div class="flex items-center text-sm">
<div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
<div class="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-600 flex items-center justify-center">
<span class="text-xs font-semibold text-purple-600 dark:text-purple-100" x-text="vendor.name.charAt(0)"></span>
</div>
</div>
<div>
<p class="font-semibold" x-text="vendor.name"></p>
<p class="text-xs text-gray-600 dark:text-gray-400" x-text="vendor.vendor_code"></p>
</div>
</div>
</td>
<td class="px-4 py-3 text-xs">
<span class="px-2 py-1 font-semibold leading-tight rounded-full"
:class="vendor.is_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'"
x-text="vendor.is_verified ? 'Verified' : 'Pending'">
</span>
</td>
<td class="px-4 py-3 text-sm" x-text="formatDate(vendor.created_at)">
</td>
<td class="px-4 py-3">
<div class="flex items-center space-x-4 text-sm">
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
aria-label="Edit">
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
</svg>
</button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</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>
<template x-if="!loading && recentImports.length === 0">
<div class="empty-state">
<div class="empty-state-icon">📦</div>
<h3>No Import Jobs Yet</h3>
<p>Import jobs will appear here once vendors start importing products</p>
</div>
</template>
<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>
</main>
</div>
</div>
<!-- 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>
<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>
<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>
</template>
<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>
<!-- Users View -->
<div x-show="currentSection === 'users'">
<div class="content-section">
<div class="section-header">
<h2 class="section-title">User Management</h2>
</div>
<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>
<h3>No Users Found</h3>
<p>Users will appear here when vendors are created</p>
</div>
</template>
<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>
<!-- Imports View -->
<div x-show="currentSection === 'imports'">
<div class="content-section">
<div class="section-header">
<h2 class="section-title">Import Jobs</h2>
</div>
<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>
<h3>No Import Jobs Found</h3>
<p>Marketplace import jobs will appear here</p>
</div>
</template>
<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>
<!-- 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>
<!-- 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>
<!-- Load partials BEFORE Alpine -->
<script src="/static/shared/js/partial-loader.js"></script>
<script src="/static/shared/js/icons.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);
});
// Load partials synchronously before Alpine starts
(async () => {
await window.partialLoader.loadAll({
'header-container': 'header.html',
'sidebar-container': 'sidebar.html'
});
})();
</script>
<!-- Alpine.js v3 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<!-- Initialize Alpine data -->
<script src="/static/admin/js/init-alpine.js"></script>
<!-- Dashboard-specific logic -->
<script>
function dashboardData() {
return {
...data(), // Spread base data from init-alpine.js
currentPage: 'dashboard',
stats: {
totalVendors: 0,
activeUsers: 0,
verifiedVendors: 0,
importJobs: 0
},
vendors: [],
loading: false,
async init() {
await this.loadStats();
await this.loadVendors();
},
async loadStats() {
try {
// Replace with your actual API endpoint
const response = await fetch('/api/v1/admin/dashboard/stats', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
const data = await response.json();
this.stats = {
totalVendors: data.vendors?.total_vendors || 0,
activeUsers: data.users?.active_users || 0,
verifiedVendors: data.vendors?.verified_vendors || 0,
importJobs: data.imports?.total_imports || 0
};
}
} catch (error) {
console.error('Error loading stats:', error);
}
},
async loadVendors() {
try {
// Replace with your actual API endpoint
const response = await fetch('/api/v1/admin/vendors?limit=5', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
const data = await response.json();
this.vendors = data.vendors || [];
}
} catch (error) {
console.error('Error loading vendors:', error);
}
},
formatDate(dateString) {
if (!dateString) return '-';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
}
}
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -0,0 +1,57 @@
/**
* Alpine.js v3 global data initialization
* Provides theme toggle, menu controls, and page state
*/
function data() {
function getThemeFromLocalStorage() {
// if user already changed the theme, use it
if (window.localStorage.getItem('dark')) {
return JSON.parse(window.localStorage.getItem('dark'))
}
// else return their preferences
return (
!!window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
)
}
function setThemeToLocalStorage(value) {
window.localStorage.setItem('dark', value)
}
return {
dark: getThemeFromLocalStorage(),
toggleTheme() {
this.dark = !this.dark
setThemeToLocalStorage(this.dark)
},
isSideMenuOpen: false,
toggleSideMenu() {
this.isSideMenuOpen = !this.isSideMenuOpen
},
closeSideMenu() {
this.isSideMenuOpen = false
},
isNotificationsMenuOpen: false,
toggleNotificationsMenu() {
this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen
},
closeNotificationsMenu() {
this.isNotificationsMenuOpen = false
},
isProfileMenuOpen: false,
toggleProfileMenu() {
this.isProfileMenuOpen = !this.isProfileMenuOpen
},
closeProfileMenu() {
this.isProfileMenuOpen = false
},
isPagesMenuOpen: false,
togglePagesMenu() {
this.isPagesMenuOpen = !this.isPagesMenuOpen
},
// Page identifier - will be set by individual pages
currentPage: ''
}
}

130
static/admin/js/login.js Normal file
View File

@@ -0,0 +1,130 @@
// Admin Login Component
function adminLogin() {
return {
dark: false, // For dark mode toggle
credentials: {
username: '',
password: ''
},
loading: false,
error: null,
success: null,
errors: {},
init() {
// Check if already logged in
this.checkExistingAuth();
// Check for dark mode preference
this.dark = localStorage.getItem('theme') === 'dark';
},
checkExistingAuth() {
const token = localStorage.getItem('admin_token') || localStorage.getItem('token');
if (token) {
// Verify token is still valid
const userData = localStorage.getItem('admin_user');
if (userData) {
try {
const user = JSON.parse(userData);
if (user.role === 'admin') {
window.location.href = '/static/admin/dashboard.html';
}
} catch (e) {
// Invalid user data, clear storage
this.clearAuthData();
}
}
}
},
clearAuthData() {
localStorage.removeItem('admin_token');
localStorage.removeItem('admin_user');
localStorage.removeItem('token');
},
clearErrors() {
this.error = null;
this.success = null;
this.errors = {};
},
validateForm() {
this.clearErrors();
let isValid = true;
if (!this.credentials.username.trim()) {
this.errors.username = 'Username is required';
isValid = false;
}
if (!this.credentials.password) {
this.errors.password = 'Password is required';
isValid = false;
} else if (this.credentials.password.length < 6) {
this.errors.password = 'Password must be at least 6 characters';
isValid = false;
}
return isValid;
},
async handleLogin() {
if (!this.validateForm()) {
return;
}
this.loading = true;
this.clearErrors();
try {
// Use apiClient from api-client.js
const response = await apiClient.post('/admin/auth/login', {
username: this.credentials.username.trim(),
password: this.credentials.password
});
// Validate response
if (!response.access_token) {
throw new Error('Invalid response from server');
}
// Check if user is admin (if user data is provided)
if (response.user && response.user.role !== 'admin') {
throw new Error('Access denied. Admin privileges required.');
}
// Store authentication data
localStorage.setItem('admin_token', response.access_token);
localStorage.setItem('token', response.access_token); // Backup
if (response.user) {
localStorage.setItem('admin_user', JSON.stringify(response.user));
}
// Show success message
this.success = 'Login successful! Redirecting...';
// Redirect after short delay
setTimeout(() => {
window.location.href = '/static/admin/dashboard.html';
}, 1000);
} catch (error) {
console.error('Login error:', error);
this.error = error.message || 'Invalid username or password. Please try again.';
// Clear any partial auth data
this.clearAuthData();
} finally {
this.loading = false;
}
},
toggleDarkMode() {
this.dark = !this.dark;
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
}
}
}

View File

@@ -1,95 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<html :class="{ 'theme-dark': dark }" x-data="loginData()" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Login - Multi-Tenant Platform</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body>
<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>
<!-- 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 class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
<div class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
<div class="flex flex-col overflow-y-auto md:flex-row">
<div class="h-32 md:h-auto md:w-1/2">
<img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
src="/static/admin/img/login-office.jpeg" alt="Office" />
<img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
src="/static/admin/img/login-office-dark.jpeg" alt="Office" />
</div>
<div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
<div class="w-full">
<h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
Admin Login
</h1>
<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>
<!-- Alert Messages -->
<div x-show="error" x-text="error"
class="px-4 py-3 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800"
x-transition></div>
<div x-show="success" x-text="success"
class="px-4 py-3 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
x-transition></div>
<!-- Login Form -->
<form @submit.prevent="handleLogin">
<label class="block text-sm">
<span class="text-gray-700 dark:text-gray-400">Username</span>
<input x-model="credentials.username"
:disabled="loading"
@input="clearErrors"
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
:class="{ 'border-red-600': errors.username }"
placeholder="Enter your username"
required />
<span x-show="errors.username" x-text="errors.username"
class="text-xs text-red-600 dark:text-red-400"></span>
</label>
<label class="block mt-4 text-sm">
<span class="text-gray-700 dark:text-gray-400">Password</span>
<input x-model="credentials.password"
:disabled="loading"
@input="clearErrors"
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
:class="{ 'border-red-600': errors.password }"
placeholder="***************"
type="password"
required />
<span x-show="errors.password" x-text="errors.password"
class="text-xs text-red-600 dark:text-red-400"></span>
</label>
<button type="submit" :disabled="loading"
class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
<span x-show="!loading">Log in</span>
<span x-show="loading">
<svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Signing in...
</span>
</button>
</form>
<hr class="my-8" />
<p class="mt-4">
<a class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
href="#">
Forgot your password?
</a>
</p>
</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>
</div>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/js/admin/login.js"></script>
<!-- Alpine.js v3 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<!-- API Client -->
<script src="/static/shared/js/api-client.js"></script>
<!-- Login Logic -->
<script>
function loginData() {
return {
dark: false,
loading: false,
error: '',
success: '',
credentials: {
username: '',
password: ''
},
errors: {
username: '',
password: ''
},
clearErrors() {
this.error = '';
this.errors = { username: '', password: '' };
},
async handleLogin() {
this.clearErrors();
this.loading = true;
try {
// Your existing API call
const response = await fetch('/api/v1/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(this.credentials)
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || 'Login failed');
}
// Store token
localStorage.setItem('token', data.access_token);
// Show success
this.success = 'Login successful! Redirecting...';
// Redirect to dashboard
setTimeout(() => {
window.location.href = '/static/admin/dashboard.html';
}, 1000);
} catch (error) {
this.error = error.message || 'Invalid username or password';
console.error('Login error:', error);
} finally {
this.loading = false;
}
}
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,133 @@
<!-- Top header bar with search, theme toggle, notifications, profile -->
<header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
<div class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300">
<!-- Mobile hamburger -->
<button class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
@click="toggleSideMenu" aria-label="Menu">
<span x-html="$icon('menu', 'w-6 h-6')"></span>
</button>
<!-- Search input -->
<div class="flex justify-center flex-1 lg:mr-32">
<div class="relative w-full max-w-xl mr-6 focus-within:text-purple-500">
<div class="absolute inset-y-0 flex items-center pl-2">
<span x-html="$icon('search', 'w-4 h-4')"></span>
</div>
<input class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
type="text" placeholder="Search for projects" aria-label="Search"/>
</div>
</div>
<ul class="flex items-center flex-shrink-0 space-x-6">
<!-- Theme toggler -->
<li class="flex">
<button class="rounded-md focus:outline-none focus:shadow-outline-purple"
@click="toggleTheme" aria-label="Toggle color mode">
<template x-if="!dark">
<span x-html="$icon('moon', 'w-5 h-5')"></span>
</template>
<template x-if="dark">
<span x-html="$icon('sun', 'w-5 h-5')"></span>
</template>
</button>
</li>
<!-- Notifications menu -->
<li class="relative">
<button class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
@click="toggleNotificationsMenu" @keydown.escape="closeNotificationsMenu"
aria-label="Notifications" aria-haspopup="true">
<span x-html="$icon('bell', 'w-5 h-5')"></span>
<span aria-hidden="true" class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"></span>
</button>
<template x-if="isNotificationsMenuOpen">
<ul x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click.away="closeNotificationsMenu"
@keydown.escape="closeNotificationsMenu"
class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700">
<li class="flex">
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
<span>Messages</span>
<span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">13</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
<span>Sales</span>
<span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">2</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
<span>Alerts</span>
</a>
</li>
</ul>
</template>
</li>
<!-- Profile menu -->
<li class="relative">
<button class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
@click="toggleProfileMenu" @keydown.escape="closeProfileMenu"
aria-label="Account" aria-haspopup="true">
<img class="object-cover w-8 h-8 rounded-full"
src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
alt="" aria-hidden="true"/>
</button>
<template x-if="isProfileMenuOpen">
<ul x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click.away="closeProfileMenu"
@keydown.escape="closeProfileMenu"
class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
aria-label="submenu">
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('user', 'w-4 h-4 mr-3')"></span>
<span>Profile</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('cog', 'w-4 h-4 mr-3')"></span>
<span>Settings</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="/static/admin/login.html">
<span x-html="$icon('logout', 'w-4 h-4 mr-3')"></span>
<span>Log out</span>
</a>
</li>
</ul>
</template>
</li>
</ul>
</div>
</header>.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Settings</span>
</a>
</li>
<li class="flex">
<a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="/static/admin/login.html">
<!-- Heroicon: logout -->
<svg class="w-4 h-4 mr-3" aria-hidden="true" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
</svg>
<span>Log out</span>
</a>
</li>
</ul>
</template>
</li>
</ul>
</div>
</header>

View File

@@ -0,0 +1,116 @@
<!-- Desktop sidebar -->
<aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
<div class="py-4 text-gray-500 dark:text-gray-400">
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" href="/static/admin/dashboard.html">
Admin Portal
</a>
<ul class="mt-6">
<li class="relative px-6 py-3">
<span x-show="currentPage === 'dashboard'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
:class="currentPage === 'dashboard' ? 'text-gray-800 dark:text-gray-100' : ''"
href="/static/admin/dashboard.html">
<span x-html="$icon('home')"></span>
<span class="ml-4">Dashboard</span>
</a>
</li>
</ul>
<ul>
<li class="relative px-6 py-3">
<span x-show="currentPage === 'vendors'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
:class="currentPage === 'vendors' ? 'text-gray-800 dark:text-gray-100' : ''"
href="/static/admin/vendors.html">
<span x-html="$icon('shopping-bag')"></span>
<span class="ml-4">Vendors</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('users')"></span>
<span class="ml-4">Users</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('cube')"></span>
<span class="ml-4">Import Jobs</span>
</a>
</li>
</ul>
<div class="px-6 my-6">
<button class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
Create vendor
<span class="ml-2" aria-hidden="true">+</span>
</button>
</div>
</div>
</aside>
<!-- Mobile sidebar -->
<!-- Backdrop -->
<div x-show="isSideMenuOpen"
x-transition:enter="transition ease-in-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in-out duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"></div>
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
x-show="isSideMenuOpen"
x-transition:enter="transition ease-in-out duration-150"
x-transition:enter-start="opacity-0 transform -translate-x-20"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in-out duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 transform -translate-x-20"
@click.away="closeSideMenu"
@keydown.escape="closeSideMenu">
<div class="py-4 text-gray-500 dark:text-gray-400">
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200" href="/static/admin/dashboard.html">
Admin Portal
</a>
<ul class="mt-6">
<li class="relative px-6 py-3">
<span x-show="currentPage === 'dashboard'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
:class="currentPage === 'dashboard' ? 'text-gray-800 dark:text-gray-100' : ''"
href="/static/admin/dashboard.html">
<span x-html="$icon('home')"></span>
<span class="ml-4">Dashboard</span>
</a>
</li>
</ul>
<ul>
<li class="relative px-6 py-3">
<span x-show="currentPage === 'vendors'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
:class="currentPage === 'vendors' ? 'text-gray-800 dark:text-gray-100' : ''"
href="/static/admin/vendors.html">
<span x-html="$icon('shopping-bag')"></span>
<span class="ml-4">Vendors</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('users')"></span>
<span class="ml-4">Users</span>
</a>
</li>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200" href="#">
<span x-html="$icon('cube')"></span>
<span class="ml-4">Import Jobs</span>
</a>
</li>
</ul>
<div class="px-6 my-6">
<button class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
Create vendor
<span class="ml-2" aria-hidden="true">+</span>
</button>
</div>
</div>
</aside>

View File

@@ -492,7 +492,7 @@
</div>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/js/admin/vendor-edit.js"></script>
<script src="/static/shared/js/api-client.js"></script>
<script src="/static/admin/js/vendor-edit.js"></script>
</body>
</html>

View File

@@ -1,401 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<html :class="{ 'theme-dark': dark }" x-data="vendorsData()" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vendors - Admin Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<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>
<body x-cloak>
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
<!-- Sidebar Container -->
<div id="sidebar-container"></div>
<!-- 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 class="flex flex-col flex-1 w-full">
<!-- Header Container -->
<div id="header-container"></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 @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>
</div>
<!-- Success credentials display -->
<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>
<!-- Debug info (remove in production) -->
<div x-show="credentials" style="display: none;">
<pre x-text="JSON.stringify(credentials, null, 2)"></pre>
</div>
<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>
<!-- 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="form-actions" style="margin-top: 24px;">
<button class="btn btn-secondary"
@click="resetForm(); showCredentials = false">
Create Another Vendor
</button>
<button class="btn btn-primary"
@click="window.location.href='/static/admin/dashboard.html'">
← Back to Dashboard
<!-- Main Content -->
<main class="h-full overflow-y-auto">
<div class="container px-6 mx-auto grid">
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Vendor Management
</h2>
<button class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
<!-- Heroicon: plus -->
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Vendor
</button>
</div>
<!-- Placeholder Content -->
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="text-center py-12">
<div class="mb-4">
<!-- Heroicon: shopping-bag (outline, large) -->
<svg class="mx-auto h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
Vendor Management
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-400">
This page will display vendor list and management tools.
</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
Features to be implemented:
</p>
<ul class="mt-4 text-sm text-gray-600 dark:text-gray-400 space-y-2">
<li>• View all vendors with filtering and search</li>
<li>• Create new vendors with detailed forms</li>
<li>• Edit vendor information</li>
<li>• Verify/unverify vendors</li>
<li>• View vendor statistics</li>
</ul>
</div>
</div>
<!-- Example vendors table structure (for reference) -->
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Vendor Code</th>
<th class="px-4 py-3">Name</th>
<th class="px-4 py-3">Subdomain</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="vendors.length === 0">
<tr>
<td colspan="6" class="px-4 py-8 text-sm text-center text-gray-600 dark:text-gray-400">
<div class="flex flex-col items-center">
<svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg>
<p class="font-medium">No vendors found</p>
<p class="text-xs mt-1">Create your first vendor to get started</p>
</div>
</td>
</tr>
</template>
<template x-for="vendor in vendors" :key="vendor.id">
<tr class="text-gray-700 dark:text-gray-400">
<td class="px-4 py-3">
<p class="font-semibold text-sm" x-text="vendor.vendor_code"></p>
</td>
<td class="px-4 py-3 text-sm" x-text="vendor.name"></td>
<td class="px-4 py-3 text-sm" x-text="vendor.subdomain"></td>
<td class="px-4 py-3 text-xs">
<span class="px-2 py-1 font-semibold leading-tight rounded-full"
:class="vendor.is_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'"
x-text="vendor.is_verified ? 'Verified' : 'Pending'">
</span>
</td>
<td class="px-4 py-3 text-sm" x-text="formatDate(vendor.created_at)"></td>
<td class="px-4 py-3">
<div class="flex items-center space-x-4 text-sm">
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
aria-label="Edit">
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
</svg>
</button>
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none focus:shadow-outline-gray"
aria-label="Delete">
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/js/admin/vendors.js"></script>
<!-- Load partials BEFORE Alpine -->
<script src="/static/shared/js/partial-loader.js"></script>
<script src="/static/shared/js/icons.js"></script>
<script>
(async () => {
await window.partialLoader.loadAll({
'header-container': 'header.html',
'sidebar-container': 'sidebar.html'
});
})();
</script>
<!-- Alpine.js v3 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<!-- Initialize Alpine data -->
<script src="/static/admin/js/init-alpine.js"></script>
<!-- Vendors-specific logic -->
<script>
function vendorsData() {
return {
...data(), // Spread base data from init-alpine.js
currentPage: 'vendors',
vendors: [],
loading: false,
async init() {
await this.loadVendors();
},
async loadVendors() {
this.loading = true;
try {
// Replace with your actual API endpoint
const response = await fetch('/api/v1/admin/vendors', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
const data = await response.json();
this.vendors = data.vendors || [];
}
} catch (error) {
console.error('Error loading vendors:', error);
} finally {
this.loading = false;
}
},
formatDate(dateString) {
if (!dateString) return '-';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
}
}
</script>
</body>
</html>

View File

@@ -1,87 +0,0 @@
// Admin Login Component
function adminLogin() {
return {
credentials: {
username: '',
password: ''
},
loading: false,
error: null,
success: null,
errors: {},
init() {
// Check if already logged in
this.checkExistingAuth();
},
checkExistingAuth() {
if (Auth.isAuthenticated() && Auth.isAdmin()) {
window.location.href = '/static/admin/dashboard.html';
}
},
clearErrors() {
this.error = null;
this.errors = {};
},
validateForm() {
this.clearErrors();
let isValid = true;
if (!this.credentials.username.trim()) {
this.errors.username = 'Username is required';
isValid = false;
}
if (!this.credentials.password) {
this.errors.password = 'Password is required';
isValid = false;
}
return isValid;
},
async handleLogin() {
if (!this.validateForm()) {
return;
}
this.loading = true;
this.clearErrors();
try {
const response = await apiClient.post('/admin/auth/login', {
username: this.credentials.username.trim(),
password: this.credentials.password
});
// Check if user is admin
if (response.user.role !== 'admin') {
throw new Error('Access denied. Admin privileges required.');
}
// Store authentication data
localStorage.setItem('admin_token', response.access_token);
localStorage.setItem('admin_user', JSON.stringify(response.user));
// Show success message
this.success = 'Login successful! Redirecting...';
Utils.showToast('Login successful!', 'success', 2000);
// Redirect after short delay
setTimeout(() => {
window.location.href = '/static/admin/dashboard.html';
}, 1000);
} catch (error) {
console.error('Login error:', error);
this.error = error.message || 'Login failed. Please check your credentials.';
Utils.showToast(this.error, 'error');
} finally {
this.loading = false;
}
}
}
}

View File

@@ -0,0 +1,63 @@
/**
* Partial Loader for Alpine.js v3
* Loads HTML partials before Alpine initializes
*/
class PartialLoader {
constructor(area) {
this.area = area; // 'admin', 'vendor', or 'shop'
this.baseUrl = `/static/${area}/partials/`;
}
async load(containerId, partialName) {
try {
const response = await fetch(`${this.baseUrl}${partialName}`);
if (!response.ok) {
console.warn(`Failed to load partial: ${partialName} (${response.status})`);
return false;
}
const html = await response.text();
const container = document.getElementById(containerId);
if (container) {
container.innerHTML = html;
return true;
} else {
console.warn(`Container not found: ${containerId}`);
return false;
}
} catch (error) {
console.error(`Error loading partial ${partialName}:`, error);
return false;
}
}
async loadAll(partials) {
const promises = Object.entries(partials).map(
([containerId, partialName]) => this.load(containerId, partialName)
);
const results = await Promise.all(promises);
const successCount = results.filter(r => r).length;
console.log(`Loaded ${successCount}/${results.length} partials successfully`);
return results.every(r => r);
}
}
// Auto-detect area from URL path
function getAreaFromPath() {
const path = window.location.pathname;
if (path.includes('/admin/')) return 'admin';
if (path.includes('/vendor/')) return 'vendor';
if (path.includes('/shop/')) return 'shop';
return 'shop'; // default
}
// Create global instance
window.PartialLoader = PartialLoader;
window.partialLoader = new PartialLoader(getAreaFromPath());

View File

@@ -154,7 +154,7 @@
</main>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/shared/js/api-client.js"></script>
<script src="/static/js/vendor/dashboard.js"></script>
</body>
</html>

View File

@@ -115,7 +115,7 @@
</div>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/shared/js/api-client.js"></script>
<script src="/static/js/vendor/login.js"></script>
</body>
</html>