sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

admin login migration to new structure, new design

Browse Source
This commit is contained in:
Samir Boulahtit
2025-10-19 19:20:21 +02:00
parent f65a40b533
commit a7d9d44a13
25 changed files with 1081 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
static/admin/vendors.html
View File

@@ -1,401 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<html :class="{ 'theme-dark': dark }" x-data="vendorsData()" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Vendor - Admin Portal</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/admin/admin.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vendors - Admin Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/admin/css/tailwind.output.css" />
<style>
[x-cloak] { display: none !important; }
</style>
</head>
<body x-data="vendorCreation()" x-init="init()" x-cloak>
<!-- Header -->
<header class="admin-header">
<div class="header-left">
<h1>🔐 Admin Dashboard</h1>
</div>
<div class="header-right">
<span class="user-info">Welcome, <strong x-text="currentUser.username"></strong></span>
<button class="btn-logout" @click="handleLogout">Logout</button>
</div>
</header>
<body x-cloak>
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" :class="{ 'overflow-hidden': isSideMenuOpen }">
<!-- Sidebar Container -->
<div id="sidebar-container"></div>
<!-- Main Container -->
<div class="admin-container">
<!-- Sidebar -->
<aside class="admin-sidebar">
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="/static/admin/dashboard.html" class="nav-link">
📊 Dashboard
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">
🏪 Vendors
</a>
</li>
<li class="nav-item">
<a href="/static/admin/dashboard.html#users" class="nav-link">
👥 Users
</a>
</li>
<li class="nav-item">
<a href="/static/admin/dashboard.html#imports" class="nav-link">
📦 Import Jobs
</a>
</li>
</ul>
</nav>
</aside>
<div class="flex flex-col flex-1 w-full">
<!-- Header Container -->
<div id="header-container"></div>
<!-- Main Content -->
<main class="admin-content">
<!-- Form View -->
<div x-show="!showCredentials">
<div class="content-section">
<div class="section-header">
<h2 class="section-title">Create New Vendor</h2>
<a href="/static/admin/dashboard.html" class="btn btn-secondary">
← Back to Dashboard
</a>
</div>
<form @submit.prevent="handleSubmit">
<div class="form-grid">
<!-- Left Column -->
<div class="form-column">
<h3 class="form-section-title">Basic Information</h3>
<!-- Vendor Code -->
<div class="form-group">
<label for="vendorCode">
Vendor Code <span class="required">*</span>
</label>
<input
type="text"
id="vendorCode"
x-model="formData.vendor_code"
@input="formatVendorCode"
:class="{ 'error': errors.vendor_code }"
required
placeholder="e.g., TECHSTORE"
maxlength="50"
:disabled="loading"
>
<div class="form-help">Uppercase letters, numbers, underscores, and hyphens only</div>
<div x-show="errors.vendor_code"
x-text="errors.vendor_code"
class="error-message show"></div>
</div>
<!-- Vendor Name -->
<div class="form-group">
<label for="name">
Vendor Name <span class="required">*</span>
</label>
<input
type="text"
id="name"
x-model="formData.name"
:class="{ 'error': errors.name }"
required
placeholder="e.g., Tech Store Luxembourg"
maxlength="255"
:disabled="loading"
>
<div class="form-help">Display name for the vendor</div>
<div x-show="errors.name"
x-text="errors.name"
class="error-message show"></div>
</div>
<!-- Subdomain -->
<div class="form-group">
<label for="subdomain">
Subdomain <span class="required">*</span>
</label>
<input
type="text"
id="subdomain"
x-model="formData.subdomain"
@input="formatSubdomain"
:class="{ 'error': errors.subdomain }"
required
placeholder="e.g., techstore"
maxlength="100"
:disabled="loading"
>
<div class="form-help">Lowercase letters, numbers, and hyphens only</div>
<div x-show="errors.subdomain"
x-text="errors.subdomain"
class="error-message show"></div>
</div>
<!-- Description -->
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description"
x-model="formData.description"
placeholder="Brief description of the vendor's business"
rows="3"
:disabled="loading"
></textarea>
<div class="form-help">Optional description of the vendor</div>
</div>
</div>
<!-- Right Column -->
<div class="form-column">
<h3 class="form-section-title">Contact & Business Information</h3>
<!-- Owner Email -->
<div class="form-group">
<label for="ownerEmail">
Owner Email <span class="required">*</span>
</label>
<input
type="email"
id="ownerEmail"
x-model="formData.owner_email"
:class="{ 'error': errors.owner_email }"
required
placeholder="owner@example.com"
:disabled="loading"
>
<div class="form-help">Login credentials will be sent to this email</div>
<div x-show="errors.owner_email"
x-text="errors.owner_email"
class="error-message show"></div>
</div>
<!-- Contact Phone -->
<div class="form-group">
<label for="contactPhone">Contact Phone</label>
<input
type="tel"
id="contactPhone"
x-model="formData.business_phone"
placeholder="+352 123 456 789"
:disabled="loading"
>
<div class="form-help">Optional contact phone number</div>
</div>
<!-- Website -->
<div class="form-group">
<label for="website">Website</label>
<input
type="url"
id="website"
x-model="formData.website"
placeholder="https://example.com"
:disabled="loading"
>
<div class="form-help">Optional website URL</div>
</div>
<!-- Business Address -->
<div class="form-group">
<label for="businessAddress">Business Address</label>
<textarea
id="businessAddress"
x-model="formData.business_address"
placeholder="Street, City, Country"
rows="3"
:disabled="loading"
></textarea>
</div>
<!-- Tax Number -->
<div class="form-group">
<label for="taxNumber">Tax Number</label>
<input
type="text"
id="taxNumber"
x-model="formData.tax_number"
placeholder="LU12345678"
:disabled="loading"
>
</div>
</div>
</div>
<div class="form-actions">
<button type="button"
class="btn btn-secondary"
@click="window.location.href='/static/admin/dashboard.html'"
:disabled="loading">
Cancel
</button>
<button type="submit"
class="btn btn-primary"
:disabled="loading">
<span x-show="!loading">Create Vendor</span>
<span x-show="loading">
<span class="loading-spinner"></span>
Creating vendor...
</span>
</button>
</div>
</form>
</div>
</div>
<!-- Success credentials display -->
<div x-show="showCredentials">
<div class="content-section">
<div class="credentials-success">
<div class="success-icon">✅</div>
<h2>Vendor Created Successfully!</h2>
<p class="success-message">
The vendor has been created and credentials have been generated.
Please save these credentials securely.
</p>
</div>
<!-- Debug info (remove in production) -->
<div x-show="credentials" style="display: none;">
<pre x-text="JSON.stringify(credentials, null, 2)"></pre>
</div>
<div class="credentials-grid">
<div class="credential-card">
<div class="credential-label">Vendor Code</div>
<div class="credential-value-group">
<span class="credential-value" x-text="credentials?.vendor_code || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.vendor_code, 'Vendor code')"
title="Copy to clipboard"
:disabled="!credentials?.vendor_code">
📋
</button>
</div>
</div>
<div class="credential-card">
<div class="credential-label">Vendor Name</div>
<div class="credential-value-group">
<span class="credential-value" x-text="credentials?.name || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.name, 'Vendor name')"
title="Copy to clipboard"
:disabled="!credentials?.name">
📋
</button>
</div>
</div>
<div class="credential-card">
<div class="credential-label">Subdomain</div>
<div class="credential-value-group">
<span class="credential-value" x-text="credentials?.subdomain || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.subdomain, 'Subdomain')"
title="Copy to clipboard"
:disabled="!credentials?.subdomain">
📋
</button>
</div>
</div>
<div class="credential-card">
<div class="credential-label">Owner Email</div>
<div class="credential-value-group">
<span class="credential-value" x-text="credentials?.owner_email || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.owner_email, 'Email')"
title="Copy to clipboard"
:disabled="!credentials?.owner_email">
📋
</button>
</div>
</div>
<div class="credential-card">
<div class="credential-label">Owner Username</div>
<div class="credential-value-group">
<span class="credential-value" x-text="credentials?.owner_username || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.owner_username, 'Username')"
title="Copy to clipboard"
:disabled="!credentials?.owner_username">
📋
</button>
</div>
</div>
<div class="credential-card credential-card-highlight">
<div class="credential-label">
<span>⚠️ Temporary Password</span>
</div>
<div class="credential-value-group">
<template x-if="credentials?.temporary_password && credentials.temporary_password !== 'PASSWORD_NOT_RETURNED'">
<span class="credential-value" x-text="credentials.temporary_password"></span>
</template>
<template x-if="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'">
<span class="credential-value text-danger">
⚠️ Password not returned - Check server logs
</span>
</template>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.temporary_password, 'Password')"
title="Copy to clipboard"
:disabled="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'">
📋
</button>
</div>
<div class="credential-warning">
This password will not be shown again. Make sure to save it securely.
</div>
</div>
<div class="credential-card credential-card-full">
<div class="credential-label">Login URL</div>
<div class="credential-value-group">
<span class="credential-value credential-value-url" x-text="credentials?.login_url || 'N/A'"></span>
<button type="button"
class="btn-icon"
@click="copyToClipboard(credentials?.login_url, 'Login URL')"
title="Copy to clipboard"
:disabled="!credentials?.login_url">
📋
</button>
</div>
</div>
</div>
<!-- Warning if password not returned -->
<div x-show="!credentials?.temporary_password || credentials.temporary_password === 'PASSWORD_NOT_RETURNED'"
class="alert alert-warning mt-3">
<strong>⚠️ Warning:</strong> The temporary password was not returned by the server.
This might be a backend configuration issue. Please check the server logs or contact the system administrator.
</div>
<div class="form-actions" style="margin-top: 24px;">
<button class="btn btn-secondary"
@click="resetForm(); showCredentials = false">
➕ Create Another Vendor
</button>
<button class="btn btn-primary"
@click="window.location.href='/static/admin/dashboard.html'">
← Back to Dashboard
<!-- Main Content -->
<main class="h-full overflow-y-auto">
<div class="container px-6 mx-auto grid">
<div class="flex items-center justify-between my-6">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
Vendor Management
</h2>
<button class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
<!-- Heroicon: plus -->
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Vendor
</button>
</div>
<!-- Placeholder Content -->
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="text-center py-12">
<div class="mb-4">
<!-- Heroicon: shopping-bag (outline, large) -->
<svg class="mx-auto h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
Vendor Management
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-400">
This page will display vendor list and management tools.
</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
Features to be implemented:
</p>
<ul class="mt-4 text-sm text-gray-600 dark:text-gray-400 space-y-2">
<li>• View all vendors with filtering and search</li>
<li>• Create new vendors with detailed forms</li>
<li>• Edit vendor information</li>
<li>• Verify/unverify vendors</li>
<li>• View vendor statistics</li>
</ul>
</div>
</div>
<!-- Example vendors table structure (for reference) -->
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
<th class="px-4 py-3">Vendor Code</th>
<th class="px-4 py-3">Name</th>
<th class="px-4 py-3">Subdomain</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Created</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="vendors.length === 0">
<tr>
<td colspan="6" class="px-4 py-8 text-sm text-center text-gray-600 dark:text-gray-400">
<div class="flex flex-col items-center">
<svg class="w-16 h-16 mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg>
<p class="font-medium">No vendors found</p>
<p class="text-xs mt-1">Create your first vendor to get started</p>
</div>
</td>
</tr>
</template>
<template x-for="vendor in vendors" :key="vendor.id">
<tr class="text-gray-700 dark:text-gray-400">
<td class="px-4 py-3">
<p class="font-semibold text-sm" x-text="vendor.vendor_code"></p>
</td>
<td class="px-4 py-3 text-sm" x-text="vendor.name"></td>
<td class="px-4 py-3 text-sm" x-text="vendor.subdomain"></td>
<td class="px-4 py-3 text-xs">
<span class="px-2 py-1 font-semibold leading-tight rounded-full"
:class="vendor.is_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'"
x-text="vendor.is_verified ? 'Verified' : 'Pending'">
</span>
</td>
<td class="px-4 py-3 text-sm" x-text="formatDate(vendor.created_at)"></td>
<td class="px-4 py-3">
<div class="flex items-center space-x-4 text-sm">
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray"
aria-label="Edit">
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
</svg>
</button>
<button class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none focus:shadow-outline-gray"
aria-label="Delete">
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
<script src="/static/js/shared/api-client.js"></script>
<script src="/static/js/admin/vendors.js"></script>
<!-- Load partials BEFORE Alpine -->
<script src="/static/shared/js/partial-loader.js"></script>
<script src="/static/shared/js/icons.js"></script>
<script>
(async () => {
await window.partialLoader.loadAll({
'header-container': 'header.html',
'sidebar-container': 'sidebar.html'
});
})();
</script>
<!-- Alpine.js v3 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<!-- Initialize Alpine data -->
<script src="/static/admin/js/init-alpine.js"></script>
<!-- Vendors-specific logic -->
<script>
function vendorsData() {
return {
...data(), // Spread base data from init-alpine.js
currentPage: 'vendors',
vendors: [],
loading: false,
async init() {
await this.loadVendors();
},
async loadVendors() {
this.loading = true;
try {
// Replace with your actual API endpoint
const response = await fetch('/api/v1/admin/vendors', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
if (response.ok) {
const data = await response.json();
this.vendors = data.vendors || [];
}
} catch (error) {
console.error('Error loading vendors:', error);
} finally {
this.loading = false;
}
},
formatDate(dateString) {
if (!dateString) return '-';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
}
}
</script>
</body>
</html>