admin login migration to new structure, new design
This commit is contained in:
1
static/admin/css/tailwind.output.css
Normal file
1
static/admin/css/tailwind.output.css
Normal file
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
BIN
static/admin/img/create-account-office-dark.jpeg
Normal file
BIN
static/admin/img/create-account-office-dark.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
static/admin/img/create-account-office.jpeg
Normal file
BIN
static/admin/img/create-account-office.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
static/admin/img/forgot-password-office-dark.jpeg
Normal file
BIN
static/admin/img/forgot-password-office-dark.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
static/admin/img/forgot-password-office.jpeg
Normal file
BIN
static/admin/img/forgot-password-office.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
static/admin/img/login-office-dark.jpeg
Normal file
BIN
static/admin/img/login-office-dark.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
static/admin/img/login-office.jpeg
Normal file
BIN
static/admin/img/login-office.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
1
static/admin/js/analytics.js
Normal file
1
static/admin/js/analytics.js
Normal file
@@ -0,0 +1 @@
|
||||
// Admin analytics
|
||||
203
static/admin/js/dashboard.js
Normal file
203
static/admin/js/dashboard.js
Normal file
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* Admin Dashboard Component
|
||||
* Extends adminLayout with dashboard-specific functionality
|
||||
*/
|
||||
|
||||
function adminDashboard() {
|
||||
return {
|
||||
// Inherit all adminLayout functionality
|
||||
...window.adminLayout(),
|
||||
|
||||
// Dashboard-specific state
|
||||
currentSection: 'dashboard',
|
||||
stats: {
|
||||
vendors: {},
|
||||
users: {},
|
||||
imports: {}
|
||||
},
|
||||
vendors: [],
|
||||
users: [],
|
||||
imports: [],
|
||||
recentVendors: [],
|
||||
recentImports: [],
|
||||
loading: false,
|
||||
|
||||
/**
|
||||
* Initialize dashboard
|
||||
*/
|
||||
async init() {
|
||||
// Call parent init from adminLayout
|
||||
this.currentPage = this.getCurrentPage();
|
||||
await this.loadUserData();
|
||||
|
||||
// Load dashboard data
|
||||
await this.loadDashboardData();
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all dashboard data
|
||||
*/
|
||||
async loadDashboardData() {
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadStats(),
|
||||
this.loadRecentVendors(),
|
||||
this.loadRecentImports()
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Error loading dashboard data:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load dashboard data',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load statistics
|
||||
*/
|
||||
async loadStats() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/stats');
|
||||
this.stats = response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load stats:', error);
|
||||
// Don't show error modal for stats, just log it
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load recent vendors
|
||||
*/
|
||||
async loadRecentVendors() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendors', {
|
||||
skip: 0,
|
||||
limit: 5
|
||||
});
|
||||
this.recentVendors = response.vendors || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load recent vendors:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load recent import jobs
|
||||
*/
|
||||
async loadRecentImports() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/imports', {
|
||||
skip: 0,
|
||||
limit: 5
|
||||
});
|
||||
this.recentImports = response.imports || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load recent imports:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Show different sections
|
||||
*/
|
||||
async showSection(section) {
|
||||
this.currentSection = section;
|
||||
|
||||
// Load data based on section
|
||||
if (section === 'vendors' && this.vendors.length === 0) {
|
||||
await this.loadAllVendors();
|
||||
} else if (section === 'users' && this.users.length === 0) {
|
||||
await this.loadAllUsers();
|
||||
} else if (section === 'imports' && this.imports.length === 0) {
|
||||
await this.loadAllImports();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all vendors
|
||||
*/
|
||||
async loadAllVendors() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendors', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.vendors = response.vendors || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load vendors:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load vendors',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all users
|
||||
*/
|
||||
async loadAllUsers() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/users', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.users = response.users || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load users:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load users',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all import jobs
|
||||
*/
|
||||
async loadAllImports() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/imports', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.imports = response.imports || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load import jobs:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load import jobs',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
57
static/admin/js/init-alpine.js
Normal file
57
static/admin/js/init-alpine.js
Normal 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
130
static/admin/js/login.js
Normal 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
1
static/admin/js/monitoring.js
Normal file
1
static/admin/js/monitoring.js
Normal file
@@ -0,0 +1 @@
|
||||
// System monitoring
|
||||
338
static/admin/js/vendor-edit.js
Normal file
338
static/admin/js/vendor-edit.js
Normal file
@@ -0,0 +1,338 @@
|
||||
// static/js/admin/vendor-edit.js
|
||||
|
||||
function vendorEdit() {
|
||||
return {
|
||||
currentUser: {},
|
||||
vendor: {},
|
||||
formData: {},
|
||||
errors: {},
|
||||
loadingVendor: true,
|
||||
saving: false,
|
||||
vendorId: null,
|
||||
|
||||
// Confirmation modal
|
||||
confirmModal: {
|
||||
show: false,
|
||||
title: '',
|
||||
message: '',
|
||||
warning: '',
|
||||
buttonText: '',
|
||||
buttonClass: 'btn-primary',
|
||||
onConfirm: () => {},
|
||||
onCancel: null
|
||||
},
|
||||
|
||||
// Success modal
|
||||
successModal: {
|
||||
show: false,
|
||||
title: '',
|
||||
message: '',
|
||||
details: null,
|
||||
note: ''
|
||||
},
|
||||
|
||||
// Transfer ownership
|
||||
showTransferOwnership: false,
|
||||
transferring: false,
|
||||
transferData: {
|
||||
new_owner_user_id: null,
|
||||
transfer_reason: '',
|
||||
confirm_transfer: false
|
||||
},
|
||||
|
||||
init() {
|
||||
console.log('=== Vendor Edit Initialization ===');
|
||||
|
||||
// Check authentication
|
||||
if (!Auth.isAuthenticated() || !Auth.isAdmin()) {
|
||||
console.log('Not authenticated as admin, redirecting to login');
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentUser = Auth.getCurrentUser();
|
||||
console.log('Current user:', this.currentUser.username);
|
||||
|
||||
// Get vendor ID from URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.vendorId = urlParams.get('id');
|
||||
|
||||
if (!this.vendorId) {
|
||||
console.error('No vendor ID in URL');
|
||||
alert('No vendor ID provided');
|
||||
window.location.href = '/static/admin/dashboard.html#vendors';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Vendor ID:', this.vendorId);
|
||||
|
||||
// Load vendor details
|
||||
this.loadVendor();
|
||||
},
|
||||
|
||||
async loadVendor() {
|
||||
this.loadingVendor = true;
|
||||
try {
|
||||
console.log('Loading vendor with ID:', this.vendorId);
|
||||
this.vendor = await apiClient.get(`/admin/vendors/${this.vendorId}`);
|
||||
console.log('✅ Vendor loaded:', this.vendor.vendor_code);
|
||||
console.log('Owner email:', this.vendor.owner_email);
|
||||
console.log('Contact email:', this.vendor.contact_email);
|
||||
|
||||
// Populate form data
|
||||
this.formData = {
|
||||
name: this.vendor.name,
|
||||
subdomain: this.vendor.subdomain,
|
||||
description: this.vendor.description || '',
|
||||
contact_email: this.vendor.contact_email || '',
|
||||
contact_phone: this.vendor.contact_phone || '',
|
||||
website: this.vendor.website || '',
|
||||
business_address: this.vendor.business_address || '',
|
||||
tax_number: this.vendor.tax_number || ''
|
||||
};
|
||||
|
||||
console.log('Form data populated');
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to load vendor:', error);
|
||||
Utils.showToast('Failed to load vendor details: ' + (error.message || 'Unknown error'), 'error');
|
||||
window.location.href = '/static/admin/dashboard.html#vendors';
|
||||
} finally {
|
||||
this.loadingVendor = false;
|
||||
}
|
||||
},
|
||||
|
||||
formatSubdomain() {
|
||||
this.formData.subdomain = this.formData.subdomain
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, '');
|
||||
},
|
||||
|
||||
async handleSubmit() {
|
||||
console.log('Submitting vendor update...');
|
||||
this.errors = {};
|
||||
this.saving = true;
|
||||
|
||||
try {
|
||||
const updatedVendor = await apiClient.put(
|
||||
`/admin/vendors/${this.vendorId}`,
|
||||
this.formData
|
||||
);
|
||||
|
||||
console.log('✅ Vendor updated successfully');
|
||||
Utils.showToast('Vendor updated successfully!', 'success');
|
||||
this.vendor = updatedVendor;
|
||||
|
||||
// Refresh form data with latest values
|
||||
this.formData.name = updatedVendor.name;
|
||||
this.formData.subdomain = updatedVendor.subdomain;
|
||||
this.formData.contact_email = updatedVendor.contact_email;
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to update vendor:', error);
|
||||
Utils.showToast(error.message || 'Failed to update vendor', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
showVerificationModal() {
|
||||
const action = this.vendor.is_verified ? 'unverify' : 'verify';
|
||||
const actionCap = this.vendor.is_verified ? 'Unverify' : 'Verify';
|
||||
|
||||
this.confirmModal = {
|
||||
show: true,
|
||||
title: `${actionCap} Vendor`,
|
||||
message: `Are you sure you want to ${action} this vendor?`,
|
||||
warning: this.vendor.is_verified
|
||||
? 'Unverifying this vendor will prevent them from being publicly visible and may affect their operations.'
|
||||
: 'Verifying this vendor will make them publicly visible and allow them to operate fully.',
|
||||
buttonText: actionCap,
|
||||
buttonClass: this.vendor.is_verified ? 'btn-warning' : 'btn-success',
|
||||
onConfirm: () => this.toggleVerification(),
|
||||
onCancel: null
|
||||
};
|
||||
},
|
||||
|
||||
async toggleVerification() {
|
||||
const action = this.vendor.is_verified ? 'unverify' : 'verify';
|
||||
console.log(`Toggling verification: ${action}`);
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
const result = await apiClient.put(`/admin/vendors/${this.vendorId}/verify`);
|
||||
this.vendor.is_verified = result.vendor.is_verified;
|
||||
console.log('✅ Verification toggled');
|
||||
Utils.showToast(result.message, 'success');
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to toggle verification:', error);
|
||||
Utils.showToast('Failed to update verification status', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
showStatusModal() {
|
||||
const action = this.vendor.is_active ? 'deactivate' : 'activate';
|
||||
const actionCap = this.vendor.is_active ? 'Deactivate' : 'Activate';
|
||||
|
||||
this.confirmModal = {
|
||||
show: true,
|
||||
title: `${actionCap} Vendor`,
|
||||
message: `Are you sure you want to ${action} this vendor?`,
|
||||
warning: this.vendor.is_active
|
||||
? 'Deactivating this vendor will immediately suspend all their operations and make them invisible to customers.'
|
||||
: 'Activating this vendor will restore their operations and make them visible again.',
|
||||
buttonText: actionCap,
|
||||
buttonClass: this.vendor.is_active ? 'btn-danger' : 'btn-success',
|
||||
onConfirm: () => this.toggleStatus(),
|
||||
onCancel: null
|
||||
};
|
||||
},
|
||||
|
||||
async toggleStatus() {
|
||||
const action = this.vendor.is_active ? 'deactivate' : 'activate';
|
||||
console.log(`Toggling status: ${action}`);
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
const result = await apiClient.put(`/admin/vendors/${this.vendorId}/status`);
|
||||
this.vendor.is_active = result.vendor.is_active;
|
||||
console.log('✅ Status toggled');
|
||||
Utils.showToast(result.message, 'success');
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to toggle status:', error);
|
||||
Utils.showToast('Failed to update vendor status', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleTransferOwnership() {
|
||||
// Validate inputs
|
||||
if (!this.transferData.confirm_transfer) {
|
||||
Utils.showToast('Please confirm the ownership transfer', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.transferData.new_owner_user_id) {
|
||||
Utils.showToast('Please enter the new owner user ID', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Close the transfer modal first
|
||||
this.showTransferOwnership = false;
|
||||
|
||||
// Wait a moment for modal to close
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
// Show final confirmation modal
|
||||
this.confirmModal = {
|
||||
show: true,
|
||||
title: '⚠️ FINAL CONFIRMATION: Transfer Ownership',
|
||||
message: `You are about to transfer ownership of "${this.vendor.name}" to user ID ${this.transferData.new_owner_user_id}.`,
|
||||
warning: `Current Owner: ${this.vendor.owner_username} (${this.vendor.owner_email})\n\n` +
|
||||
`This action will:\n` +
|
||||
`• Assign full ownership rights to the new user\n` +
|
||||
`• Demote the current owner to Manager role\n` +
|
||||
`• Be permanently logged for audit purposes\n\n` +
|
||||
`This action cannot be easily undone. Are you absolutely sure?`,
|
||||
buttonText: '🔄 Yes, Transfer Ownership',
|
||||
buttonClass: 'btn-danger',
|
||||
onConfirm: () => this.executeTransferOwnership(),
|
||||
onCancel: () => {
|
||||
// If cancelled, reopen the transfer modal with preserved data
|
||||
this.showTransferOwnership = true;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
async executeTransferOwnership() {
|
||||
console.log('Transferring ownership to user:', this.transferData.new_owner_user_id);
|
||||
this.transferring = true;
|
||||
this.saving = true;
|
||||
|
||||
try {
|
||||
const result = await apiClient.post(
|
||||
`/admin/vendors/${this.vendorId}/transfer-ownership`,
|
||||
this.transferData
|
||||
);
|
||||
|
||||
console.log('✅ Ownership transferred successfully');
|
||||
|
||||
// Show beautiful success modal
|
||||
this.successModal = {
|
||||
show: true,
|
||||
title: 'Ownership Transfer Complete',
|
||||
message: `The ownership of "${this.vendor.name}" has been successfully transferred.`,
|
||||
details: {
|
||||
oldOwner: {
|
||||
username: result.old_owner.username,
|
||||
email: result.old_owner.email
|
||||
},
|
||||
newOwner: {
|
||||
username: result.new_owner.username,
|
||||
email: result.new_owner.email
|
||||
}
|
||||
},
|
||||
note: 'The transfer has been logged for audit purposes. The previous owner has been assigned the Manager role.'
|
||||
};
|
||||
|
||||
Utils.showToast('Ownership transferred successfully', 'success');
|
||||
|
||||
// Reload vendor data to reflect new owner
|
||||
await this.loadVendor();
|
||||
|
||||
// Reset transfer form data
|
||||
this.transferData = {
|
||||
new_owner_user_id: null,
|
||||
transfer_reason: '',
|
||||
confirm_transfer: false
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to transfer ownership:', error);
|
||||
const errorMsg = error.message || error.detail || 'Unknown error';
|
||||
Utils.showToast(`Transfer failed: ${errorMsg}`, 'error');
|
||||
|
||||
// Show error in modal format (reuse success modal structure)
|
||||
alert(`❌ Transfer Failed\n\n${errorMsg}\n\nPlease check the user ID and try again.`);
|
||||
|
||||
// Reopen transfer modal so user can try again
|
||||
this.showTransferOwnership = true;
|
||||
} finally {
|
||||
this.transferring = false;
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleLogout() {
|
||||
// Show confirmation modal for logout
|
||||
this.confirmModal = {
|
||||
show: true,
|
||||
title: '🚪 Confirm Logout',
|
||||
message: 'Are you sure you want to logout from the Admin Portal?',
|
||||
warning: 'You will need to login again to access the admin dashboard.',
|
||||
buttonText: 'Yes, Logout',
|
||||
buttonClass: 'btn-danger',
|
||||
onConfirm: () => this.executeLogout(),
|
||||
onCancel: null
|
||||
};
|
||||
},
|
||||
|
||||
async executeLogout() {
|
||||
console.log('Logging out...');
|
||||
|
||||
// Show loading state briefly
|
||||
this.saving = true;
|
||||
|
||||
// Clear authentication
|
||||
Auth.logout();
|
||||
|
||||
// Show success message
|
||||
Utils.showToast('Logged out successfully', 'success', 1000);
|
||||
|
||||
// Redirect to login after brief delay
|
||||
setTimeout(() => {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
}, 500);
|
||||
},
|
||||
};
|
||||
}
|
||||
241
static/admin/js/vendors.js
Normal file
241
static/admin/js/vendors.js
Normal file
@@ -0,0 +1,241 @@
|
||||
// Admin Vendor Creation Component
|
||||
function vendorCreation() {
|
||||
return {
|
||||
currentUser: {},
|
||||
formData: {
|
||||
vendor_code: '',
|
||||
name: '',
|
||||
subdomain: '',
|
||||
description: '',
|
||||
owner_email: '',
|
||||
business_phone: '',
|
||||
website: '',
|
||||
business_address: '',
|
||||
tax_number: ''
|
||||
},
|
||||
loading: false,
|
||||
errors: {},
|
||||
showCredentials: false,
|
||||
credentials: null,
|
||||
|
||||
init() {
|
||||
if (!this.checkAuth()) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
checkAuth() {
|
||||
if (!Auth.isAuthenticated()) {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
const user = Auth.getCurrentUser();
|
||||
if (!user || user.role !== 'admin') {
|
||||
Utils.showToast('Access denied. Admin privileges required.', 'error');
|
||||
Auth.logout();
|
||||
window.location.href = '/static/admin/login.html';
|
||||
return false;
|
||||
}
|
||||
|
||||
this.currentUser = user;
|
||||
return true;
|
||||
},
|
||||
|
||||
async handleLogout() {
|
||||
const confirmed = await Utils.confirm(
|
||||
'Are you sure you want to logout?',
|
||||
'Confirm Logout'
|
||||
);
|
||||
|
||||
if (confirmed) {
|
||||
Auth.logout();
|
||||
Utils.showToast('Logged out successfully', 'success', 2000);
|
||||
setTimeout(() => {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
// Auto-format vendor code (uppercase)
|
||||
formatVendorCode() {
|
||||
this.formData.vendor_code = this.formData.vendor_code
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9_-]/g, '');
|
||||
},
|
||||
|
||||
// Auto-format subdomain (lowercase)
|
||||
formatSubdomain() {
|
||||
this.formData.subdomain = this.formData.subdomain
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]/g, '');
|
||||
},
|
||||
|
||||
clearErrors() {
|
||||
this.errors = {};
|
||||
},
|
||||
|
||||
validateForm() {
|
||||
this.clearErrors();
|
||||
let isValid = true;
|
||||
|
||||
// Required fields validation
|
||||
if (!this.formData.vendor_code.trim()) {
|
||||
this.errors.vendor_code = 'Vendor code is required';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!this.formData.name.trim()) {
|
||||
this.errors.name = 'Vendor name is required';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!this.formData.subdomain.trim()) {
|
||||
this.errors.subdomain = 'Subdomain is required';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!this.formData.owner_email.trim()) {
|
||||
this.errors.owner_email = 'Owner email is required';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (this.formData.owner_email && !emailRegex.test(this.formData.owner_email)) {
|
||||
this.errors.owner_email = 'Invalid email format';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Subdomain validation (must start and end with alphanumeric)
|
||||
const subdomainRegex = /^[a-z0-9][a-z0-9-]*[a-z0-9]$/;
|
||||
if (this.formData.subdomain && this.formData.subdomain.length > 1 &&
|
||||
!subdomainRegex.test(this.formData.subdomain)) {
|
||||
this.errors.subdomain = 'Subdomain must start and end with a letter or number';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
},
|
||||
|
||||
async handleSubmit() {
|
||||
if (!this.validateForm()) {
|
||||
Utils.showToast('Please fix validation errors', 'error');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
// Prepare data (remove empty fields)
|
||||
const submitData = {};
|
||||
for (const [key, value] of Object.entries(this.formData)) {
|
||||
if (value !== '' && value !== null && value !== undefined) {
|
||||
submitData[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Submitting vendor data:', submitData);
|
||||
|
||||
const response = await apiClient.post('/admin/vendors', submitData);
|
||||
|
||||
console.log('Vendor creation response:', response);
|
||||
|
||||
// Store credentials - be flexible with response structure
|
||||
this.credentials = {
|
||||
vendor_code: response.vendor_code || this.formData.vendor_code,
|
||||
subdomain: response.subdomain || this.formData.subdomain,
|
||||
name: response.name || this.formData.name,
|
||||
owner_username: response.owner_username || `${this.formData.subdomain}_owner`,
|
||||
owner_email: response.owner_email || this.formData.owner_email,
|
||||
temporary_password: response.temporary_password || 'PASSWORD_NOT_RETURNED',
|
||||
login_url: response.login_url ||
|
||||
`http://localhost:8000/vendor/${this.formData.subdomain}/login` ||
|
||||
`${this.formData.subdomain}.platform.com/vendor/login`
|
||||
};
|
||||
|
||||
console.log('Stored credentials:', this.credentials);
|
||||
|
||||
// Check if password was returned
|
||||
if (!response.temporary_password) {
|
||||
console.warn('⚠️ Warning: temporary_password not returned from API');
|
||||
console.warn('Full API response:', response);
|
||||
Utils.showToast('Vendor created but password not returned. Check server logs.', 'warning', 5000);
|
||||
}
|
||||
|
||||
// Show credentials display
|
||||
this.showCredentials = true;
|
||||
|
||||
// Success notification
|
||||
Utils.showToast('Vendor created successfully!', 'success');
|
||||
|
||||
// Scroll to top to see credentials
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating vendor:', error);
|
||||
|
||||
// Check for specific validation errors
|
||||
if (error.message.includes('vendor_code') || error.message.includes('Vendor code')) {
|
||||
this.errors.vendor_code = 'Vendor code already exists';
|
||||
} else if (error.message.includes('subdomain')) {
|
||||
this.errors.subdomain = 'Subdomain already exists';
|
||||
} else if (error.message.includes('email')) {
|
||||
this.errors.owner_email = 'Email already in use';
|
||||
}
|
||||
|
||||
Utils.showToast(
|
||||
error.message || 'Failed to create vendor',
|
||||
'error'
|
||||
);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
vendor_code: '',
|
||||
name: '',
|
||||
subdomain: '',
|
||||
description: '',
|
||||
owner_email: '',
|
||||
business_phone: '',
|
||||
website: '',
|
||||
business_address: '',
|
||||
tax_number: ''
|
||||
};
|
||||
this.clearErrors();
|
||||
this.showCredentials = false;
|
||||
this.credentials = null;
|
||||
},
|
||||
|
||||
copyToClipboard(text, label) {
|
||||
if (!text) {
|
||||
Utils.showToast('Nothing to copy', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
Utils.showToast(`${label} copied to clipboard`, 'success', 2000);
|
||||
}).catch((err) => {
|
||||
console.error('Failed to copy:', err);
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
Utils.showToast(`${label} copied to clipboard`, 'success', 2000);
|
||||
} catch (err) {
|
||||
Utils.showToast('Failed to copy to clipboard', 'error');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
133
static/admin/partials/header.html
Normal file
133
static/admin/partials/header.html
Normal 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>
|
||||
116
static/admin/partials/sidebar.html
Normal file
116
static/admin/partials/sidebar.html
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user