admin and vendor backends features
This commit is contained in:
498
static/admin/vendor-edit.html
Normal file
498
static/admin/vendor-edit.html
Normal file
@@ -0,0 +1,498 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Edit Vendor - Admin Portal</title>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body x-data="vendorEdit()" x-init="init()" x-cloak>
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<h1>🔐 Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">Welcome, <strong x-text="currentUser.username"></strong></span>
|
||||
<button class="btn-logout" @click="handleLogout">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="admin-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html" class="nav-link">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#vendors" class="nav-link active">
|
||||
🏪 Vendors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#users" class="nav-link">
|
||||
👥 Users
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/static/admin/dashboard.html#imports" class="nav-link">
|
||||
📦 Import Jobs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Loading State -->
|
||||
<div x-show="loadingVendor" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading vendor details...</p>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div x-show="!loadingVendor && vendor">
|
||||
<div class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">
|
||||
Edit Vendor: <span x-text="vendor?.name"></span>
|
||||
</h2>
|
||||
<div>
|
||||
<a href="/static/admin/dashboard.html#vendors" class="btn btn-secondary">
|
||||
← Back to Vendor Management
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions mb-3">
|
||||
<button
|
||||
@click="showVerificationModal()"
|
||||
class="btn"
|
||||
:class="vendor?.is_verified ? 'btn-warning' : 'btn-success'"
|
||||
:disabled="saving">
|
||||
<span x-text="vendor?.is_verified ? '❌ Unverify Vendor' : '✅ Verify Vendor'"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="showStatusModal()"
|
||||
class="btn"
|
||||
:class="vendor?.is_active ? 'btn-danger' : 'btn-success'"
|
||||
:disabled="saving">
|
||||
<span x-text="vendor?.is_active ? '🔒 Deactivate Vendor' : '🔓 Activate Vendor'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Basic Information</h3>
|
||||
|
||||
<!-- Vendor Code (read-only) -->
|
||||
<div class="form-group">
|
||||
<label for="vendorCode">Vendor Code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="vendorCode"
|
||||
name="vendor_code"
|
||||
x-model="vendor.vendor_code"
|
||||
disabled
|
||||
class="form-control-disabled"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">Cannot be changed after creation</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Name -->
|
||||
<div class="form-group">
|
||||
<label for="name">
|
||||
Vendor Name <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="vendor_name"
|
||||
x-model="formData.name"
|
||||
:class="{ 'error': errors.name }"
|
||||
required
|
||||
maxlength="255"
|
||||
:disabled="saving"
|
||||
autocomplete="organization"
|
||||
>
|
||||
<div x-show="errors.name"
|
||||
x-text="errors.name"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Subdomain -->
|
||||
<div class="form-group">
|
||||
<label for="subdomain">
|
||||
Subdomain <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subdomain"
|
||||
name="subdomain"
|
||||
x-model="formData.subdomain"
|
||||
@input="formatSubdomain"
|
||||
:class="{ 'error': errors.subdomain }"
|
||||
required
|
||||
maxlength="100"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">Lowercase letters, numbers, and hyphens only</div>
|
||||
<div x-show="errors.subdomain"
|
||||
x-text="errors.subdomain"
|
||||
class="error-message show"></div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
x-model="formData.description"
|
||||
rows="3"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="form-column">
|
||||
<h3 class="form-section-title">Contact & Business Information</h3>
|
||||
|
||||
<!-- Owner Email (read-only with warning) -->
|
||||
<div class="form-group">
|
||||
<label for="ownerEmail">Owner Email (Login)</label>
|
||||
<input
|
||||
type="email"
|
||||
id="ownerEmail"
|
||||
name="owner_email"
|
||||
x-model="vendor.owner_email"
|
||||
disabled
|
||||
class="form-control-disabled"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">
|
||||
⚠️ Owner email cannot be changed here. Use "Transfer Ownership" below to change the owner.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Email (editable) -->
|
||||
<div class="form-group">
|
||||
<label for="contactEmail">Business Contact Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="contactEmail"
|
||||
name="contact_email"
|
||||
x-model="formData.contact_email"
|
||||
:disabled="saving"
|
||||
autocomplete="email"
|
||||
>
|
||||
<div class="form-help">
|
||||
Public business contact email (can be different from owner email)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Phone -->
|
||||
<div class="form-group">
|
||||
<label for="contactPhone">Contact Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="contactPhone"
|
||||
name="contact_phone"
|
||||
x-model="formData.contact_phone"
|
||||
:disabled="saving"
|
||||
autocomplete="tel"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="form-group">
|
||||
<label for="website">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
id="website"
|
||||
name="website"
|
||||
x-model="formData.website"
|
||||
:disabled="saving"
|
||||
autocomplete="url"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Business Address -->
|
||||
<div class="form-group">
|
||||
<label for="businessAddress">Business Address</label>
|
||||
<textarea
|
||||
id="businessAddress"
|
||||
name="business_address"
|
||||
x-model="formData.business_address"
|
||||
rows="3"
|
||||
:disabled="saving"
|
||||
autocomplete="street-address"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tax Number -->
|
||||
<div class="form-group">
|
||||
<label for="taxNumber">Tax Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="taxNumber"
|
||||
name="tax_number"
|
||||
x-model="formData.tax_number"
|
||||
:disabled="saving"
|
||||
autocomplete="off"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transfer Ownership Section -->
|
||||
<div class="form-section-divider"></div>
|
||||
|
||||
<div class="form-group">
|
||||
<h3 class="form-section-title">⚠️ Change Vendor Owner</h3>
|
||||
<p class="text-muted mb-2">
|
||||
To change the owner to a different user account, use the Transfer Ownership feature.
|
||||
This will assign ownership to another user and demote the current owner to Manager.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@click="showTransferOwnership = true"
|
||||
class="btn btn-warning"
|
||||
:disabled="saving">
|
||||
🔄 Transfer Ownership to Different User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="window.location.href='/static/admin/dashboard.html#vendors'"
|
||||
:disabled="saving">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving">
|
||||
<span x-show="!saving">💾 Save Changes</span>
|
||||
<span x-show="saving">
|
||||
<span class="loading-spinner"></span>
|
||||
Saving...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal (for verify/status changes) -->
|
||||
<div x-show="confirmModal.show"
|
||||
class="modal-overlay"
|
||||
@click.self="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)"
|
||||
x-transition>
|
||||
<div class="modal-content modal-sm">
|
||||
<div class="modal-header">
|
||||
<h3 x-text="confirmModal.title"></h3>
|
||||
<button @click="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p x-text="confirmModal.message"></p>
|
||||
|
||||
<div x-show="confirmModal.warning" class="alert alert-warning mt-3" style="white-space: pre-line;">
|
||||
<strong>⚠️ Warning:</strong><br>
|
||||
<span x-text="confirmModal.warning"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="confirmModal.onCancel ? confirmModal.onCancel() : (confirmModal.show = false)"
|
||||
class="btn btn-secondary"
|
||||
:disabled="saving">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="confirmModal.onConfirm(); confirmModal.show = false"
|
||||
class="btn"
|
||||
:class="confirmModal.buttonClass"
|
||||
:disabled="saving">
|
||||
<span x-show="!saving" x-text="confirmModal.buttonText"></span>
|
||||
<span x-show="saving">
|
||||
<span class="loading-spinner"></span>
|
||||
Processing...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal (for transfer ownership success) -->
|
||||
<div x-show="successModal.show"
|
||||
class="modal-overlay"
|
||||
@click.self="successModal.show = false"
|
||||
x-transition>
|
||||
<div class="modal-content modal-md">
|
||||
<div class="modal-header modal-header-success">
|
||||
<h3>✅ <span x-text="successModal.title"></span></h3>
|
||||
<button @click="successModal.show = false" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="success-icon-wrapper">
|
||||
<div class="success-icon">✓</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center mb-4" x-text="successModal.message"></p>
|
||||
|
||||
<!-- Transfer Details -->
|
||||
<div x-show="successModal.details" class="transfer-details">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Previous Owner:</div>
|
||||
<div class="detail-value">
|
||||
<strong x-text="successModal.details?.oldOwner?.username"></strong>
|
||||
<br>
|
||||
<span class="text-muted" x-text="successModal.details?.oldOwner?.email"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-arrow">→</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">New Owner:</div>
|
||||
<div class="detail-value">
|
||||
<strong x-text="successModal.details?.newOwner?.username"></strong>
|
||||
<br>
|
||||
<span class="text-muted" x-text="successModal.details?.newOwner?.email"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="successModal.note" class="alert alert-info mt-3">
|
||||
<strong>ℹ️ Note:</strong>
|
||||
<span x-text="successModal.note"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="successModal.show = false"
|
||||
class="btn btn-primary btn-block">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal (for verify/status changes) -->
|
||||
|
||||
<!-- Transfer Ownership Modal -->
|
||||
<div x-show="showTransferOwnership"
|
||||
class="modal-overlay"
|
||||
@click.self="showTransferOwnership = false"
|
||||
x-transition>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>🔄 Transfer Vendor Ownership</h3>
|
||||
<button @click="showTransferOwnership = false" class="btn-close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-warning mb-3">
|
||||
<strong>⚠️ Warning:</strong> This will transfer complete ownership to another user.
|
||||
The current owner will be demoted to Manager role.
|
||||
</div>
|
||||
|
||||
<div class="info-box mb-3">
|
||||
<strong>Current Owner:</strong><br>
|
||||
<span x-text="vendor?.owner_username"></span> (<span x-text="vendor?.owner_email"></span>)
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="newOwnerId">
|
||||
New Owner User ID <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="newOwnerId"
|
||||
name="new_owner_user_id"
|
||||
x-model.number="transferData.new_owner_user_id"
|
||||
required
|
||||
placeholder="Enter user ID"
|
||||
min="1"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="form-help">
|
||||
Enter the ID of the user who will become the new owner
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="transferReason">Reason for Transfer</label>
|
||||
<textarea
|
||||
id="transferReason"
|
||||
name="transfer_reason"
|
||||
x-model="transferData.transfer_reason"
|
||||
rows="3"
|
||||
placeholder="Optional: Why is ownership being transferred?"
|
||||
autocomplete="off"
|
||||
></textarea>
|
||||
<div class="form-help">
|
||||
This will be logged for audit purposes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirmTransfer" class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="confirmTransfer"
|
||||
name="confirm_transfer"
|
||||
x-model="transferData.confirm_transfer"
|
||||
>
|
||||
I confirm this ownership transfer
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
@click="showTransferOwnership = false"
|
||||
class="btn btn-secondary"
|
||||
:disabled="transferring">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="handleTransferOwnership()"
|
||||
class="btn btn-danger"
|
||||
:disabled="!transferData.confirm_transfer || !transferData.new_owner_user_id || transferring">
|
||||
<span x-show="!transferring">🔄 Transfer Ownership</span>
|
||||
<span x-show="transferring">
|
||||
<span class="loading-spinner"></span>
|
||||
Transferring...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script src="/static/js/admin/vendor-edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user