158 lines
6.9 KiB
HTML
158 lines
6.9 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 Dashboard - Multi-Tenant Ecommerce Platform</title>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body x-data="vendorDashboard()" x-init="init()" x-cloak>
|
|
<!-- Header -->
|
|
<header class="admin-header">
|
|
<div class="header-left">
|
|
<h1>🏪 <span x-text="vendor?.name || 'Vendor Dashboard'"></span></h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="user-info">
|
|
Welcome, <strong x-text="currentUser.username"></strong>
|
|
<span class="badge badge-primary" x-text="vendorRole" style="margin-left: 8px;"></span>
|
|
</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="#"
|
|
class="nav-link active"
|
|
@click.prevent="currentSection = 'dashboard'">
|
|
📊 Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#"
|
|
class="nav-link"
|
|
@click.prevent="currentSection = 'products'">
|
|
📦 Products
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#"
|
|
class="nav-link"
|
|
@click.prevent="currentSection = 'orders'">
|
|
🛒 Orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#"
|
|
class="nav-link"
|
|
@click.prevent="currentSection = 'customers'">
|
|
👥 Customers
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#"
|
|
class="nav-link"
|
|
@click.prevent="currentSection = 'marketplace'">
|
|
🌐 Marketplace
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="admin-content">
|
|
<!-- Dashboard View -->
|
|
<div x-show="currentSection === 'dashboard'">
|
|
<!-- Vendor Info Card -->
|
|
<div class="content-section" style="margin-bottom: 24px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<h2 style="margin: 0;" x-text="vendor?.name"></h2>
|
|
<p style="margin: 4px 0 0 0; color: var(--text-secondary);">
|
|
<strong x-text="vendor?.vendor_code"></strong> •
|
|
<span x-text="vendor?.subdomain"></span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span class="badge"
|
|
:class="vendor?.is_verified ? 'badge-success' : 'badge-warning'"
|
|
x-text="vendor?.is_verified ? 'Verified' : 'Pending Verification'"></span>
|
|
<span class="badge"
|
|
:class="vendor?.is_active ? 'badge-success' : 'badge-danger'"
|
|
x-text="vendor?.is_active ? 'Active' : 'Inactive'"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">Products</div>
|
|
<div class="stat-icon">📦</div>
|
|
</div>
|
|
<div class="stat-value" x-text="stats.products_count || 0"></div>
|
|
<div class="stat-subtitle">in catalog</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">Orders</div>
|
|
<div class="stat-icon">🛒</div>
|
|
</div>
|
|
<div class="stat-value" x-text="stats.orders_count || 0"></div>
|
|
<div class="stat-subtitle">total orders</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">Customers</div>
|
|
<div class="stat-icon">👥</div>
|
|
</div>
|
|
<div class="stat-value" x-text="stats.customers_count || 0"></div>
|
|
<div class="stat-subtitle">registered</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">Revenue</div>
|
|
<div class="stat-icon">💰</div>
|
|
</div>
|
|
<div class="stat-value">€<span x-text="stats.revenue || 0"></span></div>
|
|
<div class="stat-subtitle">total revenue</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coming Soon Notice -->
|
|
<div class="content-section" style="text-align: center; padding: 48px;">
|
|
<h3>🚀 Getting Started</h3>
|
|
<p class="text-muted" style="margin: 16px 0;">
|
|
Welcome to your vendor dashboard! Start by importing products from the marketplace.
|
|
</p>
|
|
<button class="btn btn-primary" @click="currentSection = 'marketplace'">
|
|
Go to Marketplace Import
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other sections -->
|
|
<div x-show="currentSection !== 'dashboard'">
|
|
<div class="content-section">
|
|
<h2 x-text="currentSection.charAt(0).toUpperCase() + currentSection.slice(1)"></h2>
|
|
<p class="text-muted">This section is coming soon in the next development slice.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/shared/js/api-client.js"></script>
|
|
<script src="/static/vendor/js/dashboard.js"></script>
|
|
</body>
|
|
</html> |