202 lines
8.3 KiB
HTML
202 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ vendor.vendor_code }} Dashboard</title>
|
|
<link rel="stylesheet" href="/static/css/shared/base.css">
|
|
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div x-data="vendorDashboard()"
|
|
x-init="loadDashboardData()"
|
|
data-vendor-id="{{ vendor.id }}"
|
|
data-vendor-code="{{ vendor.vendor_code }}"
|
|
data-vendor-name="{{ vendor.name }}"
|
|
>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1>🏪 <span x-text="vendorName"></span> Dashboard</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="user-info">
|
|
Welcome, <strong>{{ user.username }}</strong>
|
|
</span>
|
|
<button class="btn-logout" @click="handleLogout()">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- Welcome Card -->
|
|
<div class="welcome-card">
|
|
<div class="welcome-icon">🎉</div>
|
|
<h2>Welcome to Your Vendor Dashboard!</h2>
|
|
<p>Your vendor account has been successfully set up.</p>
|
|
<p>This is <strong>Slice 1</strong> - the foundation of your multi-tenant ecommerce platform.</p>
|
|
|
|
<div class="vendor-info-card">
|
|
<div class="info-item">
|
|
<span class="info-label">Vendor Code:</span>
|
|
<span class="info-value" x-text="vendorCode"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Vendor Name:</span>
|
|
<span class="info-value" x-text="vendorName"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Owner:</span>
|
|
<span class="info-value">{{ user.email }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Status:</span>
|
|
<span class="info-value">
|
|
<span class="badge badge-success">Active</span>
|
|
{% if vendor.is_verified %}
|
|
<span class="badge badge-success">Verified</span>
|
|
{% else %}
|
|
<span class="badge badge-warning">Pending Verification</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Vendor Context:</span>
|
|
<span class="info-value" x-text="contextInfo"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="coming-soon">
|
|
🚀 Coming in Slice 2: Marketplace Product Import
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats (for future slices) -->
|
|
<div class="dashboard-widgets" x-show="stats.loaded">
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Total Products</span>
|
|
<span class="widget-icon">📦</span>
|
|
</div>
|
|
<div class="widget-stat" x-text="stats.totalProducts"></div>
|
|
<div class="widget-label">Products in catalog</div>
|
|
</div>
|
|
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Total Orders</span>
|
|
<span class="widget-icon">🛒</span>
|
|
</div>
|
|
<div class="widget-stat" x-text="stats.totalOrders"></div>
|
|
<div class="widget-label">Orders received</div>
|
|
</div>
|
|
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Customers</span>
|
|
<span class="widget-icon">👥</span>
|
|
</div>
|
|
<div class="widget-stat" x-text="stats.totalCustomers"></div>
|
|
<div class="widget-label">Registered customers</div>
|
|
</div>
|
|
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<span class="widget-title">Revenue</span>
|
|
<span class="widget-icon">💰</span>
|
|
</div>
|
|
<div class="widget-stat">€<span x-text="stats.totalRevenue"></span></div>
|
|
<div class="widget-label">Total revenue</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function vendorDashboard() {
|
|
return {
|
|
vendorId: null,
|
|
vendorCode: '',
|
|
vendorName: '',
|
|
contextInfo: '',
|
|
|
|
stats: {
|
|
loaded: false,
|
|
totalProducts: 0,
|
|
totalOrders: 0,
|
|
totalCustomers: 0,
|
|
totalRevenue: '0.00'
|
|
},
|
|
|
|
// Initialize
|
|
init() {
|
|
this.vendorId = this.$el.dataset.vendorId;
|
|
this.vendorCode = this.$el.dataset.vendorCode;
|
|
this.vendorName = this.$el.dataset.vendorName;
|
|
this.detectVendorContext();
|
|
},
|
|
|
|
// Detect vendor context (subdomain vs path-based)
|
|
detectVendorContext() {
|
|
const host = window.location.host;
|
|
const path = window.location.pathname;
|
|
|
|
// Subdomain detection
|
|
const parts = host.split('.');
|
|
if (parts.length >= 2 && parts[0] !== 'www' && parts[0] !== 'admin' && parts[0] !== 'localhost') {
|
|
this.contextInfo = `Subdomain: ${parts[0]}.platform.com`;
|
|
return;
|
|
}
|
|
|
|
// Path-based detection
|
|
if (path.startsWith('/vendor/')) {
|
|
const pathParts = path.split('/');
|
|
if (pathParts.length >= 3 && pathParts[2]) {
|
|
this.contextInfo = `Path: /vendor/${pathParts[2]}/`;
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.contextInfo = 'Development Mode';
|
|
},
|
|
|
|
// Load dashboard data
|
|
async loadDashboardData() {
|
|
try {
|
|
const token = localStorage.getItem('vendor_token');
|
|
|
|
const response = await fetch('/api/v1/vendor/dashboard/stats', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.stats = {
|
|
loaded: true,
|
|
totalProducts: data.total_products || 0,
|
|
totalOrders: data.total_orders || 0,
|
|
totalCustomers: data.total_customers || 0,
|
|
totalRevenue: (data.total_revenue || 0).toFixed(2)
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load dashboard data:', error);
|
|
// Stats will remain at 0
|
|
}
|
|
},
|
|
|
|
// Handle logout
|
|
handleLogout() {
|
|
if (confirm('Are you sure you want to logout?')) {
|
|
localStorage.removeItem('vendor_token');
|
|
localStorage.removeItem('vendor_user');
|
|
window.location.href = '/static/vendor/login.html';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |