feat: add logging, marketplace, and admin enhancements
Database & Migrations: - Add application_logs table migration for hybrid cloud logging - Add companies table migration and restructure vendor relationships Logging System: - Implement hybrid logging system (database + file) - Add log_service for centralized log management - Create admin logs page with filtering and viewing capabilities - Add init_log_settings.py script for log configuration - Enhance core logging with database integration Marketplace Integration: - Add marketplace admin page with product management - Create marketplace vendor page with product listings - Implement marketplace.js for both admin and vendor interfaces - Add marketplace integration documentation Admin Enhancements: - Add imports management page and functionality - Create settings page for admin configuration - Add vendor themes management page - Enhance vendor detail and edit pages - Improve code quality dashboard and violation details - Add logs viewing and management - Update icons guide and shared icon system Architecture & Documentation: - Document frontend structure and component architecture - Document models structure and relationships - Add vendor-in-token architecture documentation - Add vendor RBAC (role-based access control) documentation - Document marketplace integration patterns - Update architecture patterns documentation Infrastructure: - Add platform static files structure (css, img, js) - Move architecture_scan.py to proper models location - Update model imports and registrations - Enhance exception handling - Update dependency injection patterns UI/UX: - Improve vendor edit interface - Update admin user interface - Enhance page templates documentation - Add vendor marketplace interface
This commit is contained in:
@@ -225,7 +225,7 @@ app/
|
||||
class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
title="Delete"
|
||||
>
|
||||
<span x-html="$icon('trash', 'w-5 h-5')"></span>
|
||||
<span x-html="$icon('delete', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -1308,3 +1308,361 @@ return {
|
||||
---
|
||||
|
||||
This template provides a complete, production-ready pattern for building admin pages with consistent structure, proper initialization, comprehensive logging, and excellent maintainability.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Real-World Examples: Marketplace Import Pages
|
||||
|
||||
The marketplace import system provides two comprehensive real-world implementations demonstrating all best practices.
|
||||
|
||||
### 1. Self-Service Import (`/admin/marketplace`)
|
||||
|
||||
**Purpose**: Admin tool for triggering imports for any vendor
|
||||
|
||||
**Files**:
|
||||
- **Template**: `app/templates/admin/marketplace.html`
|
||||
- **JavaScript**: `static/admin/js/marketplace.js`
|
||||
- **Route**: `app/routes/admin_pages.py` - `admin_marketplace_page()`
|
||||
|
||||
#### Key Features
|
||||
|
||||
##### Vendor Selection with Auto-Load
|
||||
```javascript
|
||||
// Load all vendors
|
||||
async loadVendors() {
|
||||
const response = await apiClient.get('/admin/vendors?limit=1000');
|
||||
this.vendors = response.items || [];
|
||||
}
|
||||
|
||||
// Handle vendor selection change
|
||||
onVendorChange() {
|
||||
const vendorId = parseInt(this.importForm.vendor_id);
|
||||
this.selectedVendor = this.vendors.find(v => v.id === vendorId) || null;
|
||||
}
|
||||
|
||||
// Quick fill from selected vendor's settings
|
||||
quickFill(language) {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
const urlMap = {
|
||||
'fr': this.selectedVendor.letzshop_csv_url_fr,
|
||||
'en': this.selectedVendor.letzshop_csv_url_en,
|
||||
'de': this.selectedVendor.letzshop_csv_url_de
|
||||
};
|
||||
|
||||
if (urlMap[language]) {
|
||||
this.importForm.csv_url = urlMap[language];
|
||||
this.importForm.language = language;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### Filter by Current User
|
||||
```javascript
|
||||
async loadJobs() {
|
||||
const params = new URLSearchParams({
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
created_by_me: 'true' // Only show jobs I triggered
|
||||
});
|
||||
|
||||
const response = await apiClient.get(
|
||||
`/admin/marketplace-import-jobs?${params.toString()}`
|
||||
);
|
||||
|
||||
this.jobs = response.items || [];
|
||||
}
|
||||
```
|
||||
|
||||
##### Vendor Name Helper
|
||||
```javascript
|
||||
getVendorName(vendorId) {
|
||||
const vendor = this.vendors.find(v => v.id === vendorId);
|
||||
return vendor ? `${vendor.name} (${vendor.vendor_code})` : `Vendor #${vendorId}`;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. Platform Monitoring (`/admin/imports`)
|
||||
|
||||
**Purpose**: System-wide oversight of all import jobs
|
||||
|
||||
**Files**:
|
||||
- **Template**: `app/templates/admin/imports.html`
|
||||
- **JavaScript**: `static/admin/js/imports.js`
|
||||
- **Route**: `app/routes/admin_pages.py` - `admin_imports_page()`
|
||||
|
||||
#### Key Features
|
||||
|
||||
##### Statistics Dashboard
|
||||
```javascript
|
||||
async loadStats() {
|
||||
const response = await apiClient.get('/admin/marketplace-import-jobs/stats');
|
||||
this.stats = {
|
||||
total: response.total || 0,
|
||||
active: (response.pending || 0) + (response.processing || 0),
|
||||
completed: response.completed || 0,
|
||||
failed: response.failed || 0
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
**Template**:
|
||||
```html
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||
<!-- Total 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-blue-500 bg-blue-100 rounded-full">
|
||||
<span x-html="$icon('cube', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Total Jobs
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Repeat for active, completed, failed -->
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Advanced Filtering
|
||||
```javascript
|
||||
filters: {
|
||||
vendor_id: '',
|
||||
status: '',
|
||||
marketplace: '',
|
||||
created_by: '' // 'me' or empty for all
|
||||
},
|
||||
|
||||
async applyFilters() {
|
||||
this.page = 1; // Reset to first page
|
||||
|
||||
const params = new URLSearchParams({
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
});
|
||||
|
||||
// Add filters
|
||||
if (this.filters.vendor_id) {
|
||||
params.append('vendor_id', this.filters.vendor_id);
|
||||
}
|
||||
if (this.filters.status) {
|
||||
params.append('status', this.filters.status);
|
||||
}
|
||||
if (this.filters.created_by === 'me') {
|
||||
params.append('created_by_me', 'true');
|
||||
}
|
||||
|
||||
await this.loadJobs();
|
||||
await this.loadStats(); // Update stats based on filters
|
||||
}
|
||||
```
|
||||
|
||||
**Template**:
|
||||
```html
|
||||
<div class="grid gap-4 md:grid-cols-5">
|
||||
<!-- Vendor Filter -->
|
||||
<select x-model="filters.vendor_id" @change="applyFilters()">
|
||||
<option value="">All Vendors</option>
|
||||
<template x-for="vendor in vendors" :key="vendor.id">
|
||||
<option :value="vendor.id"
|
||||
x-text="`${vendor.name} (${vendor.vendor_code})`">
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<select x-model="filters.status" @change="applyFilters()">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="failed">Failed</option>
|
||||
</select>
|
||||
|
||||
<!-- Creator Filter -->
|
||||
<select x-model="filters.created_by" @change="applyFilters()">
|
||||
<option value="">All Users</option>
|
||||
<option value="me">My Jobs Only</option>
|
||||
</select>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Enhanced Job Table
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Job ID</th>
|
||||
<th>Vendor</th>
|
||||
<th>Status</th>
|
||||
<th>Progress</th>
|
||||
<th>Created By</th> <!-- Extra column for platform monitoring -->
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="job in jobs" :key="job.id">
|
||||
<tr>
|
||||
<td>#<span x-text="job.id"></span></td>
|
||||
<td><span x-text="getVendorName(job.vendor_id)"></span></td>
|
||||
<td><!-- Status badge --></td>
|
||||
<td><!-- Progress metrics --></td>
|
||||
<td><span x-text="job.created_by_name || 'System'"></span></td>
|
||||
<td><!-- Action buttons --></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Comparison: Two Admin Interfaces
|
||||
|
||||
| Feature | Self-Service (`/marketplace`) | Platform Monitoring (`/imports`) |
|
||||
|---------|-------------------------------|----------------------------------|
|
||||
| **Purpose** | Import products for vendors | Monitor all system imports |
|
||||
| **Scope** | Personal (my jobs) | System-wide (all jobs) |
|
||||
| **Primary Action** | Trigger new imports | View and analyze |
|
||||
| **Jobs Shown** | Only jobs I triggered | All jobs (with filtering) |
|
||||
| **Vendor Selection** | Required (select vendor to import for) | Optional (filter view) |
|
||||
| **Statistics** | No | Yes (dashboard cards) |
|
||||
| **Auto-Refresh** | 10 seconds | 15 seconds |
|
||||
| **Filter Options** | Vendor, Status, Marketplace | Vendor, Status, Marketplace, Creator |
|
||||
| **Use Case** | "I need to import for Vendor X" | "What's happening system-wide?" |
|
||||
|
||||
---
|
||||
|
||||
## 📋 Navigation Structure
|
||||
|
||||
### Sidebar Organization
|
||||
|
||||
```javascript
|
||||
// Admin sidebar sections
|
||||
{
|
||||
"Main Navigation": [
|
||||
"Dashboard",
|
||||
"Users",
|
||||
"Vendors",
|
||||
"Marketplace Import" // ← Self-service import
|
||||
],
|
||||
"Platform Monitoring": [
|
||||
"Import Jobs", // ← System-wide monitoring
|
||||
"Application Logs"
|
||||
],
|
||||
"Settings": [
|
||||
"Settings"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Setting currentPage
|
||||
|
||||
```javascript
|
||||
// marketplace.js
|
||||
return {
|
||||
...data(),
|
||||
currentPage: 'marketplace', // Highlights "Marketplace Import" in sidebar
|
||||
// ...
|
||||
};
|
||||
|
||||
// imports.js
|
||||
return {
|
||||
...data(),
|
||||
currentPage: 'imports', // Highlights "Import Jobs" in sidebar
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI Patterns
|
||||
|
||||
### Success/Error Messages
|
||||
|
||||
```html
|
||||
<!-- Success -->
|
||||
<div x-show="successMessage" x-transition
|
||||
class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3')"></span>
|
||||
<p class="font-semibold" x-text="successMessage"></p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div x-show="error" x-transition
|
||||
class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/20">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3')"></span>
|
||||
<div>
|
||||
<p class="font-semibold">Error</p>
|
||||
<p class="text-sm" x-text="error"></p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Empty States
|
||||
|
||||
```html
|
||||
<!-- Personalized empty state -->
|
||||
<div x-show="!loading && jobs.length === 0" class="text-center py-12">
|
||||
<span x-html="$icon('inbox', 'inline w-12 h-12 text-gray-400 mb-4')"></span>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
You haven't triggered any imports yet
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Start a new import using the form above
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Loading States with Spinners
|
||||
|
||||
```html
|
||||
<div x-show="loading" class="text-center py-12">
|
||||
<span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Loading import jobs...</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Modal Dialogs
|
||||
|
||||
```html
|
||||
<div x-show="showJobModal" x-cloak @click.away="closeJobModal()"
|
||||
class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||
x-transition>
|
||||
<div class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Import Job Details</h3>
|
||||
<button @click="closeJobModal()">
|
||||
<span x-html="$icon('close', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div x-show="selectedJob">
|
||||
<!-- Job details grid -->
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="flex justify-end mt-6">
|
||||
<button @click="closeJobModal()" class="...">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Documentation
|
||||
|
||||
- [Marketplace Integration Guide](../../guides/marketplace-integration.md) - Complete marketplace system documentation
|
||||
- [Vendor Page Templates](../vendor/page-templates.md) - Vendor page patterns
|
||||
- [Icons Guide](../../development/icons-guide.md) - Available icons
|
||||
- [Admin Integration Guide](../../backend/admin-integration-guide.md) - Backend integration
|
||||
|
||||
|
||||
Reference in New Issue
Block a user