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

feat: add logging, marketplace, and admin enhancements

Browse Source 
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:
Samir Boulahtit
2025-12-01 21:51:07 +01:00
parent 915734e9b4
commit cc74970223
56 changed files with 8440 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
docs/frontend/admin/page-templates.md
View File

@@ -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

199
docs/frontend/vendor/page-templates.md vendored
View File

@@ -220,7 +220,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>
@@ -994,3 +994,200 @@ The base template loads scripts in this specific order:
---
This template provides a complete, production-ready pattern for building vendor admin pages with consistent structure, error handling, and user experience.
---
## 🎯 Real-World Example: Marketplace Import Page
The marketplace import page is a comprehensive real-world implementation demonstrating all best practices.
### Implementation Files
**Template**: `app/templates/vendor/marketplace.html`
**JavaScript**: `static/vendor/js/marketplace.js`
**Route**: `app/routes/vendor_pages.py` - `vendor_marketplace_page()`
### Key Features Demonstrated
#### 1. Complete Form Handling
```javascript
// Import form with validation
importForm: {
csv_url: '',
marketplace: 'Letzshop',
language: 'fr',
batch_size: 1000
},
async startImport() {
if (!this.importForm.csv_url) {
this.error = 'Please enter a CSV URL';
return;
}
this.importing = true;
try {
const response = await apiClient.post('/vendor/marketplace/import', {
source_url: this.importForm.csv_url,
marketplace: this.importForm.marketplace,
batch_size: this.importForm.batch_size
});
this.successMessage = `Import job #${response.job_id} started!`;
await this.loadJobs(); // Refresh list
} catch (error) {
this.error = error.message;
} finally {
this.importing = false;
}
}
```
#### 2. Auto-Refresh for Active Jobs
```javascript
startAutoRefresh() {
this.autoRefreshInterval = setInterval(async () => {
const hasActiveJobs = this.jobs.some(job =>
job.status === 'pending' || job.status === 'processing'
);
if (hasActiveJobs) {
await this.loadJobs();
}
}, 10000); // Every 10 seconds
}
```
#### 3. Quick Fill from Settings
```javascript
// Load vendor settings
async loadVendorSettings() {
const response = await apiClient.get('/vendor/settings');
this.vendorSettings = {
letzshop_csv_url_fr: response.letzshop_csv_url_fr || '',
letzshop_csv_url_en: response.letzshop_csv_url_en || '',
letzshop_csv_url_de: response.letzshop_csv_url_de || ''
};
}
// Quick fill function
quickFill(language) {
const urlMap = {
'fr': this.vendorSettings.letzshop_csv_url_fr,
'en': this.vendorSettings.letzshop_csv_url_en,
'de': this.vendorSettings.letzshop_csv_url_de
};
if (urlMap[language]) {
this.importForm.csv_url = urlMap[language];
this.importForm.language = language;
}
}
```
#### 4. Job Details Modal
```javascript
async viewJobDetails(jobId) {
try {
const response = await apiClient.get(`/vendor/marketplace/imports/${jobId}`);
this.selectedJob = response;
this.showJobModal = true;
} catch (error) {
this.error = error.message;
}
}
```
#### 5. Pagination
```javascript
async nextPage() {
if (this.page * this.limit < this.totalJobs) {
this.page++;
await this.loadJobs();
}
}
```
#### 6. Utility Functions
```javascript
formatDate(dateString) {
if (!dateString) return 'N/A';
const date = new Date(dateString);
return date.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
calculateDuration(job) {
if (!job.started_at) return 'Not started';
const start = new Date(job.started_at);
const end = job.completed_at ? new Date(job.completed_at) : new Date();
const durationMs = end - start;
const seconds = Math.floor(durationMs / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
if (hours > 0) {
return `${hours}h ${minutes % 60}m`;
} else if (minutes > 0) {
return `${minutes}m ${seconds % 60}s`;
}
return `${seconds}s`;
}
```
### Template Features
#### Dynamic Status Badges
```html
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
:class="{
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': job.status === 'completed',
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': job.status === 'processing',
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': job.status === 'pending',
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': job.status === 'failed'
}"
x-text="job.status.toUpperCase()">
</span>
```
#### Conditional Display
```html
<!-- Quick fill buttons -->
<button
type="button"
@click="quickFill('fr')"
x-show="vendorSettings.letzshop_csv_url_fr"
class="...">
<span x-html="$icon('lightning-bolt', 'w-3 h-3 mr-1')"></span>
French CSV
</button>
```
#### Progress Metrics
```html
<div class="space-y-1">
<div class="text-xs text-gray-600 dark:text-gray-400">
<span class="text-green-600" x-text="job.imported_count"></span> imported,
<span class="text-blue-600" x-text="job.updated_count"></span> updated
</div>
<div x-show="job.error_count > 0" class="text-xs text-red-600">
<span x-text="job.error_count"></span> errors
</div>
</div>
```
---
## 📚 Related Documentation
- [Marketplace Integration Guide](../../guides/marketplace-integration.md) - Complete marketplace system documentation
- [Admin Page Templates](../admin/page-templates.md) - Admin page patterns
- [Icons Guide](../../development/icons-guide.md) - Available icons