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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html :class="{ 'theme-dark': dark }" x-data="dashboardData()" lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Admin Dashboard - Multi-Tenant Ecommerce Platform</title>
|
<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" />
|
||||||
<!-- Font Awesome -->
|
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
|
|
||||||
<!-- Styles -->
|
|
||||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
|
||||||
<link rel="stylesheet" href="/static/css/shared/components.css">
|
|
||||||
<link rel="stylesheet" href="/static/css/shared/modals.css">
|
|
||||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
[x-cloak] { display: none !important; }
|
[x-cloak] { display: none !important; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</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 class="flex flex-col flex-1 w-full">
|
||||||
<div x-html="adminLayoutTemplates.header()"></div>
|
<!-- Header Container -->
|
||||||
|
<div id="header-container"></div>
|
||||||
|
|
||||||
<!-- Admin Sidebar (Injected from template) -->
|
<!-- Main Content -->
|
||||||
<div x-html="adminLayoutTemplates.sidebar()"></div>
|
<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 -->
|
<!-- Stats Cards -->
|
||||||
<main class="admin-content">
|
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||||
<!-- Dashboard View -->
|
<!-- Card: Total Vendors -->
|
||||||
<div x-show="currentSection === 'dashboard'">
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
<!-- Stats Grid -->
|
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
|
||||||
<div class="stats-grid">
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<div class="stat-card">
|
<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>
|
||||||
<div class="stat-header">
|
</svg>
|
||||||
<div class="stat-title">Total Vendors</div>
|
</div>
|
||||||
<div class="stat-icon">🏪</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>
|
||||||
<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">
|
<!-- Recent Vendors Table -->
|
||||||
<div class="stat-header">
|
<div class="w-full overflow-hidden rounded-lg shadow-xs">
|
||||||
<div class="stat-title">Total Users</div>
|
<div class="w-full overflow-x-auto">
|
||||||
<div class="stat-icon">👥</div>
|
<table class="w-full whitespace-no-wrap">
|
||||||
</div>
|
<thead>
|
||||||
<div class="stat-value" x-text="stats.users?.total_users || 0"></div>
|
<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">
|
||||||
<div class="stat-subtitle">
|
<th class="px-4 py-3">Vendor</th>
|
||||||
<span x-text="stats.users?.active_users || 0"></span> active
|
<th class="px-4 py-3">Status</th>
|
||||||
</div>
|
<th class="px-4 py-3">Created</th>
|
||||||
</div>
|
<th class="px-4 py-3">Actions</th>
|
||||||
|
|
||||||
<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>
|
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</thead>
|
||||||
</tbody>
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||||
</table>
|
<template x-if="vendors.length === 0">
|
||||||
</div>
|
<tr>
|
||||||
</template>
|
<td colspan="4" class="px-4 py-3 text-sm text-center text-gray-600 dark:text-gray-400">
|
||||||
</div>
|
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 -->
|
<template x-for="vendor in vendors" :key="vendor.id">
|
||||||
<div class="content-section">
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
<div class="section-header">
|
<td class="px-4 py-3">
|
||||||
<h2 class="section-title">Recent Import Jobs</h2>
|
<div class="flex items-center text-sm">
|
||||||
<button class="btn-primary" @click="showSection('imports')">View All</button>
|
<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>
|
||||||
|
</main>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Vendors View -->
|
<!-- Load partials BEFORE Alpine -->
|
||||||
<div x-show="currentSection === 'vendors'">
|
<script src="/static/shared/js/partial-loader.js"></script>
|
||||||
<div class="content-section">
|
<script src="/static/shared/js/icons.js"></script>
|
||||||
<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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Initialize table scroll detection
|
// Load partials synchronously before Alpine starts
|
||||||
document.addEventListener('alpine:init', () => {
|
(async () => {
|
||||||
// Wait for Alpine to finish rendering
|
await window.partialLoader.loadAll({
|
||||||
setTimeout(() => {
|
'header-container': 'header.html',
|
||||||
const tables = document.querySelectorAll('.table-responsive');
|
'sidebar-container': 'sidebar.html'
|
||||||
tables.forEach(table => {
|
});
|
||||||
table.addEventListener('scroll', function() {
|
})();
|
||||||
if (this.scrollLeft > 0) {
|
|
||||||
this.classList.add('is-scrolled');
|
|
||||||
} else {
|
|
||||||
this.classList.remove('is-scrolled');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
</script>
|
</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>
|
</body>
|
||||||
</html>
|
</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 |
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,95 +1,164 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html :class="{ 'theme-dark': dark }" x-data="loginData()" lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Admin Login - Multi-Tenant Ecommerce Platform</title>
|
<title>Admin Login - Multi-Tenant Platform</title>
|
||||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<style>
|
||||||
|
[x-cloak] { display: none !important; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="auth-page" x-data="adminLogin()" x-cloak>
|
<div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
|
||||||
<div class="login-container">
|
<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="login-header">
|
<div class="flex flex-col overflow-y-auto md:flex-row">
|
||||||
<div class="auth-logo">🔐</div>
|
<div class="h-32 md:h-auto md:w-1/2">
|
||||||
<h1>Admin Portal</h1>
|
<img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
|
||||||
<p>Multi-Tenant Ecommerce Platform</p>
|
src="/static/admin/img/login-office.jpeg" alt="Office" />
|
||||||
</div>
|
<img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
|
||||||
|
src="/static/admin/img/login-office-dark.jpeg" alt="Office" />
|
||||||
<!-- Alert Messages -->
|
|
||||||
<div x-show="error"
|
|
||||||
x-text="error"
|
|
||||||
class="alert alert-error"
|
|
||||||
x-transition></div>
|
|
||||||
|
|
||||||
<div x-show="success"
|
|
||||||
x-text="success"
|
|
||||||
class="alert alert-success"
|
|
||||||
x-transition></div>
|
|
||||||
|
|
||||||
<!-- Login Form -->
|
|
||||||
<form @submit.prevent="handleLogin">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username">Username</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="username"
|
|
||||||
x-model="credentials.username"
|
|
||||||
:class="{ 'error': errors.username }"
|
|
||||||
required
|
|
||||||
autocomplete="username"
|
|
||||||
placeholder="Enter your username"
|
|
||||||
:disabled="loading"
|
|
||||||
@input="clearErrors"
|
|
||||||
>
|
|
||||||
<div x-show="errors.username"
|
|
||||||
x-text="errors.username"
|
|
||||||
class="error-message show"
|
|
||||||
x-transition></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<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">
|
<!-- Alert Messages -->
|
||||||
<label for="password">Password</label>
|
<div x-show="error" x-text="error"
|
||||||
<input
|
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"
|
||||||
type="password"
|
x-transition></div>
|
||||||
id="password"
|
|
||||||
x-model="credentials.password"
|
<div x-show="success" x-text="success"
|
||||||
:class="{ 'error': errors.password }"
|
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"
|
||||||
required
|
x-transition></div>
|
||||||
autocomplete="current-password"
|
|
||||||
placeholder="Enter your password"
|
<!-- Login Form -->
|
||||||
:disabled="loading"
|
<form @submit.prevent="handleLogin">
|
||||||
@input="clearErrors"
|
<label class="block text-sm">
|
||||||
>
|
<span class="text-gray-700 dark:text-gray-400">Username</span>
|
||||||
<div x-show="errors.password"
|
<input x-model="credentials.username"
|
||||||
x-text="errors.password"
|
:disabled="loading"
|
||||||
class="error-message show"
|
@input="clearErrors"
|
||||||
x-transition></div>
|
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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/shared/api-client.js"></script>
|
<!-- Alpine.js v3 -->
|
||||||
<script src="/static/js/admin/login.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/shared/api-client.js"></script>
|
<script src="/static/shared/js/api-client.js"></script>
|
||||||
<script src="/static/js/admin/vendor-edit.js"></script>
|
<script src="/static/admin/js/vendor-edit.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,401 +1,201 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html :class="{ 'theme-dark': dark }" x-data="vendorsData()" lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Create Vendor - Admin Portal</title>
|
<title>Vendors - Admin Portal</title>
|
||||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<style>
|
||||||
|
[x-cloak] { display: none !important; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body x-data="vendorCreation()" x-init="init()" x-cloak>
|
<body x-cloak>
|
||||||
<!-- Header -->
|
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
|
||||||
<header class="admin-header">
|
<!-- Sidebar Container -->
|
||||||
<div class="header-left">
|
<div id="sidebar-container"></div>
|
||||||
<h1>🔐 Admin Dashboard</h1>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<span class="user-info">Welcome, <strong x-text="currentUser.username"></strong></span>
|
|
||||||
<button class="btn-logout" @click="handleLogout">Logout</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Main Container -->
|
<div class="flex flex-col flex-1 w-full">
|
||||||
<div class="admin-container">
|
<!-- Header Container -->
|
||||||
<!-- Sidebar -->
|
<div id="header-container"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="admin-content">
|
<main class="h-full overflow-y-auto">
|
||||||
<!-- Form View -->
|
<div class="container px-6 mx-auto grid">
|
||||||
<div x-show="!showCredentials">
|
<div class="flex items-center justify-between my-6">
|
||||||
<div class="content-section">
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||||
<div class="section-header">
|
Vendor Management
|
||||||
<h2 class="section-title">Create New Vendor</h2>
|
</h2>
|
||||||
<a href="/static/admin/dashboard.html" class="btn btn-secondary">
|
<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">
|
||||||
← Back to Dashboard
|
<!-- Heroicon: plus -->
|
||||||
</a>
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</div>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
||||||
|
</svg>
|
||||||
<form @submit.prevent="handleSubmit">
|
Create Vendor
|
||||||
<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
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</main>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/shared/api-client.js"></script>
|
<!-- Load partials BEFORE Alpine -->
|
||||||
<script src="/static/js/admin/vendors.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
// Admin Login Component
|
|
||||||
function adminLogin() {
|
|
||||||
return {
|
|
||||||
credentials: {
|
|
||||||
username: '',
|
|
||||||
password: ''
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
error: null,
|
|
||||||
success: null,
|
|
||||||
errors: {},
|
|
||||||
|
|
||||||
init() {
|
|
||||||
// Check if already logged in
|
|
||||||
this.checkExistingAuth();
|
|
||||||
},
|
|
||||||
|
|
||||||
checkExistingAuth() {
|
|
||||||
if (Auth.isAuthenticated() && Auth.isAdmin()) {
|
|
||||||
window.location.href = '/static/admin/dashboard.html';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
clearErrors() {
|
|
||||||
this.error = null;
|
|
||||||
this.errors = {};
|
|
||||||
},
|
|
||||||
|
|
||||||
validateForm() {
|
|
||||||
this.clearErrors();
|
|
||||||
let isValid = true;
|
|
||||||
|
|
||||||
if (!this.credentials.username.trim()) {
|
|
||||||
this.errors.username = 'Username is required';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.credentials.password) {
|
|
||||||
this.errors.password = 'Password is required';
|
|
||||||
isValid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isValid;
|
|
||||||
},
|
|
||||||
|
|
||||||
async handleLogin() {
|
|
||||||
if (!this.validateForm()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loading = true;
|
|
||||||
this.clearErrors();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await apiClient.post('/admin/auth/login', {
|
|
||||||
username: this.credentials.username.trim(),
|
|
||||||
password: this.credentials.password
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check if user is admin
|
|
||||||
if (response.user.role !== 'admin') {
|
|
||||||
throw new Error('Access denied. Admin privileges required.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store authentication data
|
|
||||||
localStorage.setItem('admin_token', response.access_token);
|
|
||||||
localStorage.setItem('admin_user', JSON.stringify(response.user));
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
this.success = 'Login successful! Redirecting...';
|
|
||||||
Utils.showToast('Login successful!', 'success', 2000);
|
|
||||||
|
|
||||||
// Redirect after short delay
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = '/static/admin/dashboard.html';
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Login error:', error);
|
|
||||||
this.error = error.message || 'Login failed. Please check your credentials.';
|
|
||||||
Utils.showToast(this.error, 'error');
|
|
||||||
} finally {
|
|
||||||
this.loading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
63
static/shared/js/partial-loader.js
Normal file
63
static/shared/js/partial-loader.js
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
/**
|
||||||
|
* Partial Loader for Alpine.js v3
|
||||||
|
* Loads HTML partials before Alpine initializes
|
||||||
|
*/
|
||||||
|
class PartialLoader {
|
||||||
|
constructor(area) {
|
||||||
|
this.area = area; // 'admin', 'vendor', or 'shop'
|
||||||
|
this.baseUrl = `/static/${area}/partials/`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async load(containerId, partialName) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${this.baseUrl}${partialName}`);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
console.warn(`Failed to load partial: ${partialName} (${response.status})`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const html = await response.text();
|
||||||
|
const container = document.getElementById(containerId);
|
||||||
|
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = html;
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
console.warn(`Container not found: ${containerId}`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error loading partial ${partialName}:`, error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadAll(partials) {
|
||||||
|
const promises = Object.entries(partials).map(
|
||||||
|
([containerId, partialName]) => this.load(containerId, partialName)
|
||||||
|
);
|
||||||
|
|
||||||
|
const results = await Promise.all(promises);
|
||||||
|
const successCount = results.filter(r => r).length;
|
||||||
|
|
||||||
|
console.log(`Loaded ${successCount}/${results.length} partials successfully`);
|
||||||
|
|
||||||
|
return results.every(r => r);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-detect area from URL path
|
||||||
|
function getAreaFromPath() {
|
||||||
|
const path = window.location.pathname;
|
||||||
|
|
||||||
|
if (path.includes('/admin/')) return 'admin';
|
||||||
|
if (path.includes('/vendor/')) return 'vendor';
|
||||||
|
if (path.includes('/shop/')) return 'shop';
|
||||||
|
|
||||||
|
return 'shop'; // default
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create global instance
|
||||||
|
window.PartialLoader = PartialLoader;
|
||||||
|
window.partialLoader = new PartialLoader(getAreaFromPath());
|
||||||
2
static/vendor/dashboard.html
vendored
2
static/vendor/dashboard.html
vendored
@@ -154,7 +154,7 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/shared/api-client.js"></script>
|
<script src="/static/shared/js/api-client.js"></script>
|
||||||
<script src="/static/js/vendor/dashboard.js"></script>
|
<script src="/static/js/vendor/dashboard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
2
static/vendor/login.html
vendored
2
static/vendor/login.html
vendored
@@ -115,7 +115,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/shared/api-client.js"></script>
|
<script src="/static/shared/js/api-client.js"></script>
|
||||||
<script src="/static/js/vendor/login.js"></script>
|
<script src="/static/js/vendor/login.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user