feat: complete vendor frontend parity with admin
Phase 1 - Sidebar Refactor: - Refactor sidebar to use collapsible sections with Alpine.js - Add localStorage persistence for section states - Reorganize navigation into logical groups Phase 2 - Core JS Files: - Add products.js: product CRUD, search, filtering, toggle active/featured - Add orders.js: order list, status management, filtering - Add inventory.js: stock tracking, adjust/set quantity modals - Add customers.js: customer list, order history, messaging - Add team.js: member invite, role management, remove members - Add profile.js: profile editing with form validation - Add settings.js: tabbed settings (general, marketplace, notifications) Templates updated from placeholders to full functional UIs. Vendor frontend now at ~90% parity with admin. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
295
app/templates/vendor/customers.html
vendored
295
app/templates/vendor/customers.html
vendored
@@ -1,31 +1,288 @@
|
|||||||
{# app/templates/vendor/customers.html #}
|
{# app/templates/vendor/customers.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/pagination.html' import pagination %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
|
||||||
{% block title %}Customers{% endblock %}
|
{% block title %}Customers{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorCustomers(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Customers', subtitle='View and manage your customer relationships') %}
|
||||||
Customers
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
{{ refresh_button(loading_var='loading', onclick='loadCustomers()', variant='secondary') }}
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
{{ loading_state('Loading customers...') }}
|
||||||
|
|
||||||
|
{{ error_state('Error loading customers') }}
|
||||||
|
|
||||||
|
<!-- Stats Cards -->
|
||||||
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
|
||||||
|
<!-- Total Customers -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||||
|
<span x-html="$icon('users', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Customers</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active Customers -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- New This Month -->
|
||||||
|
<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 dark:text-blue-100 dark:bg-blue-500">
|
||||||
|
<span x-html="$icon('user-plus', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">New This Month</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.new_this_month">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
<!-- Filters -->
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
<div class="text-6xl mb-4">👥</div>
|
<!-- Search -->
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<div class="flex-1 min-w-[200px]">
|
||||||
Customer Management Coming Soon
|
<div class="relative">
|
||||||
</h3>
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||||
This page is under development. You'll be able to manage your customers here.
|
</span>
|
||||||
</p>
|
<input
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
type="text"
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
x-model="filters.search"
|
||||||
Back to Dashboard
|
@input="debouncedSearch()"
|
||||||
</a>
|
placeholder="Search by name or email..."
|
||||||
|
class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 placeholder-gray-400 bg-gray-50 border border-gray-200 rounded-lg dark:placeholder-gray-500 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.status"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Status</option>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="inactive">Inactive</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Clear Filters -->
|
||||||
|
<button
|
||||||
|
x-show="filters.search || filters.status"
|
||||||
|
@click="clearFilters()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Customers Table -->
|
||||||
|
<div x-show="!loading && !error" class="w-full mb-8 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">Customer</th>
|
||||||
|
<th class="px-4 py-3">Email</th>
|
||||||
|
<th class="px-4 py-3">Joined</th>
|
||||||
|
<th class="px-4 py-3">Orders</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-for="customer in customers" :key="customer.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<!-- Customer Info -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center text-sm">
|
||||||
|
<div class="relative w-10 h-10 mr-3 rounded-full overflow-hidden bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="getInitials(customer)"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="`${customer.first_name || ''} ${customer.last_name || ''}`.trim() || 'Unknown'"></p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="customer.phone || ''"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- Email -->
|
||||||
|
<td class="px-4 py-3 text-sm" x-text="customer.email || '-'"></td>
|
||||||
|
<!-- Joined -->
|
||||||
|
<td class="px-4 py-3 text-sm" x-text="formatDate(customer.created_at)"></td>
|
||||||
|
<!-- Orders -->
|
||||||
|
<td class="px-4 py-3 text-sm font-semibold" x-text="customer.order_count || 0"></td>
|
||||||
|
<!-- Actions -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="viewCustomer(customer)"
|
||||||
|
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400"
|
||||||
|
title="View Details"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="viewCustomerOrders(customer)"
|
||||||
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||||
|
title="View Orders"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="messageCustomer(customer)"
|
||||||
|
class="p-1 text-gray-500 hover:text-green-600 dark:text-gray-400 dark:hover:text-green-400"
|
||||||
|
title="Send Message"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('chat-bubble-left-right', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<tr x-show="customers.length === 0">
|
||||||
|
<td colspan="5" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span x-html="$icon('users', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||||
|
<p class="text-lg font-medium">No customers found</p>
|
||||||
|
<p class="text-sm">Customers will appear here when they make purchases</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="!loading && pagination.total > 0" class="mb-8">
|
||||||
|
{{ pagination(
|
||||||
|
current_page='pagination.page',
|
||||||
|
total_pages='totalPages',
|
||||||
|
total_items='pagination.total',
|
||||||
|
start_index='startIndex',
|
||||||
|
end_index='endIndex',
|
||||||
|
page_numbers='pageNumbers',
|
||||||
|
previous_fn='previousPage()',
|
||||||
|
next_fn='nextPage()',
|
||||||
|
goto_fn='goToPage'
|
||||||
|
) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Customer Detail Modal -->
|
||||||
|
<div x-show="showDetailModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||||
|
<div class="w-full max-w-lg bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="showDetailModal = false">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Customer Details</h3>
|
||||||
|
<button @click="showDetailModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-4" x-show="selectedCustomer">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4">
|
||||||
|
<span class="text-xl font-semibold text-purple-600 dark:text-purple-300" x-text="getInitials(selectedCustomer)"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200" x-text="`${selectedCustomer?.first_name || ''} ${selectedCustomer?.last_name || ''}`.trim() || 'Unknown'"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="selectedCustomer?.email"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">Phone</p>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200" x-text="selectedCustomer?.phone || '-'"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">Joined</p>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200" x-text="formatDate(selectedCustomer?.created_at)"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">Total Orders</p>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200" x-text="selectedCustomer?.order_count || 0"></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">Total Spent</p>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200" x-text="formatPrice(selectedCustomer?.total_spent || 0)"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end gap-2 p-4 border-t dark:border-gray-700">
|
||||||
|
<button @click="showDetailModal = false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<button @click="messageCustomer(selectedCustomer); showDetailModal = false" class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Customer Orders Modal -->
|
||||||
|
<div x-show="showOrdersModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||||
|
<div class="w-full max-w-2xl bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="showOrdersModal = false">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
|
||||||
|
Orders for <span x-text="`${selectedCustomer?.first_name || ''} ${selectedCustomer?.last_name || ''}`.trim()"></span>
|
||||||
|
</h3>
|
||||||
|
<button @click="showOrdersModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 max-h-96 overflow-y-auto">
|
||||||
|
<template x-if="customerOrders.length === 0">
|
||||||
|
<p class="text-center text-gray-500 dark:text-gray-400 py-8">No orders found for this customer</p>
|
||||||
|
</template>
|
||||||
|
<template x-for="order in customerOrders" :key="order.id">
|
||||||
|
<div class="flex items-center justify-between p-3 border-b dark:border-gray-700 last:border-0">
|
||||||
|
<div>
|
||||||
|
<p class="font-mono font-semibold text-gray-800 dark:text-gray-200" x-text="order.order_number || `#${order.id}`"></p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(order.created_at)"></p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<p class="font-semibold text-gray-800 dark:text-gray-200" x-text="formatPrice(order.total)"></p>
|
||||||
|
<span
|
||||||
|
class="text-xs px-2 py-1 font-semibold leading-tight rounded-full"
|
||||||
|
:class="{
|
||||||
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.status === 'completed',
|
||||||
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': order.status === 'pending',
|
||||||
|
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.status === 'processing'
|
||||||
|
}"
|
||||||
|
x-text="order.status"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end p-4 border-t dark:border-gray-700">
|
||||||
|
<button @click="showOrdersModal = false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/customers.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
294
app/templates/vendor/inventory.html
vendored
294
app/templates/vendor/inventory.html
vendored
@@ -1,31 +1,285 @@
|
|||||||
{# app/templates/vendor/inventory.html #}
|
{# app/templates/vendor/inventory.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/pagination.html' import pagination %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||||
|
|
||||||
{% block title %}Inventory{% endblock %}
|
{% block title %}Inventory{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorInventory(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Inventory', subtitle='Manage your stock levels') %}
|
||||||
Inventory
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
{{ refresh_button(loading_var='loading', onclick='loadInventory()', variant='secondary') }}
|
||||||
</div>
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading inventory...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading inventory') }}
|
||||||
<div class="text-6xl mb-4">📊</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Stats Cards -->
|
||||||
Inventory Management Coming Soon
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||||
</h3>
|
<!-- Total Entries -->
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
This page is under development. You'll be able to manage your inventory here.
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||||
</p>
|
<span x-html="$icon('archive', 'w-5 h-5')"></span>
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
</div>
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
<div>
|
||||||
Back to Dashboard
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Entries</p>
|
||||||
</a>
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_entries">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Total Stock -->
|
||||||
|
<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 dark:text-blue-100 dark:bg-blue-500">
|
||||||
|
<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 Stock</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_quantity)">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Low Stock -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||||
|
<span x-html="$icon('exclamation-triangle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Low Stock</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.low_stock_count">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Out of Stock -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
|
||||||
|
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Out of Stock</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.out_of_stock_count">0</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 min-w-[200px]">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
|
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="filters.search"
|
||||||
|
@input="debouncedSearch()"
|
||||||
|
placeholder="Search by product name or SKU..."
|
||||||
|
class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 placeholder-gray-400 bg-gray-50 border border-gray-200 rounded-lg dark:placeholder-gray-500 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Location Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.location"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Locations</option>
|
||||||
|
<template x-for="loc in locations" :key="loc">
|
||||||
|
<option :value="loc" x-text="loc"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Low Stock Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.low_stock"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Stock Levels</option>
|
||||||
|
<option value="true">Low Stock Only</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Clear Filters -->
|
||||||
|
<button
|
||||||
|
x-show="filters.search || filters.location || filters.low_stock"
|
||||||
|
@click="clearFilters()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inventory Table -->
|
||||||
|
<div x-show="!loading && !error" class="w-full mb-8 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">Product</th>
|
||||||
|
<th class="px-4 py-3">SKU</th>
|
||||||
|
<th class="px-4 py-3">Location</th>
|
||||||
|
<th class="px-4 py-3">Quantity</th>
|
||||||
|
<th class="px-4 py-3">Status</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-for="item in inventory" :key="item.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<!-- Product -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="text-sm">
|
||||||
|
<p class="font-semibold" x-text="item.product_name || 'Unknown Product'"></p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- SKU -->
|
||||||
|
<td class="px-4 py-3 text-sm font-mono" x-text="item.product_sku || '-'"></td>
|
||||||
|
<!-- Location -->
|
||||||
|
<td class="px-4 py-3 text-sm" x-text="item.location || 'Default'"></td>
|
||||||
|
<!-- Quantity -->
|
||||||
|
<td class="px-4 py-3 text-sm font-semibold" x-text="formatNumber(item.quantity)"></td>
|
||||||
|
<!-- Status -->
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
||||||
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStockStatus(item) === 'ok',
|
||||||
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStockStatus(item) === 'low',
|
||||||
|
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStockStatus(item) === 'out'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span x-text="getStockStatus(item) === 'out' ? 'Out of Stock' : (getStockStatus(item) === 'low' ? 'Low Stock' : 'In Stock')"></span>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<!-- Actions -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="openAdjustModal(item)"
|
||||||
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||||
|
title="Adjust Stock"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('plus-minus', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="openSetModal(item)"
|
||||||
|
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400"
|
||||||
|
title="Set Quantity"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('pencil', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<tr x-show="inventory.length === 0">
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span x-html="$icon('archive', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||||
|
<p class="text-lg font-medium">No inventory found</p>
|
||||||
|
<p class="text-sm">Add products and set their stock levels</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="!loading && pagination.total > 0" class="mb-8">
|
||||||
|
{{ pagination(
|
||||||
|
current_page='pagination.page',
|
||||||
|
total_pages='totalPages',
|
||||||
|
total_items='pagination.total',
|
||||||
|
start_index='startIndex',
|
||||||
|
end_index='endIndex',
|
||||||
|
page_numbers='pageNumbers',
|
||||||
|
previous_fn='previousPage()',
|
||||||
|
next_fn='nextPage()',
|
||||||
|
goto_fn='goToPage'
|
||||||
|
) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Adjust Stock Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showAdjustModal',
|
||||||
|
title='Adjust Stock',
|
||||||
|
icon='plus-minus',
|
||||||
|
icon_color='blue',
|
||||||
|
confirm_text='Adjust',
|
||||||
|
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||||
|
confirm_fn='executeAdjust()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showAdjustModal && selectedItem">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
|
||||||
|
<span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
|
||||||
|
</p>
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
x-model.number="adjustForm.quantity"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="e.g., 10 or -5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="adjustForm.reason"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="e.g., Restock, Damaged goods"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Set Quantity Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showSetModal',
|
||||||
|
title='Set Quantity',
|
||||||
|
icon='pencil',
|
||||||
|
icon_color='purple',
|
||||||
|
confirm_text='Set',
|
||||||
|
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||||
|
confirm_fn='executeSet()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showSetModal && selectedItem">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
x-model.number="setForm.quantity"
|
||||||
|
min="0"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/inventory.js') }}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
267
app/templates/vendor/orders.html
vendored
267
app/templates/vendor/orders.html
vendored
@@ -1,31 +1,258 @@
|
|||||||
{# app/templates/vendor/orders.html #}
|
{# app/templates/vendor/orders.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/pagination.html' import pagination %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||||
|
|
||||||
{% block title %}Orders{% endblock %}
|
{% block title %}Orders{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorOrders(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Orders', subtitle='View and manage your orders') %}
|
||||||
Orders
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
{{ refresh_button(loading_var='loading', onclick='loadOrders()', variant='secondary') }}
|
||||||
</div>
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading orders...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading orders') }}
|
||||||
<div class="text-6xl mb-4">🛒</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Stats Cards -->
|
||||||
Order Management Coming Soon
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||||
</h3>
|
<!-- Total Orders -->
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
This page is under development. You'll be able to manage your orders here.
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||||
</p>
|
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
</div>
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
<div>
|
||||||
Back to Dashboard
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Orders</p>
|
||||||
</a>
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||||
|
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Pending</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.pending">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Processing -->
|
||||||
|
<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 dark:text-blue-100 dark:bg-blue-500">
|
||||||
|
<span x-html="$icon('arrow-path', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Processing</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.processing">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Completed -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Completed</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.completed">0</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 min-w-[200px]">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
|
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="filters.search"
|
||||||
|
@input="debouncedSearch()"
|
||||||
|
placeholder="Search by order #, customer..."
|
||||||
|
class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 placeholder-gray-400 bg-gray-50 border border-gray-200 rounded-lg dark:placeholder-gray-500 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.status"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Statuses</option>
|
||||||
|
<template x-for="status in statuses" :key="status.value">
|
||||||
|
<option :value="status.value" x-text="status.label"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Date From -->
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
x-model="filters.date_from"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Date To -->
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
x-model="filters.date_to"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Clear Filters -->
|
||||||
|
<button
|
||||||
|
x-show="filters.search || filters.status || filters.date_from || filters.date_to"
|
||||||
|
@click="clearFilters()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Orders Table -->
|
||||||
|
<div x-show="!loading && !error" class="w-full mb-8 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">Order #</th>
|
||||||
|
<th class="px-4 py-3">Customer</th>
|
||||||
|
<th class="px-4 py-3">Date</th>
|
||||||
|
<th class="px-4 py-3">Total</th>
|
||||||
|
<th class="px-4 py-3">Status</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-for="order in orders" :key="order.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<!-- Order Number -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<span class="font-mono font-semibold" x-text="order.order_number || `#${order.id}`"></span>
|
||||||
|
</td>
|
||||||
|
<!-- Customer -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="text-sm">
|
||||||
|
<p class="font-medium" x-text="order.customer_name || 'Guest'"></p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="order.customer_email || ''"></p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- Date -->
|
||||||
|
<td class="px-4 py-3 text-sm" x-text="formatDate(order.created_at)"></td>
|
||||||
|
<!-- Total -->
|
||||||
|
<td class="px-4 py-3 text-sm font-semibold" x-text="formatPrice(order.total)"></td>
|
||||||
|
<!-- Status -->
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
||||||
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStatusColor(order.status) === 'yellow',
|
||||||
|
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': getStatusColor(order.status) === 'blue',
|
||||||
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStatusColor(order.status) === 'green',
|
||||||
|
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStatusColor(order.status) === 'red',
|
||||||
|
'text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100': getStatusColor(order.status) === 'indigo',
|
||||||
|
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': getStatusColor(order.status) === 'gray'
|
||||||
|
}"
|
||||||
|
x-text="getStatusLabel(order.status)"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<!-- Actions -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="viewOrder(order)"
|
||||||
|
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400"
|
||||||
|
title="View Details"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="openStatusModal(order)"
|
||||||
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||||
|
title="Update Status"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('pencil-square', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<tr x-show="orders.length === 0">
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span x-html="$icon('document-text', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||||
|
<p class="text-lg font-medium">No orders found</p>
|
||||||
|
<p class="text-sm">Orders will appear here when customers make purchases</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="!loading && pagination.total > 0" class="mb-8">
|
||||||
|
{{ pagination(
|
||||||
|
current_page='pagination.page',
|
||||||
|
total_pages='totalPages',
|
||||||
|
total_items='pagination.total',
|
||||||
|
start_index='startIndex',
|
||||||
|
end_index='endIndex',
|
||||||
|
page_numbers='pageNumbers',
|
||||||
|
previous_fn='previousPage()',
|
||||||
|
next_fn='nextPage()',
|
||||||
|
goto_fn='goToPage'
|
||||||
|
) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Update Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showStatusModal',
|
||||||
|
title='Update Order Status',
|
||||||
|
icon='pencil-square',
|
||||||
|
icon_color='blue',
|
||||||
|
confirm_text='Update',
|
||||||
|
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||||
|
confirm_fn='updateStatus()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showStatusModal && selectedOrder">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
|
||||||
|
</p>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
|
||||||
|
<select
|
||||||
|
x-model="newStatus"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<template x-for="status in statuses" :key="status.value">
|
||||||
|
<option :value="status.value" x-text="status.label"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/orders.js') }}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
368
app/templates/vendor/partials/sidebar.html
vendored
368
app/templates/vendor/partials/sidebar.html
vendored
@@ -1,237 +1,144 @@
|
|||||||
{# app/templates/vendor/partials/sidebar.html #}
|
{# app/templates/vendor/partials/sidebar.html #}
|
||||||
{#
|
{# Collapsible sidebar sections with localStorage persistence - matching admin pattern #}
|
||||||
Vendor sidebar - loads vendor data client-side via JavaScript
|
|
||||||
Follows same pattern as admin sidebar
|
|
||||||
#}
|
|
||||||
|
|
||||||
<!-- Desktop sidebar -->
|
{# ============================================================================
|
||||||
<aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
|
REUSABLE MACROS FOR SIDEBAR ITEMS
|
||||||
<div class="py-4 text-gray-500 dark:text-gray-400">
|
============================================================================ #}
|
||||||
<!-- Vendor Branding -->
|
|
||||||
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center"
|
|
||||||
:href="`/vendor/${vendorCode}/dashboard`">
|
|
||||||
<span class="text-2xl mr-2">🏪</span>
|
|
||||||
<span x-text="vendor?.name || 'Vendor Portal'"></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Main Navigation -->
|
{# Macro for collapsible section header #}
|
||||||
<ul class="mt-6">
|
{% macro section_header(title, section_key, icon=none) %}
|
||||||
<li class="relative px-6 py-3">
|
<div class="px-6 my-4">
|
||||||
<span x-show="currentPage === 'dashboard'"
|
<hr class="border-gray-200 dark:border-gray-700" />
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
</div>
|
||||||
aria-hidden="true"></span>
|
<button
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
@click="toggleSection('{{ section_key }}')"
|
||||||
:class="currentPage === 'dashboard' ? 'text-gray-800 dark:text-gray-100' : ''"
|
class="flex items-center justify-between w-full px-6 py-2 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||||
:href="`/vendor/${vendorCode}/dashboard`">
|
>
|
||||||
<span x-html="$icon('home', 'w-5 h-5')"></span>
|
<span class="flex items-center">
|
||||||
<span class="ml-4">Dashboard</span>
|
{% if icon %}
|
||||||
</a>
|
<span x-html="$icon('{{ icon }}', 'w-4 h-4 mr-2 text-gray-400')"></span>
|
||||||
</li>
|
{% endif %}
|
||||||
</ul>
|
{{ title }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
x-html="$icon('chevron-down', 'w-4 h-4 transition-transform duration-200')"
|
||||||
|
:class="{ 'rotate-180': openSections.{{ section_key }} }"
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
<!-- Products & Inventory Section -->
|
{# Macro for collapsible section content wrapper #}
|
||||||
<div class="px-6 my-6">
|
{% macro section_content(section_key) %}
|
||||||
<div class="flex items-center">
|
<ul
|
||||||
<span x-html="$icon('cube', 'w-5 h-5 text-gray-400')"></span>
|
x-show="openSections.{{ section_key }}"
|
||||||
<span class="ml-2 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400">
|
x-transition:enter="transition-all duration-200 ease-out"
|
||||||
Products
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||||
</span>
|
x-transition:enter-end="opacity-100 translate-y-0"
|
||||||
</div>
|
x-transition:leave="transition-all duration-150 ease-in"
|
||||||
</div>
|
x-transition:leave-start="opacity-100 translate-y-0"
|
||||||
<ul>
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
||||||
<li class="relative px-6 py-3">
|
class="mt-1 overflow-hidden"
|
||||||
<span x-show="currentPage === 'products'"
|
>
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
{{ caller() }}
|
||||||
aria-hidden="true"></span>
|
</ul>
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
{% endmacro %}
|
||||||
:class="currentPage === 'products' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/products`">
|
|
||||||
<span x-html="$icon('shopping-bag', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">All Products</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'marketplace'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'marketplace' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/marketplace`">
|
|
||||||
<span x-html="$icon('download', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Marketplace Import</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'inventory'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'inventory' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/inventory`">
|
|
||||||
<span x-html="$icon('clipboard-list', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Inventory</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Sales Section -->
|
{# Macro for menu item - uses vendorCode for dynamic URLs #}
|
||||||
<div class="px-6 my-6">
|
{% macro menu_item(page_id, path, icon, label) %}
|
||||||
<div class="flex items-center">
|
<li class="relative px-6 py-3">
|
||||||
<span x-html="$icon('chart-bar', 'w-5 h-5 text-gray-400')"></span>
|
<span x-show="currentPage === '{{ page_id }}'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
|
||||||
<span class="ml-2 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400">
|
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
||||||
Sales
|
:class="currentPage === '{{ page_id }}' ? 'text-gray-800 dark:text-gray-100' : ''"
|
||||||
</span>
|
:href="`/vendor/${vendorCode}/{{ path }}`">
|
||||||
</div>
|
<span x-html="$icon('{{ icon }}', 'w-5 h-5')"></span>
|
||||||
</div>
|
<span class="ml-4">{{ label }}</span>
|
||||||
<ul>
|
</a>
|
||||||
<li class="relative px-6 py-3">
|
</li>
|
||||||
<span x-show="currentPage === 'orders'"
|
{% endmacro %}
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'orders' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/orders`">
|
|
||||||
<span x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Orders</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'letzshop'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'letzshop' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/letzshop`">
|
|
||||||
<span x-html="$icon('external-link', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Letzshop Orders</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'customers'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'customers' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/customers`">
|
|
||||||
<span x-html="$icon('users', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Customers</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'messages'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'messages' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/messages`">
|
|
||||||
<span x-html="$icon('chat-bubble-left-right', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Messages</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'invoices'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'invoices' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/invoices`">
|
|
||||||
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Invoices</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Shop Customization Section -->
|
{# ============================================================================
|
||||||
<div class="px-6 my-6">
|
SIDEBAR CONTENT (shared between desktop and mobile)
|
||||||
<div class="flex items-center">
|
============================================================================ #}
|
||||||
<span x-html="$icon('paint-brush', 'w-5 h-5 text-gray-400')"></span>
|
|
||||||
<span class="ml-2 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400">
|
|
||||||
Shop
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'content-pages'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'content-pages' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/content-pages`">
|
|
||||||
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Content Pages</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Settings Section -->
|
{% macro sidebar_content() %}
|
||||||
<div class="px-6 my-6">
|
<div class="py-4 text-gray-500 dark:text-gray-400">
|
||||||
<div class="flex items-center">
|
<!-- Vendor Branding -->
|
||||||
<span x-html="$icon('cog', 'w-5 h-5 text-gray-400')"></span>
|
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center"
|
||||||
<span class="ml-2 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400">
|
:href="`/vendor/${vendorCode}/dashboard`">
|
||||||
Settings
|
<span class="text-2xl mr-2">🏪</span>
|
||||||
</span>
|
<span x-text="vendor?.name || 'Vendor Portal'"></span>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'team'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'team' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/team`">
|
|
||||||
<span x-html="$icon('user-group', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Team</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'profile'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'profile' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/profile`">
|
|
||||||
<span x-html="$icon('user', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Profile</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'settings'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'settings' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/settings`">
|
|
||||||
<span x-html="$icon('adjustments', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Settings</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="relative px-6 py-3">
|
|
||||||
<span x-show="currentPage === 'billing'"
|
|
||||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
|
||||||
aria-hidden="true"></span>
|
|
||||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
|
||||||
:class="currentPage === 'billing' ? 'text-gray-800 dark:text-gray-100' : ''"
|
|
||||||
:href="`/vendor/${vendorCode}/billing`">
|
|
||||||
<span x-html="$icon('credit-card', 'w-5 h-5')"></span>
|
|
||||||
<span class="ml-4">Billing</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
<!-- Dashboard (always visible) -->
|
||||||
<div class="px-6 my-6">
|
<ul class="mt-6">
|
||||||
<button class="flex items-center justify-between w-full 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"
|
{{ menu_item('dashboard', 'dashboard', 'home', 'Dashboard') }}
|
||||||
@click="$dispatch('open-add-product-modal')">
|
</ul>
|
||||||
Add Product
|
|
||||||
<span class="ml-2" aria-hidden="true">+</span>
|
<!-- Products & Inventory Section -->
|
||||||
</button>
|
{{ section_header('Products & Inventory', 'products', 'cube') }}
|
||||||
</div>
|
{% call section_content('products') %}
|
||||||
|
{{ menu_item('products', 'products', 'shopping-bag', 'All Products') }}
|
||||||
|
{{ menu_item('inventory', 'inventory', 'clipboard-list', 'Inventory') }}
|
||||||
|
{{ menu_item('marketplace', 'marketplace', 'download', 'Marketplace Import') }}
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
<!-- Sales & Orders Section -->
|
||||||
|
{{ section_header('Sales & Orders', 'sales', 'shopping-cart') }}
|
||||||
|
{% call section_content('sales') %}
|
||||||
|
{{ menu_item('orders', 'orders', 'document-text', 'Orders') }}
|
||||||
|
{{ menu_item('letzshop', 'letzshop', 'external-link', 'Letzshop Orders') }}
|
||||||
|
{{ menu_item('invoices', 'invoices', 'currency-euro', 'Invoices') }}
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
<!-- Customers & Communication Section -->
|
||||||
|
{{ section_header('Customers', 'customers', 'users') }}
|
||||||
|
{% call section_content('customers') %}
|
||||||
|
{{ menu_item('customers', 'customers', 'user-group', 'All Customers') }}
|
||||||
|
{{ menu_item('messages', 'messages', 'chat-bubble-left-right', 'Messages') }}
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
<!-- Shop & Content Section -->
|
||||||
|
{{ section_header('Shop & Content', 'shop', 'color-swatch') }}
|
||||||
|
{% call section_content('shop') %}
|
||||||
|
{{ menu_item('content-pages', 'content-pages', 'document-text', 'Content Pages') }}
|
||||||
|
{# Future: Theme customization, if enabled for vendor tier
|
||||||
|
{{ menu_item('theme', 'theme', 'paint-brush', 'Theme') }}
|
||||||
|
#}
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
<!-- Account & Settings Section -->
|
||||||
|
{{ section_header('Account & Settings', 'account', 'cog') }}
|
||||||
|
{% call section_content('account') %}
|
||||||
|
{{ menu_item('team', 'team', 'user-group', 'Team') }}
|
||||||
|
{{ menu_item('profile', 'profile', 'user', 'Profile') }}
|
||||||
|
{{ menu_item('billing', 'billing', 'credit-card', 'Billing') }}
|
||||||
|
{{ menu_item('settings', 'settings', 'adjustments', 'Settings') }}
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
|
<!-- Quick Actions -->
|
||||||
|
<div class="px-6 my-6">
|
||||||
|
<button class="flex items-center justify-between w-full 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"
|
||||||
|
@click="$dispatch('open-add-product-modal')">
|
||||||
|
<span x-html="$icon('plus', 'w-4 h-4')"></span>
|
||||||
|
<span class="ml-2">Add Product</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{# ============================================================================
|
||||||
|
DESKTOP SIDEBAR
|
||||||
|
============================================================================ #}
|
||||||
|
|
||||||
|
<aside class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0">
|
||||||
|
{{ sidebar_content() }}
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Mobile sidebar -->
|
{# ============================================================================
|
||||||
|
MOBILE SIDEBAR
|
||||||
|
============================================================================ #}
|
||||||
|
|
||||||
|
<!-- Mobile sidebar backdrop -->
|
||||||
<div x-show="isSideMenuOpen"
|
<div x-show="isSideMenuOpen"
|
||||||
x-transition:enter="transition ease-in-out duration-150"
|
x-transition:enter="transition ease-in-out duration-150"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:enter-start="opacity-0"
|
||||||
@@ -241,6 +148,7 @@ Follows same pattern as admin sidebar
|
|||||||
x-transition:leave-end="opacity-0"
|
x-transition:leave-end="opacity-0"
|
||||||
class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"></div>
|
class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"></div>
|
||||||
|
|
||||||
|
<!-- Mobile sidebar panel -->
|
||||||
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
|
<aside class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
|
||||||
x-show="isSideMenuOpen"
|
x-show="isSideMenuOpen"
|
||||||
x-transition:enter="transition ease-in-out duration-150"
|
x-transition:enter="transition ease-in-out duration-150"
|
||||||
@@ -251,15 +159,5 @@ Follows same pattern as admin sidebar
|
|||||||
x-transition:leave-end="opacity-0 transform -translate-x-20"
|
x-transition:leave-end="opacity-0 transform -translate-x-20"
|
||||||
@click.away="closeSideMenu"
|
@click.away="closeSideMenu"
|
||||||
@keydown.escape="closeSideMenu">
|
@keydown.escape="closeSideMenu">
|
||||||
<!-- Mobile navigation - same structure as desktop -->
|
{{ sidebar_content() }}
|
||||||
<div class="py-4 text-gray-500 dark:text-gray-400">
|
</aside>
|
||||||
<a class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center"
|
|
||||||
:href="`/vendor/${vendorCode}/dashboard`">
|
|
||||||
<span class="text-2xl mr-2">🏪</span>
|
|
||||||
<span x-text="vendor?.name || 'Vendor Portal'"></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Same menu structure as desktop (omitted for brevity) -->
|
|
||||||
<!-- Copy the entire menu structure from desktop sidebar above -->
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|||||||
288
app/templates/vendor/products.html
vendored
288
app/templates/vendor/products.html
vendored
@@ -1,31 +1,279 @@
|
|||||||
{# app/templates/vendor/products.html #}
|
{# app/templates/vendor/products.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/pagination.html' import pagination %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
{% from 'shared/macros/tables.html' import table_wrapper %}
|
||||||
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||||
|
|
||||||
{% block title %}Products{% endblock %}
|
{% block title %}Products{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorProducts(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Products', subtitle='Manage your product catalog') %}
|
||||||
Products
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
{{ refresh_button(loading_var='loading', onclick='loadProducts()', variant='secondary') }}
|
||||||
</div>
|
<button
|
||||||
|
@click="createProduct()"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Add Product
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading products...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading products') }}
|
||||||
<div class="text-6xl mb-4">📦</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Stats Cards -->
|
||||||
Products Management Coming Soon
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||||
</h3>
|
<!-- Total Products -->
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
This page is under development. You'll be able to manage your product catalog here.
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||||
</p>
|
<span x-html="$icon('cube', 'w-5 h-5')"></span>
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
</div>
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
<div>
|
||||||
Back to Dashboard
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Products</p>
|
||||||
</a>
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active Products -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inactive Products -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-500">
|
||||||
|
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Inactive</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.inactive">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Featured Products -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||||
|
<span x-html="$icon('star', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Featured</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.featured">0</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 min-w-[200px]">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||||
|
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="filters.search"
|
||||||
|
@input="debouncedSearch()"
|
||||||
|
placeholder="Search products..."
|
||||||
|
class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 placeholder-gray-400 bg-gray-50 border border-gray-200 rounded-lg dark:placeholder-gray-500 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.status"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Status</option>
|
||||||
|
<option value="active">Active</option>
|
||||||
|
<option value="inactive">Inactive</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Featured Filter -->
|
||||||
|
<select
|
||||||
|
x-model="filters.featured"
|
||||||
|
@change="applyFilter()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<option value="">All Products</option>
|
||||||
|
<option value="true">Featured Only</option>
|
||||||
|
<option value="false">Not Featured</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Clear Filters -->
|
||||||
|
<button
|
||||||
|
x-show="filters.search || filters.status || filters.featured"
|
||||||
|
@click="clearFilters()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Clear filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Products Table -->
|
||||||
|
<div x-show="!loading && !error" class="w-full mb-8 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">Product</th>
|
||||||
|
<th class="px-4 py-3">SKU</th>
|
||||||
|
<th class="px-4 py-3">Price</th>
|
||||||
|
<th class="px-4 py-3">Status</th>
|
||||||
|
<th class="px-4 py-3">Featured</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-for="product in products" :key="product.id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<!-- Product Info -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center text-sm">
|
||||||
|
<div class="relative w-10 h-10 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
|
||||||
|
<img
|
||||||
|
x-show="product.image_url"
|
||||||
|
:src="product.image_url"
|
||||||
|
:alt="product.name"
|
||||||
|
class="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
x-show="!product.image_url"
|
||||||
|
class="flex items-center justify-center w-full h-full text-gray-400"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('photo', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="product.name"></p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="product.category || 'No category'"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- SKU -->
|
||||||
|
<td class="px-4 py-3 text-sm font-mono" x-text="product.sku || '-'"></td>
|
||||||
|
<!-- Price -->
|
||||||
|
<td class="px-4 py-3 text-sm font-semibold" x-text="formatPrice(product.price)"></td>
|
||||||
|
<!-- Status -->
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<button
|
||||||
|
@click="toggleActive(product)"
|
||||||
|
:class="product.is_active
|
||||||
|
? 'px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
||||||
|
: 'px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
|
||||||
|
x-text="product.is_active ? 'Active' : 'Inactive'"
|
||||||
|
></button>
|
||||||
|
</td>
|
||||||
|
<!-- Featured -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<button
|
||||||
|
@click="toggleFeatured(product)"
|
||||||
|
:class="product.is_featured ? 'text-yellow-500' : 'text-gray-300 hover:text-yellow-500'"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('star', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<!-- Actions -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="viewProduct(product)"
|
||||||
|
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400"
|
||||||
|
title="View"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="editProduct(product)"
|
||||||
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('pencil', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="confirmDelete(product)"
|
||||||
|
class="p-1 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('trash', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<tr x-show="products.length === 0">
|
||||||
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span x-html="$icon('cube', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||||
|
<p class="text-lg font-medium">No products found</p>
|
||||||
|
<p class="text-sm">Add your first product to get started</p>
|
||||||
|
<button
|
||||||
|
@click="createProduct()"
|
||||||
|
class="mt-4 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
Add Product
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div x-show="!loading && pagination.total > 0" class="mb-8">
|
||||||
|
{{ pagination(
|
||||||
|
current_page='pagination.page',
|
||||||
|
total_pages='totalPages',
|
||||||
|
total_items='pagination.total',
|
||||||
|
start_index='startIndex',
|
||||||
|
end_index='endIndex',
|
||||||
|
page_numbers='pageNumbers',
|
||||||
|
previous_fn='previousPage()',
|
||||||
|
next_fn='nextPage()',
|
||||||
|
goto_fn='goToPage'
|
||||||
|
) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delete Confirmation Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showDeleteModal',
|
||||||
|
title='Delete Product',
|
||||||
|
icon='exclamation-triangle',
|
||||||
|
icon_color='red',
|
||||||
|
confirm_text='Delete',
|
||||||
|
confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
|
||||||
|
confirm_fn='deleteProduct()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showDeleteModal && selectedProduct">
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
|
||||||
|
This action cannot be undone.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/products.js') }}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
215
app/templates/vendor/profile.html
vendored
215
app/templates/vendor/profile.html
vendored
@@ -1,31 +1,206 @@
|
|||||||
{# app/templates/vendor/profile.html #}
|
{# app/templates/vendor/profile.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
|
||||||
{% block title %}Profile{% endblock %}
|
{% block title %}Profile{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorProfile(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Profile', subtitle='Manage your business information') %}
|
||||||
Profile
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
<button
|
||||||
</div>
|
x-show="hasChanges"
|
||||||
|
@click="resetForm()"
|
||||||
|
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="saveProfile()"
|
||||||
|
:disabled="saving || !hasChanges"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
|
||||||
|
<span x-show="!saving">Save Changes</span>
|
||||||
|
<span x-show="saving">Saving...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading profile...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading profile') }}
|
||||||
<div class="text-6xl mb-4">👤</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Profile Form -->
|
||||||
Profile Management Coming Soon
|
<div x-show="!loading && !error" class="w-full mb-8">
|
||||||
</h3>
|
<!-- Business Information -->
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
This page is under development. You'll be able to manage your profile information here.
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
</p>
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
<p class="text-sm text-gray-500 dark:text-gray-400">Basic information about your business</p>
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
</div>
|
||||||
Back to Dashboard
|
<div class="p-4">
|
||||||
</a>
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Business Name -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Business Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="form.name"
|
||||||
|
@input="markChanged()"
|
||||||
|
:class="{'border-red-500': errors.name}"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
<p x-show="errors.name" class="mt-1 text-xs text-red-500" x-text="errors.name"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tax Number -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Tax Number / VAT ID
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="form.tax_number"
|
||||||
|
@input="markChanged()"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="LU12345678"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Business Address -->
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Business Address
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
x-model="form.business_address"
|
||||||
|
@input="markChanged()"
|
||||||
|
rows="3"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="123 Business Street City, Postal Code Country"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Business Description
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
x-model="form.description"
|
||||||
|
@input="markChanged()"
|
||||||
|
rows="4"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="Tell customers about your business..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Information -->
|
||||||
|
<div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Information</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">How customers can reach you</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Contact Email -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Contact Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
x-model="form.contact_email"
|
||||||
|
@input="markChanged()"
|
||||||
|
:class="{'border-red-500': errors.contact_email}"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="contact@yourbusiness.com"
|
||||||
|
/>
|
||||||
|
<p x-show="errors.contact_email" class="mt-1 text-xs text-red-500" x-text="errors.contact_email"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Phone -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Contact Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
x-model="form.contact_phone"
|
||||||
|
@input="markChanged()"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="+352 123 456 789"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Website -->
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
x-model="form.website"
|
||||||
|
@input="markChanged()"
|
||||||
|
:class="{'border-red-500': errors.website}"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="https://www.yourbusiness.com"
|
||||||
|
/>
|
||||||
|
<p x-show="errors.website" class="mt-1 text-xs text-red-500" x-text="errors.website"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vendor Info (Read Only) -->
|
||||||
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Account Information</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Your vendor account details (read-only)</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<!-- Vendor Code -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Vendor Code</label>
|
||||||
|
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.vendor_code"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subdomain -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Subdomain</label>
|
||||||
|
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.subdomain || '-'"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Status</label>
|
||||||
|
<span
|
||||||
|
:class="profile?.is_active
|
||||||
|
? 'px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
||||||
|
: 'px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
|
||||||
|
x-text="profile?.is_active ? 'Active' : 'Inactive'"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
x-show="profile?.is_verified"
|
||||||
|
class="ml-2 px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
|
||||||
|
>Verified</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/profile.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
267
app/templates/vendor/settings.html
vendored
267
app/templates/vendor/settings.html
vendored
@@ -1,31 +1,258 @@
|
|||||||
{# app/templates/vendor/settings.html #}
|
{# app/templates/vendor/settings.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
|
||||||
{% block title %}Settings{% endblock %}
|
{% block title %}Settings{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorSettings(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Settings', subtitle='Configure your vendor preferences') %}
|
||||||
Settings
|
{% endcall %}
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading settings...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading settings') }}
|
||||||
<div class="text-6xl mb-4">⚙️</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Settings Content -->
|
||||||
Settings Coming Soon
|
<div x-show="!loading && !error" class="w-full mb-8">
|
||||||
</h3>
|
<div class="flex flex-col md:flex-row gap-6">
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<!-- Settings Navigation -->
|
||||||
This page is under development. You'll be able to configure your vendor settings here.
|
<div class="w-full md:w-64 flex-shrink-0">
|
||||||
</p>
|
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-2">
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
<template x-for="section in sections" :key="section.id">
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
<button
|
||||||
Back to Dashboard
|
@click="setSection(section.id)"
|
||||||
</a>
|
:class="{
|
||||||
|
'w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors': true,
|
||||||
|
'text-purple-600 bg-purple-50 dark:bg-purple-900/20 dark:text-purple-400': activeSection === section.id,
|
||||||
|
'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700': activeSection !== section.id
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span x-html="$icon(section.icon, 'w-5 h-5 mr-3')"></span>
|
||||||
|
<span x-text="section.label"></span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Panels -->
|
||||||
|
<div class="flex-1">
|
||||||
|
<!-- General Settings -->
|
||||||
|
<div x-show="activeSection === 'general'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">General Settings</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Basic vendor configuration</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Subdomain -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Subdomain
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="generalForm.subdomain"
|
||||||
|
disabled
|
||||||
|
class="flex-1 px-4 py-2 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded-l-lg dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<span class="px-4 py-2 text-sm text-gray-500 bg-gray-50 border border-l-0 border-gray-200 rounded-r-lg dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600">
|
||||||
|
.yourplatform.com
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Contact support to change your subdomain</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active Status -->
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-300">Store Status</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Your store is currently visible to customers</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
:class="settings?.is_active
|
||||||
|
? 'px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
||||||
|
: 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
|
||||||
|
x-text="settings?.is_active ? 'Active' : 'Inactive'"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Verification Status -->
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-300">Verification Status</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Verified vendors get a badge on their store</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
:class="settings?.is_verified
|
||||||
|
? 'px-3 py-1 text-sm font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100'
|
||||||
|
: 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
|
||||||
|
x-text="settings?.is_verified ? 'Verified' : 'Not Verified'"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Marketplace Settings -->
|
||||||
|
<div x-show="activeSection === 'marketplace'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Marketplace Integration</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Configure external marketplace feeds</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Letzshop CSV URLs -->
|
||||||
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Letzshop CSV Feed URLs</h4>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||||
|
Enter the URLs for your Letzshop product feeds in different languages.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- French URL -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
French (FR)
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
x-model="marketplaceForm.letzshop_csv_url_fr"
|
||||||
|
@input="markChanged()"
|
||||||
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
@click="testLetzshopUrl('fr')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
||||||
|
>
|
||||||
|
Test
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- English URL -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
English (EN)
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
x-model="marketplaceForm.letzshop_csv_url_en"
|
||||||
|
@input="markChanged()"
|
||||||
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
@click="testLetzshopUrl('en')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
||||||
|
>
|
||||||
|
Test
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- German URL -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
German (DE)
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
x-model="marketplaceForm.letzshop_csv_url_de"
|
||||||
|
@input="markChanged()"
|
||||||
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
@click="testLetzshopUrl('de')"
|
||||||
|
:disabled="saving"
|
||||||
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
||||||
|
>
|
||||||
|
Test
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Save Button -->
|
||||||
|
<div class="flex justify-end mt-4 pt-4 border-t dark:border-gray-600">
|
||||||
|
<button
|
||||||
|
@click="saveMarketplaceSettings()"
|
||||||
|
:disabled="saving || !hasChanges"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="!saving">Save Marketplace Settings</span>
|
||||||
|
<span x-show="saving">Saving...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notification Settings -->
|
||||||
|
<div x-show="activeSection === 'notifications'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Preferences</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Control how you receive notifications</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Email Notifications -->
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Receive important updates via email</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" x-model="notificationForm.email_notifications" class="sr-only peer" />
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Notifications -->
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-300">Order Notifications</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Get notified when you receive new orders</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" x-model="notificationForm.order_notifications" class="sr-only peer" />
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Marketing Emails -->
|
||||||
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-700 dark:text-gray-300">Marketing Emails</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">Receive tips, updates, and promotional content</p>
|
||||||
|
</div>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" x-model="notificationForm.marketing_emails" class="sr-only peer" />
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||||
|
Note: Notification settings are currently display-only. Full notification management coming soon.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/settings.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
288
app/templates/vendor/team.html
vendored
288
app/templates/vendor/team.html
vendored
@@ -1,31 +1,279 @@
|
|||||||
{# app/templates/vendor/team.html #}
|
{# app/templates/vendor/team.html #}
|
||||||
{% extends "vendor/base.html" %}
|
{% extends "vendor/base.html" %}
|
||||||
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||||
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||||
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||||
|
|
||||||
{% block title %}Team{% endblock %}
|
{% block title %}Team{% endblock %}
|
||||||
|
|
||||||
{% block alpine_data %}data(){% endblock %}
|
{% block alpine_data %}vendorTeam(){% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="flex items-center justify-between my-6">
|
<!-- Page Header -->
|
||||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
{% call page_header_flex(title='Team', subtitle='Manage your team members and roles') %}
|
||||||
Team Management
|
<div class="flex items-center gap-4">
|
||||||
</h2>
|
{{ refresh_button(loading_var='loading', onclick='loadMembers()', variant='secondary') }}
|
||||||
</div>
|
<button
|
||||||
|
@click="openInviteModal()"
|
||||||
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('user-plus', 'w-4 h-4 mr-2')"></span>
|
||||||
|
Invite Member
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
|
||||||
<!-- Coming Soon Notice -->
|
{{ loading_state('Loading team...') }}
|
||||||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
|
|
||||||
<div class="w-full p-12 bg-white dark:bg-gray-800 text-center">
|
{{ error_state('Error loading team') }}
|
||||||
<div class="text-6xl mb-4">👨💼</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
|
<!-- Stats Cards -->
|
||||||
Team Management Coming Soon
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
|
||||||
</h3>
|
<!-- Total Members -->
|
||||||
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
This page is under development. You'll be able to manage your team members here.
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||||
</p>
|
<span x-html="$icon('users', 'w-5 h-5')"></span>
|
||||||
<a href="/vendor/{{ vendor_code }}/dashboard"
|
</div>
|
||||||
class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
<div>
|
||||||
Back to Dashboard
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Members</p>
|
||||||
</a>
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active Members -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||||
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active_count">0</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pending Invitations -->
|
||||||
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||||
|
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||||
|
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Pending Invitations</p>
|
||||||
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.pending_invitations">0</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Team Members Table -->
|
||||||
|
<div x-show="!loading && !error" class="w-full mb-8 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">Member</th>
|
||||||
|
<th class="px-4 py-3">Role</th>
|
||||||
|
<th class="px-4 py-3">Status</th>
|
||||||
|
<th class="px-4 py-3">Joined</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-for="member in members" :key="member.user_id">
|
||||||
|
<tr class="text-gray-700 dark:text-gray-400">
|
||||||
|
<!-- Member Info -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center text-sm">
|
||||||
|
<div class="relative w-10 h-10 mr-3 rounded-full overflow-hidden bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="getInitials(member)"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold" x-text="`${member.first_name || ''} ${member.last_name || ''}`.trim() || member.email"></p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="member.email"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- Role -->
|
||||||
|
<td class="px-4 py-3 text-sm">
|
||||||
|
<span
|
||||||
|
class="px-2 py-1 font-semibold leading-tight text-purple-700 bg-purple-100 rounded-full dark:bg-purple-700 dark:text-purple-100"
|
||||||
|
x-text="getRoleName(member)"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<!-- Status -->
|
||||||
|
<td class="px-4 py-3 text-xs">
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
||||||
|
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': member.is_active && !member.invitation_pending,
|
||||||
|
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': member.invitation_pending,
|
||||||
|
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': !member.is_active
|
||||||
|
}"
|
||||||
|
x-text="member.invitation_pending ? 'Pending' : (member.is_active ? 'Active' : 'Inactive')"
|
||||||
|
></span>
|
||||||
|
</td>
|
||||||
|
<!-- Joined -->
|
||||||
|
<td class="px-4 py-3 text-sm" x-text="formatDate(member.created_at)"></td>
|
||||||
|
<!-- Actions -->
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<button
|
||||||
|
@click="openEditModal(member)"
|
||||||
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('pencil', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="confirmRemove(member)"
|
||||||
|
class="p-1 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
|
||||||
|
title="Remove"
|
||||||
|
x-show="!member.is_owner"
|
||||||
|
>
|
||||||
|
<span x-html="$icon('trash', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<tr x-show="members.length === 0">
|
||||||
|
<td colspan="5" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span x-html="$icon('users', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||||
|
<p class="text-lg font-medium">No team members yet</p>
|
||||||
|
<p class="text-sm">Invite your first team member to get started</p>
|
||||||
|
<button
|
||||||
|
@click="openInviteModal()"
|
||||||
|
class="mt-4 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
Invite Member
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Invite Modal -->
|
||||||
|
<div x-show="showInviteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
|
||||||
|
<div class="w-full max-w-md bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="showInviteModal = false">
|
||||||
|
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Invite Team Member</h3>
|
||||||
|
<button @click="showInviteModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
|
||||||
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
x-model="inviteForm.email"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
placeholder="colleague@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="inviteForm.first_name"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
x-model="inviteForm.last_name"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
|
||||||
|
<select
|
||||||
|
x-model="inviteForm.role_name"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<template x-for="role in roleOptions" :key="role.value">
|
||||||
|
<option :value="role.value" x-text="role.label"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="roleOptions.find(r => r.value === inviteForm.role_name)?.description"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end gap-2 p-4 border-t dark:border-gray-700">
|
||||||
|
<button @click="showInviteModal = false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="sendInvitation()"
|
||||||
|
:disabled="saving || !inviteForm.email"
|
||||||
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<span x-show="!saving">Send Invitation</span>
|
||||||
|
<span x-show="saving">Sending...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showEditModal',
|
||||||
|
title='Edit Team Member',
|
||||||
|
icon='pencil',
|
||||||
|
icon_color='blue',
|
||||||
|
confirm_text='Save',
|
||||||
|
confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
|
||||||
|
confirm_fn='updateMember()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showEditModal && selectedMember">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Edit <span class="font-semibold" x-text="selectedMember.email"></span>
|
||||||
|
</p>
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
|
||||||
|
<select
|
||||||
|
x-model="editForm.role_id"
|
||||||
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||||
|
>
|
||||||
|
<template x-for="role in roles" :key="role.id">
|
||||||
|
<option :value="role.id" x-text="role.name"></option>
|
||||||
|
</template>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
|
||||||
|
<label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Remove Confirmation Modal -->
|
||||||
|
{{ modal_simple(
|
||||||
|
show_var='showRemoveModal',
|
||||||
|
title='Remove Team Member',
|
||||||
|
icon='exclamation-triangle',
|
||||||
|
icon_color='red',
|
||||||
|
confirm_text='Remove',
|
||||||
|
confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
|
||||||
|
confirm_fn='removeMember()',
|
||||||
|
loading_var='saving'
|
||||||
|
) }}
|
||||||
|
<template x-if="showRemoveModal && selectedMember">
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
|
||||||
|
They will lose access to this vendor.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_scripts %}
|
||||||
|
<script src="{{ url_for('static', path='vendor/js/team.js') }}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
148
docs/implementation/vendor-frontend-parity-plan.md
Normal file
148
docs/implementation/vendor-frontend-parity-plan.md
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
# Vendor Frontend Parity Plan
|
||||||
|
|
||||||
|
**Created:** January 1, 2026
|
||||||
|
**Status:** In Progress
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
The vendor frontend is now approximately 90% complete compared to admin. Phase 1 (Sidebar Refactor) and Phase 2 (Core JS Files) are complete. Only Phase 3 (New Features like notifications and analytics) remains.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 1: Sidebar Refactor ✅ COMPLETED
|
||||||
|
|
||||||
|
### Goals
|
||||||
|
- ✅ Refactor vendor sidebar to use Jinja2 macros (like admin)
|
||||||
|
- ✅ Add collapsible sections with Alpine.js
|
||||||
|
- ✅ Reorganize into logical groups
|
||||||
|
- ✅ Add localStorage for section state persistence
|
||||||
|
- ✅ Complete mobile sidebar implementation
|
||||||
|
|
||||||
|
### New Sidebar Structure
|
||||||
|
```
|
||||||
|
Dashboard
|
||||||
|
├── Products & Inventory (collapsible)
|
||||||
|
│ ├── All Products
|
||||||
|
│ ├── Inventory
|
||||||
|
│ └── Marketplace Import
|
||||||
|
├── Sales & Orders (collapsible)
|
||||||
|
│ ├── Orders
|
||||||
|
│ ├── Letzshop Orders
|
||||||
|
│ └── Invoices
|
||||||
|
├── Customers & Communication (collapsible)
|
||||||
|
│ ├── Customers
|
||||||
|
│ └── Messages
|
||||||
|
├── Shop & Content (collapsible)
|
||||||
|
│ └── Content Pages
|
||||||
|
└── Account & Settings (collapsible)
|
||||||
|
├── Team
|
||||||
|
├── Profile
|
||||||
|
├── Billing
|
||||||
|
└── Settings
|
||||||
|
```
|
||||||
|
|
||||||
|
### Files to Modify
|
||||||
|
- `app/templates/vendor/partials/sidebar.html` - Main refactor
|
||||||
|
- `static/vendor/js/init-alpine.js` - Add sidebar state management
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 2: Core JavaScript Files
|
||||||
|
|
||||||
|
### Priority 1 (Critical)
|
||||||
|
| File | Purpose | Effort |
|
||||||
|
|------|---------|--------|
|
||||||
|
| `products.js` | Product CRUD, search, filtering, bulk ops | 4-6 hours |
|
||||||
|
| `orders.js` | Order list, filtering, status management | 4-6 hours |
|
||||||
|
| `inventory.js` | Stock tracking, adjustments, alerts | 3-4 hours |
|
||||||
|
| `customers.js` | Customer list, purchase history | 3-4 hours |
|
||||||
|
|
||||||
|
### Priority 2 (High)
|
||||||
|
| File | Purpose | Effort |
|
||||||
|
|------|---------|--------|
|
||||||
|
| `team.js` | Member invite, role management | 2-3 hours |
|
||||||
|
| `profile.js` | Profile editing, avatar upload | 2-3 hours |
|
||||||
|
| `settings.js` | Settings forms, preferences | 2-3 hours |
|
||||||
|
| `content-pages.js` | CMS page management | 3-4 hours |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 3: New Features
|
||||||
|
|
||||||
|
### Priority 3 (Medium)
|
||||||
|
- Add notifications center (page + JS)
|
||||||
|
- Add analytics/reports page
|
||||||
|
- Add bulk operations across pages
|
||||||
|
|
||||||
|
### Priority 4 (Low)
|
||||||
|
- Standardize API response handling
|
||||||
|
- Add loading states consistently
|
||||||
|
- Implement pagination for large lists
|
||||||
|
- Add confirmation dialogs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Feature Parity Matrix
|
||||||
|
|
||||||
|
| Feature | Admin | Vendor | Status |
|
||||||
|
|---------|:-----:|:------:|--------|
|
||||||
|
| Dashboard | ✅ | ✅ | Complete |
|
||||||
|
| Products | ✅ | ✅ | Complete |
|
||||||
|
| Orders | ✅ | ✅ | Complete |
|
||||||
|
| Customers | ✅ | ✅ | Complete |
|
||||||
|
| Inventory | ✅ | ✅ | Complete |
|
||||||
|
| Messages | ✅ | ✅ | Complete |
|
||||||
|
| Billing | ✅ | ✅ | Complete |
|
||||||
|
| Team | - | ✅ | Complete |
|
||||||
|
| Profile | - | ✅ | Complete |
|
||||||
|
| Settings | ✅ | ✅ | Complete |
|
||||||
|
| Content Pages | ✅ | ✅ | Complete |
|
||||||
|
| Notifications | ✅ | ❌ | Missing page + JS |
|
||||||
|
| Analytics | ✅ | ❌ | Missing page |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## JavaScript Files Comparison
|
||||||
|
|
||||||
|
| Type | Admin | Vendor | Target |
|
||||||
|
|------|-------|--------|--------|
|
||||||
|
| Total JS Files | 52 | 18 | 20+ |
|
||||||
|
| Page Coverage | ~90% | ~90% | 90%+ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Timeline
|
||||||
|
|
||||||
|
| Phase | Tasks | Effort |
|
||||||
|
|-------|-------|--------|
|
||||||
|
| Phase 1 | Sidebar refactor | 2-3 hours |
|
||||||
|
| Phase 2 | Core JS files (8) | 2-3 days |
|
||||||
|
| Phase 3 | New features | 2-3 days |
|
||||||
|
| **Total** | | **5-7 days** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Progress Tracking
|
||||||
|
|
||||||
|
### Phase 1: Sidebar Refactor ✅
|
||||||
|
- [x] Read admin sidebar for patterns
|
||||||
|
- [x] Create vendor sidebar macros
|
||||||
|
- [x] Implement collapsible sections
|
||||||
|
- [x] Add localStorage persistence
|
||||||
|
- [x] Complete mobile sidebar
|
||||||
|
- [x] Test all states
|
||||||
|
|
||||||
|
### Phase 2: Core JS Files ✅
|
||||||
|
- [x] products.js
|
||||||
|
- [x] orders.js
|
||||||
|
- [x] inventory.js
|
||||||
|
- [x] customers.js
|
||||||
|
- [x] team.js
|
||||||
|
- [x] profile.js
|
||||||
|
- [x] settings.js
|
||||||
|
- [x] content-pages.js (already exists)
|
||||||
|
|
||||||
|
### Phase 3: New Features
|
||||||
|
- [ ] Notifications center
|
||||||
|
- [ ] Analytics page
|
||||||
|
- [ ] Bulk operations
|
||||||
@@ -166,6 +166,7 @@ nav:
|
|||||||
- Unified Order View: implementation/unified-order-view.md
|
- Unified Order View: implementation/unified-order-view.md
|
||||||
- VAT Invoice Feature: implementation/vat-invoice-feature.md
|
- VAT Invoice Feature: implementation/vat-invoice-feature.md
|
||||||
- OMS Feature Plan: implementation/oms-feature-plan.md
|
- OMS Feature Plan: implementation/oms-feature-plan.md
|
||||||
|
- Vendor Frontend Parity: implementation/vendor-frontend-parity-plan.md
|
||||||
|
|
||||||
# --- Testing ---
|
# --- Testing ---
|
||||||
- Testing:
|
- Testing:
|
||||||
|
|||||||
309
static/vendor/js/customers.js
vendored
Normal file
309
static/vendor/js/customers.js
vendored
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
// static/vendor/js/customers.js
|
||||||
|
/**
|
||||||
|
* Vendor customers management page logic
|
||||||
|
* View and manage customer relationships
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorCustomersLog = window.LogConfig.loggers.vendorCustomers ||
|
||||||
|
window.LogConfig.createLogger('vendorCustomers', false);
|
||||||
|
|
||||||
|
vendorCustomersLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorCustomers() {
|
||||||
|
vendorCustomersLog.info('vendorCustomers() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'customers',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Customers data
|
||||||
|
customers: [],
|
||||||
|
stats: {
|
||||||
|
total: 0,
|
||||||
|
active: 0,
|
||||||
|
new_this_month: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filters: {
|
||||||
|
search: '',
|
||||||
|
status: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
pagination: {
|
||||||
|
page: 1,
|
||||||
|
per_page: 20,
|
||||||
|
total: 0,
|
||||||
|
pages: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showDetailModal: false,
|
||||||
|
showOrdersModal: false,
|
||||||
|
selectedCustomer: null,
|
||||||
|
customerOrders: [],
|
||||||
|
|
||||||
|
// Debounce timer
|
||||||
|
searchTimeout: null,
|
||||||
|
|
||||||
|
// Computed: Total pages
|
||||||
|
get totalPages() {
|
||||||
|
return this.pagination.pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Start index for pagination display
|
||||||
|
get startIndex() {
|
||||||
|
if (this.pagination.total === 0) return 0;
|
||||||
|
return (this.pagination.page - 1) * this.pagination.per_page + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: End index for pagination display
|
||||||
|
get endIndex() {
|
||||||
|
const end = this.pagination.page * this.pagination.per_page;
|
||||||
|
return end > this.pagination.total ? this.pagination.total : end;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Page numbers for pagination
|
||||||
|
get pageNumbers() {
|
||||||
|
const pages = [];
|
||||||
|
const totalPages = this.totalPages;
|
||||||
|
const current = this.pagination.page;
|
||||||
|
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pages.push(1);
|
||||||
|
if (current > 3) pages.push('...');
|
||||||
|
const start = Math.max(2, current - 1);
|
||||||
|
const end = Math.min(totalPages - 1, current + 1);
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
if (current < totalPages - 2) pages.push('...');
|
||||||
|
pages.push(totalPages);
|
||||||
|
}
|
||||||
|
return pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorCustomersLog.info('Customers init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorCustomersInitialized) {
|
||||||
|
vendorCustomersLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorCustomersInitialized = true;
|
||||||
|
|
||||||
|
// Load platform settings for rows per page
|
||||||
|
if (window.PlatformSettings) {
|
||||||
|
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadCustomers();
|
||||||
|
} catch (error) {
|
||||||
|
vendorCustomersLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize customers page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorCustomersLog.info('Customers initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load customers with filtering and pagination
|
||||||
|
*/
|
||||||
|
async loadCustomers() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: (this.pagination.page - 1) * this.pagination.per_page,
|
||||||
|
limit: this.pagination.per_page
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add filters
|
||||||
|
if (this.filters.search) {
|
||||||
|
params.append('search', this.filters.search);
|
||||||
|
}
|
||||||
|
if (this.filters.status) {
|
||||||
|
params.append('status', this.filters.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/customers?${params.toString()}`);
|
||||||
|
|
||||||
|
this.customers = response.customers || [];
|
||||||
|
this.pagination.total = response.total || 0;
|
||||||
|
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||||
|
|
||||||
|
// Calculate stats
|
||||||
|
this.stats = {
|
||||||
|
total: this.pagination.total,
|
||||||
|
active: this.customers.filter(c => c.is_active !== false).length,
|
||||||
|
new_this_month: this.customers.filter(c => {
|
||||||
|
if (!c.created_at) return false;
|
||||||
|
const created = new Date(c.created_at);
|
||||||
|
const now = new Date();
|
||||||
|
return created.getMonth() === now.getMonth() && created.getFullYear() === now.getFullYear();
|
||||||
|
}).length
|
||||||
|
};
|
||||||
|
|
||||||
|
vendorCustomersLog.info('Loaded customers:', this.customers.length, 'of', this.pagination.total);
|
||||||
|
} catch (error) {
|
||||||
|
vendorCustomersLog.error('Failed to load customers:', error);
|
||||||
|
this.error = error.message || 'Failed to load customers';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debounced search handler
|
||||||
|
*/
|
||||||
|
debouncedSearch() {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadCustomers();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply filter and reload
|
||||||
|
*/
|
||||||
|
applyFilter() {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadCustomers();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all filters
|
||||||
|
*/
|
||||||
|
clearFilters() {
|
||||||
|
this.filters = {
|
||||||
|
search: '',
|
||||||
|
status: ''
|
||||||
|
};
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadCustomers();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View customer details
|
||||||
|
*/
|
||||||
|
async viewCustomer(customer) {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/customers/${customer.id}`);
|
||||||
|
this.selectedCustomer = response;
|
||||||
|
this.showDetailModal = true;
|
||||||
|
vendorCustomersLog.info('Loaded customer details:', customer.id);
|
||||||
|
} catch (error) {
|
||||||
|
vendorCustomersLog.error('Failed to load customer details:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to load customer details', 'error');
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View customer orders
|
||||||
|
*/
|
||||||
|
async viewCustomerOrders(customer) {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/customers/${customer.id}/orders`);
|
||||||
|
this.selectedCustomer = customer;
|
||||||
|
this.customerOrders = response.orders || [];
|
||||||
|
this.showOrdersModal = true;
|
||||||
|
vendorCustomersLog.info('Loaded customer orders:', customer.id, this.customerOrders.length);
|
||||||
|
} catch (error) {
|
||||||
|
vendorCustomersLog.error('Failed to load customer orders:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to load customer orders', 'error');
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send message to customer
|
||||||
|
*/
|
||||||
|
messageCustomer(customer) {
|
||||||
|
window.location.href = `/vendor/${this.vendorCode}/messages?customer=${customer.id}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get customer initials for avatar
|
||||||
|
*/
|
||||||
|
getInitials(customer) {
|
||||||
|
const first = customer.first_name || '';
|
||||||
|
const last = customer.last_name || '';
|
||||||
|
return (first.charAt(0) + last.charAt(0)).toUpperCase() || '?';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
formatPrice(cents) {
|
||||||
|
if (!cents && cents !== 0) return '-';
|
||||||
|
return new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR'
|
||||||
|
}).format(cents / 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Previous page
|
||||||
|
*/
|
||||||
|
previousPage() {
|
||||||
|
if (this.pagination.page > 1) {
|
||||||
|
this.pagination.page--;
|
||||||
|
this.loadCustomers();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Next page
|
||||||
|
*/
|
||||||
|
nextPage() {
|
||||||
|
if (this.pagination.page < this.totalPages) {
|
||||||
|
this.pagination.page++;
|
||||||
|
this.loadCustomers();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Go to specific page
|
||||||
|
*/
|
||||||
|
goToPage(pageNum) {
|
||||||
|
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||||
|
this.pagination.page = pageNum;
|
||||||
|
this.loadCustomers();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
39
static/vendor/js/init-alpine.js
vendored
39
static/vendor/js/init-alpine.js
vendored
@@ -9,6 +9,36 @@ const vendorLog = window.LogConfig.log;
|
|||||||
|
|
||||||
console.log('[VENDOR INIT-ALPINE] Loading...');
|
console.log('[VENDOR INIT-ALPINE] Loading...');
|
||||||
|
|
||||||
|
// Sidebar section state persistence
|
||||||
|
const VENDOR_SIDEBAR_STORAGE_KEY = 'vendor_sidebar_sections';
|
||||||
|
|
||||||
|
function getVendorSidebarSectionsFromStorage() {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem(VENDOR_SIDEBAR_STORAGE_KEY);
|
||||||
|
if (stored) {
|
||||||
|
return JSON.parse(stored);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[VENDOR INIT-ALPINE] Failed to load sidebar state from localStorage:', e);
|
||||||
|
}
|
||||||
|
// Default: all sections open
|
||||||
|
return {
|
||||||
|
products: true,
|
||||||
|
sales: true,
|
||||||
|
customers: true,
|
||||||
|
shop: true,
|
||||||
|
account: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveVendorSidebarSectionsToStorage(sections) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(VENDOR_SIDEBAR_STORAGE_KEY, JSON.stringify(sections));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[VENDOR INIT-ALPINE] Failed to save sidebar state to localStorage:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function data() {
|
function data() {
|
||||||
console.log('[VENDOR INIT-ALPINE] data() function called');
|
console.log('[VENDOR INIT-ALPINE] data() function called');
|
||||||
return {
|
return {
|
||||||
@@ -21,6 +51,9 @@ function data() {
|
|||||||
vendor: null,
|
vendor: null,
|
||||||
vendorCode: null,
|
vendorCode: null,
|
||||||
|
|
||||||
|
// Sidebar collapsible sections state
|
||||||
|
openSections: getVendorSidebarSectionsFromStorage(),
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
// Set current page from URL
|
// Set current page from URL
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
@@ -109,6 +142,12 @@ function data() {
|
|||||||
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
|
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Sidebar section toggle with persistence
|
||||||
|
toggleSection(section) {
|
||||||
|
this.openSections[section] = !this.openSections[section];
|
||||||
|
saveVendorSidebarSectionsToStorage(this.openSections);
|
||||||
|
},
|
||||||
|
|
||||||
async handleLogout() {
|
async handleLogout() {
|
||||||
console.log('🚪 Logging out vendor user...');
|
console.log('🚪 Logging out vendor user...');
|
||||||
|
|
||||||
|
|||||||
365
static/vendor/js/inventory.js
vendored
Normal file
365
static/vendor/js/inventory.js
vendored
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
// static/vendor/js/inventory.js
|
||||||
|
/**
|
||||||
|
* Vendor inventory management page logic
|
||||||
|
* View and manage stock levels
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorInventoryLog = window.LogConfig.loggers.vendorInventory ||
|
||||||
|
window.LogConfig.createLogger('vendorInventory', false);
|
||||||
|
|
||||||
|
vendorInventoryLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorInventory() {
|
||||||
|
vendorInventoryLog.info('vendorInventory() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'inventory',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Inventory data
|
||||||
|
inventory: [],
|
||||||
|
stats: {
|
||||||
|
total_entries: 0,
|
||||||
|
total_quantity: 0,
|
||||||
|
low_stock_count: 0,
|
||||||
|
out_of_stock_count: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filters: {
|
||||||
|
search: '',
|
||||||
|
location: '',
|
||||||
|
low_stock: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Available locations for filter dropdown
|
||||||
|
locations: [],
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
pagination: {
|
||||||
|
page: 1,
|
||||||
|
per_page: 20,
|
||||||
|
total: 0,
|
||||||
|
pages: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showAdjustModal: false,
|
||||||
|
showSetModal: false,
|
||||||
|
selectedItem: null,
|
||||||
|
|
||||||
|
// Form data
|
||||||
|
adjustForm: {
|
||||||
|
quantity: 0,
|
||||||
|
reason: ''
|
||||||
|
},
|
||||||
|
setForm: {
|
||||||
|
quantity: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Debounce timer
|
||||||
|
searchTimeout: null,
|
||||||
|
|
||||||
|
// Computed: Total pages
|
||||||
|
get totalPages() {
|
||||||
|
return this.pagination.pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Start index for pagination display
|
||||||
|
get startIndex() {
|
||||||
|
if (this.pagination.total === 0) return 0;
|
||||||
|
return (this.pagination.page - 1) * this.pagination.per_page + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: End index for pagination display
|
||||||
|
get endIndex() {
|
||||||
|
const end = this.pagination.page * this.pagination.per_page;
|
||||||
|
return end > this.pagination.total ? this.pagination.total : end;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Page numbers for pagination
|
||||||
|
get pageNumbers() {
|
||||||
|
const pages = [];
|
||||||
|
const totalPages = this.totalPages;
|
||||||
|
const current = this.pagination.page;
|
||||||
|
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pages.push(1);
|
||||||
|
if (current > 3) pages.push('...');
|
||||||
|
const start = Math.max(2, current - 1);
|
||||||
|
const end = Math.min(totalPages - 1, current + 1);
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
if (current < totalPages - 2) pages.push('...');
|
||||||
|
pages.push(totalPages);
|
||||||
|
}
|
||||||
|
return pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorInventoryLog.info('Inventory init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorInventoryInitialized) {
|
||||||
|
vendorInventoryLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorInventoryInitialized = true;
|
||||||
|
|
||||||
|
// Load platform settings for rows per page
|
||||||
|
if (window.PlatformSettings) {
|
||||||
|
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadInventory();
|
||||||
|
} catch (error) {
|
||||||
|
vendorInventoryLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize inventory page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorInventoryLog.info('Inventory initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load inventory with filtering and pagination
|
||||||
|
*/
|
||||||
|
async loadInventory() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: (this.pagination.page - 1) * this.pagination.per_page,
|
||||||
|
limit: this.pagination.per_page
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add filters
|
||||||
|
if (this.filters.search) {
|
||||||
|
params.append('search', this.filters.search);
|
||||||
|
}
|
||||||
|
if (this.filters.location) {
|
||||||
|
params.append('location', this.filters.location);
|
||||||
|
}
|
||||||
|
if (this.filters.low_stock) {
|
||||||
|
params.append('low_stock', this.filters.low_stock);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/inventory?${params.toString()}`);
|
||||||
|
|
||||||
|
this.inventory = response.items || [];
|
||||||
|
this.pagination.total = response.total || 0;
|
||||||
|
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||||
|
|
||||||
|
// Extract unique locations
|
||||||
|
this.extractLocations();
|
||||||
|
|
||||||
|
// Calculate stats
|
||||||
|
this.calculateStats();
|
||||||
|
|
||||||
|
vendorInventoryLog.info('Loaded inventory:', this.inventory.length, 'of', this.pagination.total);
|
||||||
|
} catch (error) {
|
||||||
|
vendorInventoryLog.error('Failed to load inventory:', error);
|
||||||
|
this.error = error.message || 'Failed to load inventory';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract unique locations from inventory
|
||||||
|
*/
|
||||||
|
extractLocations() {
|
||||||
|
const locationSet = new Set(this.inventory.map(i => i.location).filter(Boolean));
|
||||||
|
this.locations = Array.from(locationSet).sort();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate inventory statistics
|
||||||
|
*/
|
||||||
|
calculateStats() {
|
||||||
|
this.stats = {
|
||||||
|
total_entries: this.pagination.total,
|
||||||
|
total_quantity: this.inventory.reduce((sum, i) => sum + (i.quantity || 0), 0),
|
||||||
|
low_stock_count: this.inventory.filter(i => i.quantity > 0 && i.quantity <= (i.low_stock_threshold || 5)).length,
|
||||||
|
out_of_stock_count: this.inventory.filter(i => i.quantity <= 0).length
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debounced search handler
|
||||||
|
*/
|
||||||
|
debouncedSearch() {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadInventory();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply filter and reload
|
||||||
|
*/
|
||||||
|
applyFilter() {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadInventory();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all filters
|
||||||
|
*/
|
||||||
|
clearFilters() {
|
||||||
|
this.filters = {
|
||||||
|
search: '',
|
||||||
|
location: '',
|
||||||
|
low_stock: ''
|
||||||
|
};
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadInventory();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open adjust stock modal
|
||||||
|
*/
|
||||||
|
openAdjustModal(item) {
|
||||||
|
this.selectedItem = item;
|
||||||
|
this.adjustForm = {
|
||||||
|
quantity: 0,
|
||||||
|
reason: ''
|
||||||
|
};
|
||||||
|
this.showAdjustModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open set quantity modal
|
||||||
|
*/
|
||||||
|
openSetModal(item) {
|
||||||
|
this.selectedItem = item;
|
||||||
|
this.setForm = {
|
||||||
|
quantity: item.quantity || 0
|
||||||
|
};
|
||||||
|
this.showSetModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute stock adjustment
|
||||||
|
*/
|
||||||
|
async executeAdjust() {
|
||||||
|
if (!this.selectedItem || this.adjustForm.quantity === 0) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/vendor/${this.vendorCode}/inventory/adjust`, {
|
||||||
|
product_id: this.selectedItem.product_id,
|
||||||
|
location: this.selectedItem.location,
|
||||||
|
quantity: this.adjustForm.quantity,
|
||||||
|
reason: this.adjustForm.reason || null
|
||||||
|
});
|
||||||
|
|
||||||
|
vendorInventoryLog.info('Adjusted inventory:', this.selectedItem.id);
|
||||||
|
|
||||||
|
this.showAdjustModal = false;
|
||||||
|
this.selectedItem = null;
|
||||||
|
|
||||||
|
Utils.showToast('Stock adjusted successfully', 'success');
|
||||||
|
|
||||||
|
await this.loadInventory();
|
||||||
|
} catch (error) {
|
||||||
|
vendorInventoryLog.error('Failed to adjust inventory:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to adjust stock', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute set quantity
|
||||||
|
*/
|
||||||
|
async executeSet() {
|
||||||
|
if (!this.selectedItem || this.setForm.quantity < 0) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/vendor/${this.vendorCode}/inventory/set`, {
|
||||||
|
product_id: this.selectedItem.product_id,
|
||||||
|
location: this.selectedItem.location,
|
||||||
|
quantity: this.setForm.quantity
|
||||||
|
});
|
||||||
|
|
||||||
|
vendorInventoryLog.info('Set inventory quantity:', this.selectedItem.id);
|
||||||
|
|
||||||
|
this.showSetModal = false;
|
||||||
|
this.selectedItem = null;
|
||||||
|
|
||||||
|
Utils.showToast('Quantity set successfully', 'success');
|
||||||
|
|
||||||
|
await this.loadInventory();
|
||||||
|
} catch (error) {
|
||||||
|
vendorInventoryLog.error('Failed to set inventory:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to set quantity', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get stock status class
|
||||||
|
*/
|
||||||
|
getStockStatus(item) {
|
||||||
|
if (item.quantity <= 0) return 'out';
|
||||||
|
if (item.quantity <= (item.low_stock_threshold || 5)) return 'low';
|
||||||
|
return 'ok';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format number with locale
|
||||||
|
*/
|
||||||
|
formatNumber(num) {
|
||||||
|
if (num === null || num === undefined) return '0';
|
||||||
|
return new Intl.NumberFormat('en-US').format(num);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Previous page
|
||||||
|
*/
|
||||||
|
previousPage() {
|
||||||
|
if (this.pagination.page > 1) {
|
||||||
|
this.pagination.page--;
|
||||||
|
this.loadInventory();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Next page
|
||||||
|
*/
|
||||||
|
nextPage() {
|
||||||
|
if (this.pagination.page < this.totalPages) {
|
||||||
|
this.pagination.page++;
|
||||||
|
this.loadInventory();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Go to specific page
|
||||||
|
*/
|
||||||
|
goToPage(pageNum) {
|
||||||
|
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||||
|
this.pagination.page = pageNum;
|
||||||
|
this.loadInventory();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
354
static/vendor/js/orders.js
vendored
Normal file
354
static/vendor/js/orders.js
vendored
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
// static/vendor/js/orders.js
|
||||||
|
/**
|
||||||
|
* Vendor orders management page logic
|
||||||
|
* View and manage vendor's orders
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorOrdersLog = window.LogConfig.loggers.vendorOrders ||
|
||||||
|
window.LogConfig.createLogger('vendorOrders', false);
|
||||||
|
|
||||||
|
vendorOrdersLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorOrders() {
|
||||||
|
vendorOrdersLog.info('vendorOrders() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'orders',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Orders data
|
||||||
|
orders: [],
|
||||||
|
stats: {
|
||||||
|
total: 0,
|
||||||
|
pending: 0,
|
||||||
|
processing: 0,
|
||||||
|
completed: 0,
|
||||||
|
cancelled: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Order statuses for filter and display
|
||||||
|
statuses: [
|
||||||
|
{ value: 'pending', label: 'Pending', color: 'yellow' },
|
||||||
|
{ value: 'processing', label: 'Processing', color: 'blue' },
|
||||||
|
{ value: 'shipped', label: 'Shipped', color: 'indigo' },
|
||||||
|
{ value: 'delivered', label: 'Delivered', color: 'green' },
|
||||||
|
{ value: 'completed', label: 'Completed', color: 'green' },
|
||||||
|
{ value: 'cancelled', label: 'Cancelled', color: 'red' },
|
||||||
|
{ value: 'refunded', label: 'Refunded', color: 'gray' }
|
||||||
|
],
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filters: {
|
||||||
|
search: '',
|
||||||
|
status: '',
|
||||||
|
date_from: '',
|
||||||
|
date_to: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
pagination: {
|
||||||
|
page: 1,
|
||||||
|
per_page: 20,
|
||||||
|
total: 0,
|
||||||
|
pages: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showDetailModal: false,
|
||||||
|
showStatusModal: false,
|
||||||
|
selectedOrder: null,
|
||||||
|
newStatus: '',
|
||||||
|
|
||||||
|
// Debounce timer
|
||||||
|
searchTimeout: null,
|
||||||
|
|
||||||
|
// Computed: Total pages
|
||||||
|
get totalPages() {
|
||||||
|
return this.pagination.pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Start index for pagination display
|
||||||
|
get startIndex() {
|
||||||
|
if (this.pagination.total === 0) return 0;
|
||||||
|
return (this.pagination.page - 1) * this.pagination.per_page + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: End index for pagination display
|
||||||
|
get endIndex() {
|
||||||
|
const end = this.pagination.page * this.pagination.per_page;
|
||||||
|
return end > this.pagination.total ? this.pagination.total : end;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Page numbers for pagination
|
||||||
|
get pageNumbers() {
|
||||||
|
const pages = [];
|
||||||
|
const totalPages = this.totalPages;
|
||||||
|
const current = this.pagination.page;
|
||||||
|
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pages.push(1);
|
||||||
|
if (current > 3) pages.push('...');
|
||||||
|
const start = Math.max(2, current - 1);
|
||||||
|
const end = Math.min(totalPages - 1, current + 1);
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
if (current < totalPages - 2) pages.push('...');
|
||||||
|
pages.push(totalPages);
|
||||||
|
}
|
||||||
|
return pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorOrdersLog.info('Orders init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorOrdersInitialized) {
|
||||||
|
vendorOrdersLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorOrdersInitialized = true;
|
||||||
|
|
||||||
|
// Load platform settings for rows per page
|
||||||
|
if (window.PlatformSettings) {
|
||||||
|
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadOrders();
|
||||||
|
} catch (error) {
|
||||||
|
vendorOrdersLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize orders page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorOrdersLog.info('Orders initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load orders with filtering and pagination
|
||||||
|
*/
|
||||||
|
async loadOrders() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: (this.pagination.page - 1) * this.pagination.per_page,
|
||||||
|
limit: this.pagination.per_page
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add filters
|
||||||
|
if (this.filters.search) {
|
||||||
|
params.append('search', this.filters.search);
|
||||||
|
}
|
||||||
|
if (this.filters.status) {
|
||||||
|
params.append('status', this.filters.status);
|
||||||
|
}
|
||||||
|
if (this.filters.date_from) {
|
||||||
|
params.append('date_from', this.filters.date_from);
|
||||||
|
}
|
||||||
|
if (this.filters.date_to) {
|
||||||
|
params.append('date_to', this.filters.date_to);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/orders?${params.toString()}`);
|
||||||
|
|
||||||
|
this.orders = response.orders || [];
|
||||||
|
this.pagination.total = response.total || 0;
|
||||||
|
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||||
|
|
||||||
|
// Calculate stats
|
||||||
|
this.calculateStats();
|
||||||
|
|
||||||
|
vendorOrdersLog.info('Loaded orders:', this.orders.length, 'of', this.pagination.total);
|
||||||
|
} catch (error) {
|
||||||
|
vendorOrdersLog.error('Failed to load orders:', error);
|
||||||
|
this.error = error.message || 'Failed to load orders';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate order statistics
|
||||||
|
*/
|
||||||
|
calculateStats() {
|
||||||
|
this.stats = {
|
||||||
|
total: this.pagination.total,
|
||||||
|
pending: this.orders.filter(o => o.status === 'pending').length,
|
||||||
|
processing: this.orders.filter(o => o.status === 'processing').length,
|
||||||
|
completed: this.orders.filter(o => ['completed', 'delivered'].includes(o.status)).length,
|
||||||
|
cancelled: this.orders.filter(o => o.status === 'cancelled').length
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debounced search handler
|
||||||
|
*/
|
||||||
|
debouncedSearch() {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadOrders();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply filter and reload
|
||||||
|
*/
|
||||||
|
applyFilter() {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadOrders();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all filters
|
||||||
|
*/
|
||||||
|
clearFilters() {
|
||||||
|
this.filters = {
|
||||||
|
search: '',
|
||||||
|
status: '',
|
||||||
|
date_from: '',
|
||||||
|
date_to: ''
|
||||||
|
};
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadOrders();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View order details
|
||||||
|
*/
|
||||||
|
async viewOrder(order) {
|
||||||
|
this.loading = true;
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/orders/${order.id}`);
|
||||||
|
this.selectedOrder = response;
|
||||||
|
this.showDetailModal = true;
|
||||||
|
vendorOrdersLog.info('Loaded order details:', order.id);
|
||||||
|
} catch (error) {
|
||||||
|
vendorOrdersLog.error('Failed to load order details:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to load order details', 'error');
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open status change modal
|
||||||
|
*/
|
||||||
|
openStatusModal(order) {
|
||||||
|
this.selectedOrder = order;
|
||||||
|
this.newStatus = order.status;
|
||||||
|
this.showStatusModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update order status
|
||||||
|
*/
|
||||||
|
async updateStatus() {
|
||||||
|
if (!this.selectedOrder || !this.newStatus) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(`/vendor/${this.vendorCode}/orders/${this.selectedOrder.id}/status`, {
|
||||||
|
status: this.newStatus
|
||||||
|
});
|
||||||
|
|
||||||
|
Utils.showToast('Order status updated', 'success');
|
||||||
|
vendorOrdersLog.info('Updated order status:', this.selectedOrder.id, this.newStatus);
|
||||||
|
|
||||||
|
this.showStatusModal = false;
|
||||||
|
this.selectedOrder = null;
|
||||||
|
await this.loadOrders();
|
||||||
|
} catch (error) {
|
||||||
|
vendorOrdersLog.error('Failed to update status:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to update status', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get status color class
|
||||||
|
*/
|
||||||
|
getStatusColor(status) {
|
||||||
|
const statusObj = this.statuses.find(s => s.value === status);
|
||||||
|
return statusObj ? statusObj.color : 'gray';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get status label
|
||||||
|
*/
|
||||||
|
getStatusLabel(status) {
|
||||||
|
const statusObj = this.statuses.find(s => s.value === status);
|
||||||
|
return statusObj ? statusObj.label : status;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
formatPrice(cents) {
|
||||||
|
if (!cents && cents !== 0) return '-';
|
||||||
|
return new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR'
|
||||||
|
}).format(cents / 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Previous page
|
||||||
|
*/
|
||||||
|
previousPage() {
|
||||||
|
if (this.pagination.page > 1) {
|
||||||
|
this.pagination.page--;
|
||||||
|
this.loadOrders();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Next page
|
||||||
|
*/
|
||||||
|
nextPage() {
|
||||||
|
if (this.pagination.page < this.totalPages) {
|
||||||
|
this.pagination.page++;
|
||||||
|
this.loadOrders();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Go to specific page
|
||||||
|
*/
|
||||||
|
goToPage(pageNum) {
|
||||||
|
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||||
|
this.pagination.page = pageNum;
|
||||||
|
this.loadOrders();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
340
static/vendor/js/products.js
vendored
Normal file
340
static/vendor/js/products.js
vendored
Normal file
@@ -0,0 +1,340 @@
|
|||||||
|
// static/vendor/js/products.js
|
||||||
|
/**
|
||||||
|
* Vendor products management page logic
|
||||||
|
* View, edit, and manage vendor's product catalog
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorProductsLog = window.LogConfig.loggers.vendorProducts ||
|
||||||
|
window.LogConfig.createLogger('vendorProducts', false);
|
||||||
|
|
||||||
|
vendorProductsLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorProducts() {
|
||||||
|
vendorProductsLog.info('vendorProducts() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'products',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Products data
|
||||||
|
products: [],
|
||||||
|
stats: {
|
||||||
|
total: 0,
|
||||||
|
active: 0,
|
||||||
|
inactive: 0,
|
||||||
|
featured: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filters: {
|
||||||
|
search: '',
|
||||||
|
status: '', // 'active', 'inactive', ''
|
||||||
|
featured: '' // 'true', 'false', ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
pagination: {
|
||||||
|
page: 1,
|
||||||
|
per_page: 20,
|
||||||
|
total: 0,
|
||||||
|
pages: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showDeleteModal: false,
|
||||||
|
showDetailModal: false,
|
||||||
|
selectedProduct: null,
|
||||||
|
|
||||||
|
// Debounce timer
|
||||||
|
searchTimeout: null,
|
||||||
|
|
||||||
|
// Computed: Total pages
|
||||||
|
get totalPages() {
|
||||||
|
return this.pagination.pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Start index for pagination display
|
||||||
|
get startIndex() {
|
||||||
|
if (this.pagination.total === 0) return 0;
|
||||||
|
return (this.pagination.page - 1) * this.pagination.per_page + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: End index for pagination display
|
||||||
|
get endIndex() {
|
||||||
|
const end = this.pagination.page * this.pagination.per_page;
|
||||||
|
return end > this.pagination.total ? this.pagination.total : end;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Computed: Page numbers for pagination
|
||||||
|
get pageNumbers() {
|
||||||
|
const pages = [];
|
||||||
|
const totalPages = this.totalPages;
|
||||||
|
const current = this.pagination.page;
|
||||||
|
|
||||||
|
if (totalPages <= 7) {
|
||||||
|
for (let i = 1; i <= totalPages; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pages.push(1);
|
||||||
|
if (current > 3) pages.push('...');
|
||||||
|
const start = Math.max(2, current - 1);
|
||||||
|
const end = Math.min(totalPages - 1, current + 1);
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i);
|
||||||
|
}
|
||||||
|
if (current < totalPages - 2) pages.push('...');
|
||||||
|
pages.push(totalPages);
|
||||||
|
}
|
||||||
|
return pages;
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorProductsLog.info('Products init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorProductsInitialized) {
|
||||||
|
vendorProductsLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorProductsInitialized = true;
|
||||||
|
|
||||||
|
// Load platform settings for rows per page
|
||||||
|
if (window.PlatformSettings) {
|
||||||
|
this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadProducts();
|
||||||
|
} catch (error) {
|
||||||
|
vendorProductsLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize products page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorProductsLog.info('Products initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load products with filtering and pagination
|
||||||
|
*/
|
||||||
|
async loadProducts() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
skip: (this.pagination.page - 1) * this.pagination.per_page,
|
||||||
|
limit: this.pagination.per_page
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add filters
|
||||||
|
if (this.filters.search) {
|
||||||
|
params.append('search', this.filters.search);
|
||||||
|
}
|
||||||
|
if (this.filters.status) {
|
||||||
|
params.append('is_active', this.filters.status === 'active');
|
||||||
|
}
|
||||||
|
if (this.filters.featured) {
|
||||||
|
params.append('is_featured', this.filters.featured === 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/products?${params.toString()}`);
|
||||||
|
|
||||||
|
this.products = response.products || [];
|
||||||
|
this.pagination.total = response.total || 0;
|
||||||
|
this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
|
||||||
|
|
||||||
|
// Calculate stats from response or products
|
||||||
|
this.stats = {
|
||||||
|
total: response.total || this.products.length,
|
||||||
|
active: this.products.filter(p => p.is_active).length,
|
||||||
|
inactive: this.products.filter(p => !p.is_active).length,
|
||||||
|
featured: this.products.filter(p => p.is_featured).length
|
||||||
|
};
|
||||||
|
|
||||||
|
vendorProductsLog.info('Loaded products:', this.products.length, 'of', this.pagination.total);
|
||||||
|
} catch (error) {
|
||||||
|
vendorProductsLog.error('Failed to load products:', error);
|
||||||
|
this.error = error.message || 'Failed to load products';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debounced search handler
|
||||||
|
*/
|
||||||
|
debouncedSearch() {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadProducts();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Apply filter and reload
|
||||||
|
*/
|
||||||
|
applyFilter() {
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadProducts();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all filters
|
||||||
|
*/
|
||||||
|
clearFilters() {
|
||||||
|
this.filters = {
|
||||||
|
search: '',
|
||||||
|
status: '',
|
||||||
|
featured: ''
|
||||||
|
};
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.loadProducts();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle product active status
|
||||||
|
*/
|
||||||
|
async toggleActive(product) {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(`/vendor/${this.vendorCode}/products/${product.id}/toggle-active`);
|
||||||
|
product.is_active = !product.is_active;
|
||||||
|
Utils.showToast(
|
||||||
|
product.is_active ? 'Product activated' : 'Product deactivated',
|
||||||
|
'success'
|
||||||
|
);
|
||||||
|
vendorProductsLog.info('Toggled product active:', product.id, product.is_active);
|
||||||
|
} catch (error) {
|
||||||
|
vendorProductsLog.error('Failed to toggle active:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to update product', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle product featured status
|
||||||
|
*/
|
||||||
|
async toggleFeatured(product) {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(`/vendor/${this.vendorCode}/products/${product.id}/toggle-featured`);
|
||||||
|
product.is_featured = !product.is_featured;
|
||||||
|
Utils.showToast(
|
||||||
|
product.is_featured ? 'Product marked as featured' : 'Product unmarked as featured',
|
||||||
|
'success'
|
||||||
|
);
|
||||||
|
vendorProductsLog.info('Toggled product featured:', product.id, product.is_featured);
|
||||||
|
} catch (error) {
|
||||||
|
vendorProductsLog.error('Failed to toggle featured:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to update product', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View product details
|
||||||
|
*/
|
||||||
|
viewProduct(product) {
|
||||||
|
this.selectedProduct = product;
|
||||||
|
this.showDetailModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Confirm delete product
|
||||||
|
*/
|
||||||
|
confirmDelete(product) {
|
||||||
|
this.selectedProduct = product;
|
||||||
|
this.showDeleteModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Execute delete product
|
||||||
|
*/
|
||||||
|
async deleteProduct() {
|
||||||
|
if (!this.selectedProduct) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/vendor/${this.vendorCode}/products/${this.selectedProduct.id}`);
|
||||||
|
Utils.showToast('Product deleted successfully', 'success');
|
||||||
|
vendorProductsLog.info('Deleted product:', this.selectedProduct.id);
|
||||||
|
|
||||||
|
this.showDeleteModal = false;
|
||||||
|
this.selectedProduct = null;
|
||||||
|
await this.loadProducts();
|
||||||
|
} catch (error) {
|
||||||
|
vendorProductsLog.error('Failed to delete product:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to delete product', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigate to edit product page
|
||||||
|
*/
|
||||||
|
editProduct(product) {
|
||||||
|
window.location.href = `/vendor/${this.vendorCode}/products/${product.id}/edit`;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigate to create product page
|
||||||
|
*/
|
||||||
|
createProduct() {
|
||||||
|
window.location.href = `/vendor/${this.vendorCode}/products/create`;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format price for display
|
||||||
|
*/
|
||||||
|
formatPrice(cents) {
|
||||||
|
if (!cents && cents !== 0) return '-';
|
||||||
|
return new Intl.NumberFormat('de-DE', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'EUR'
|
||||||
|
}).format(cents / 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Previous page
|
||||||
|
*/
|
||||||
|
previousPage() {
|
||||||
|
if (this.pagination.page > 1) {
|
||||||
|
this.pagination.page--;
|
||||||
|
this.loadProducts();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Next page
|
||||||
|
*/
|
||||||
|
nextPage() {
|
||||||
|
if (this.pagination.page < this.totalPages) {
|
||||||
|
this.pagination.page++;
|
||||||
|
this.loadProducts();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pagination: Go to specific page
|
||||||
|
*/
|
||||||
|
goToPage(pageNum) {
|
||||||
|
if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
|
||||||
|
this.pagination.page = pageNum;
|
||||||
|
this.loadProducts();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
190
static/vendor/js/profile.js
vendored
Normal file
190
static/vendor/js/profile.js
vendored
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
// static/vendor/js/profile.js
|
||||||
|
/**
|
||||||
|
* Vendor profile management page logic
|
||||||
|
* Edit vendor business profile and contact information
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorProfileLog = window.LogConfig.loggers.vendorProfile ||
|
||||||
|
window.LogConfig.createLogger('vendorProfile', false);
|
||||||
|
|
||||||
|
vendorProfileLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorProfile() {
|
||||||
|
vendorProfileLog.info('vendorProfile() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'profile',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Profile data
|
||||||
|
profile: null,
|
||||||
|
|
||||||
|
// Edit form
|
||||||
|
form: {
|
||||||
|
name: '',
|
||||||
|
contact_email: '',
|
||||||
|
contact_phone: '',
|
||||||
|
website: '',
|
||||||
|
business_address: '',
|
||||||
|
tax_number: '',
|
||||||
|
description: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// Form validation
|
||||||
|
errors: {},
|
||||||
|
|
||||||
|
// Track if form has changes
|
||||||
|
hasChanges: false,
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorProfileLog.info('Profile init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorProfileInitialized) {
|
||||||
|
vendorProfileLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorProfileInitialized = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadProfile();
|
||||||
|
} catch (error) {
|
||||||
|
vendorProfileLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize profile page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorProfileLog.info('Profile initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load vendor profile
|
||||||
|
*/
|
||||||
|
async loadProfile() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/profile`);
|
||||||
|
|
||||||
|
this.profile = response;
|
||||||
|
this.form = {
|
||||||
|
name: response.name || '',
|
||||||
|
contact_email: response.contact_email || '',
|
||||||
|
contact_phone: response.contact_phone || '',
|
||||||
|
website: response.website || '',
|
||||||
|
business_address: response.business_address || '',
|
||||||
|
tax_number: response.tax_number || '',
|
||||||
|
description: response.description || ''
|
||||||
|
};
|
||||||
|
|
||||||
|
this.hasChanges = false;
|
||||||
|
vendorProfileLog.info('Loaded profile:', this.profile.vendor_code);
|
||||||
|
} catch (error) {
|
||||||
|
vendorProfileLog.error('Failed to load profile:', error);
|
||||||
|
this.error = error.message || 'Failed to load profile';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mark form as changed
|
||||||
|
*/
|
||||||
|
markChanged() {
|
||||||
|
this.hasChanges = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validate form
|
||||||
|
*/
|
||||||
|
validateForm() {
|
||||||
|
this.errors = {};
|
||||||
|
|
||||||
|
if (!this.form.name?.trim()) {
|
||||||
|
this.errors.name = 'Business name is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.form.contact_email && !this.isValidEmail(this.form.contact_email)) {
|
||||||
|
this.errors.contact_email = 'Invalid email address';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.form.website && !this.isValidUrl(this.form.website)) {
|
||||||
|
this.errors.website = 'Invalid URL format';
|
||||||
|
}
|
||||||
|
|
||||||
|
return Object.keys(this.errors).length === 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if email is valid
|
||||||
|
*/
|
||||||
|
isValidEmail(email) {
|
||||||
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if URL is valid
|
||||||
|
*/
|
||||||
|
isValidUrl(url) {
|
||||||
|
try {
|
||||||
|
new URL(url);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return url.match(/^(https?:\/\/)?[\w-]+(\.[\w-]+)+/) !== null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save profile changes
|
||||||
|
*/
|
||||||
|
async saveProfile() {
|
||||||
|
if (!this.validateForm()) {
|
||||||
|
Utils.showToast('Please fix the errors before saving', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(`/vendor/${this.vendorCode}/profile`, this.form);
|
||||||
|
|
||||||
|
Utils.showToast('Profile updated successfully', 'success');
|
||||||
|
vendorProfileLog.info('Profile updated');
|
||||||
|
|
||||||
|
this.hasChanges = false;
|
||||||
|
await this.loadProfile();
|
||||||
|
} catch (error) {
|
||||||
|
vendorProfileLog.error('Failed to save profile:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to save profile', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset form to original values
|
||||||
|
*/
|
||||||
|
resetForm() {
|
||||||
|
if (this.profile) {
|
||||||
|
this.form = {
|
||||||
|
name: this.profile.name || '',
|
||||||
|
contact_email: this.profile.contact_email || '',
|
||||||
|
contact_phone: this.profile.contact_phone || '',
|
||||||
|
website: this.profile.website || '',
|
||||||
|
business_address: this.profile.business_address || '',
|
||||||
|
tax_number: this.profile.tax_number || '',
|
||||||
|
description: this.profile.description || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
this.hasChanges = false;
|
||||||
|
this.errors = {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
178
static/vendor/js/settings.js
vendored
Normal file
178
static/vendor/js/settings.js
vendored
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
// static/vendor/js/settings.js
|
||||||
|
/**
|
||||||
|
* Vendor settings management page logic
|
||||||
|
* Configure vendor preferences and integrations
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorSettingsLog = window.LogConfig.loggers.vendorSettings ||
|
||||||
|
window.LogConfig.createLogger('vendorSettings', false);
|
||||||
|
|
||||||
|
vendorSettingsLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorSettings() {
|
||||||
|
vendorSettingsLog.info('vendorSettings() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'settings',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Settings data
|
||||||
|
settings: null,
|
||||||
|
|
||||||
|
// Active section
|
||||||
|
activeSection: 'general',
|
||||||
|
|
||||||
|
// Sections for navigation
|
||||||
|
sections: [
|
||||||
|
{ id: 'general', label: 'General', icon: 'cog' },
|
||||||
|
{ id: 'marketplace', label: 'Marketplace', icon: 'shopping-cart' },
|
||||||
|
{ id: 'notifications', label: 'Notifications', icon: 'bell' }
|
||||||
|
],
|
||||||
|
|
||||||
|
// Forms for different sections
|
||||||
|
generalForm: {
|
||||||
|
subdomain: '',
|
||||||
|
is_active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
marketplaceForm: {
|
||||||
|
letzshop_csv_url_fr: '',
|
||||||
|
letzshop_csv_url_en: '',
|
||||||
|
letzshop_csv_url_de: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
notificationForm: {
|
||||||
|
email_notifications: true,
|
||||||
|
order_notifications: true,
|
||||||
|
marketing_emails: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// Track changes
|
||||||
|
hasChanges: false,
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorSettingsLog.info('Settings init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorSettingsInitialized) {
|
||||||
|
vendorSettingsLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorSettingsInitialized = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.loadSettings();
|
||||||
|
} catch (error) {
|
||||||
|
vendorSettingsLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize settings page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorSettingsLog.info('Settings initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load vendor settings
|
||||||
|
*/
|
||||||
|
async loadSettings() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/settings`);
|
||||||
|
|
||||||
|
this.settings = response;
|
||||||
|
|
||||||
|
// Populate forms
|
||||||
|
this.generalForm = {
|
||||||
|
subdomain: response.subdomain || '',
|
||||||
|
is_active: response.is_active !== false
|
||||||
|
};
|
||||||
|
|
||||||
|
this.marketplaceForm = {
|
||||||
|
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 || ''
|
||||||
|
};
|
||||||
|
|
||||||
|
this.hasChanges = false;
|
||||||
|
vendorSettingsLog.info('Loaded settings');
|
||||||
|
} catch (error) {
|
||||||
|
vendorSettingsLog.error('Failed to load settings:', error);
|
||||||
|
this.error = error.message || 'Failed to load settings';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mark form as changed
|
||||||
|
*/
|
||||||
|
markChanged() {
|
||||||
|
this.hasChanges = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save marketplace settings
|
||||||
|
*/
|
||||||
|
async saveMarketplaceSettings() {
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(`/vendor/${this.vendorCode}/settings/marketplace`, this.marketplaceForm);
|
||||||
|
|
||||||
|
Utils.showToast('Marketplace settings saved', 'success');
|
||||||
|
vendorSettingsLog.info('Marketplace settings updated');
|
||||||
|
|
||||||
|
this.hasChanges = false;
|
||||||
|
} catch (error) {
|
||||||
|
vendorSettingsLog.error('Failed to save marketplace settings:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to save settings', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test Letzshop CSV URL
|
||||||
|
*/
|
||||||
|
async testLetzshopUrl(lang) {
|
||||||
|
const url = this.marketplaceForm[`letzshop_csv_url_${lang}`];
|
||||||
|
if (!url) {
|
||||||
|
Utils.showToast('Please enter a URL first', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
// Try to fetch the URL to validate it
|
||||||
|
const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
|
||||||
|
Utils.showToast(`URL appears to be valid`, 'success');
|
||||||
|
} catch (error) {
|
||||||
|
Utils.showToast('Could not validate URL - it may still work', 'warning');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset settings to saved values
|
||||||
|
*/
|
||||||
|
resetSettings() {
|
||||||
|
this.loadSettings();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch active section
|
||||||
|
*/
|
||||||
|
setSection(sectionId) {
|
||||||
|
this.activeSection = sectionId;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
268
static/vendor/js/team.js
vendored
Normal file
268
static/vendor/js/team.js
vendored
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
// static/vendor/js/team.js
|
||||||
|
/**
|
||||||
|
* Vendor team management page logic
|
||||||
|
* Manage team members, invitations, and roles
|
||||||
|
*/
|
||||||
|
|
||||||
|
const vendorTeamLog = window.LogConfig.loggers.vendorTeam ||
|
||||||
|
window.LogConfig.createLogger('vendorTeam', false);
|
||||||
|
|
||||||
|
vendorTeamLog.info('Loading...');
|
||||||
|
|
||||||
|
function vendorTeam() {
|
||||||
|
vendorTeamLog.info('vendorTeam() called');
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Inherit base layout state
|
||||||
|
...data(),
|
||||||
|
|
||||||
|
// Set page identifier
|
||||||
|
currentPage: 'team',
|
||||||
|
|
||||||
|
// Loading states
|
||||||
|
loading: true,
|
||||||
|
error: '',
|
||||||
|
saving: false,
|
||||||
|
|
||||||
|
// Team data
|
||||||
|
members: [],
|
||||||
|
roles: [],
|
||||||
|
stats: {
|
||||||
|
total: 0,
|
||||||
|
active_count: 0,
|
||||||
|
pending_invitations: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
showInviteModal: false,
|
||||||
|
showEditModal: false,
|
||||||
|
showRemoveModal: false,
|
||||||
|
selectedMember: null,
|
||||||
|
|
||||||
|
// Invite form
|
||||||
|
inviteForm: {
|
||||||
|
email: '',
|
||||||
|
first_name: '',
|
||||||
|
last_name: '',
|
||||||
|
role_name: 'staff'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Edit form
|
||||||
|
editForm: {
|
||||||
|
role_id: null,
|
||||||
|
is_active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// Available role names for invite
|
||||||
|
roleOptions: [
|
||||||
|
{ value: 'owner', label: 'Owner', description: 'Full access to all features' },
|
||||||
|
{ value: 'manager', label: 'Manager', description: 'Manage orders, products, and team' },
|
||||||
|
{ value: 'staff', label: 'Staff', description: 'Handle orders and products' },
|
||||||
|
{ value: 'support', label: 'Support', description: 'Customer support access' },
|
||||||
|
{ value: 'viewer', label: 'Viewer', description: 'Read-only access' },
|
||||||
|
{ value: 'marketing', label: 'Marketing', description: 'Content and promotions' }
|
||||||
|
],
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
vendorTeamLog.info('Team init() called');
|
||||||
|
|
||||||
|
// Guard against multiple initialization
|
||||||
|
if (window._vendorTeamInitialized) {
|
||||||
|
vendorTeamLog.warn('Already initialized, skipping');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window._vendorTeamInitialized = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
this.loadMembers(),
|
||||||
|
this.loadRoles()
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Init failed:', error);
|
||||||
|
this.error = 'Failed to initialize team page';
|
||||||
|
}
|
||||||
|
|
||||||
|
vendorTeamLog.info('Team initialization complete');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load team members
|
||||||
|
*/
|
||||||
|
async loadMembers() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/team/members?include_inactive=true`);
|
||||||
|
|
||||||
|
this.members = response.members || [];
|
||||||
|
this.stats = {
|
||||||
|
total: response.total || 0,
|
||||||
|
active_count: response.active_count || 0,
|
||||||
|
pending_invitations: response.pending_invitations || 0
|
||||||
|
};
|
||||||
|
|
||||||
|
vendorTeamLog.info('Loaded team members:', this.members.length);
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Failed to load team members:', error);
|
||||||
|
this.error = error.message || 'Failed to load team members';
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load available roles
|
||||||
|
*/
|
||||||
|
async loadRoles() {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get(`/vendor/${this.vendorCode}/team/roles`);
|
||||||
|
this.roles = response.roles || [];
|
||||||
|
vendorTeamLog.info('Loaded roles:', this.roles.length);
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Failed to load roles:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open invite modal
|
||||||
|
*/
|
||||||
|
openInviteModal() {
|
||||||
|
this.inviteForm = {
|
||||||
|
email: '',
|
||||||
|
first_name: '',
|
||||||
|
last_name: '',
|
||||||
|
role_name: 'staff'
|
||||||
|
};
|
||||||
|
this.showInviteModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send invitation
|
||||||
|
*/
|
||||||
|
async sendInvitation() {
|
||||||
|
if (!this.inviteForm.email) {
|
||||||
|
Utils.showToast('Email is required', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.post(`/vendor/${this.vendorCode}/team/invite`, this.inviteForm);
|
||||||
|
|
||||||
|
Utils.showToast('Invitation sent successfully', 'success');
|
||||||
|
vendorTeamLog.info('Invitation sent to:', this.inviteForm.email);
|
||||||
|
|
||||||
|
this.showInviteModal = false;
|
||||||
|
await this.loadMembers();
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Failed to send invitation:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to send invitation', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open edit member modal
|
||||||
|
*/
|
||||||
|
openEditModal(member) {
|
||||||
|
this.selectedMember = member;
|
||||||
|
this.editForm = {
|
||||||
|
role_id: member.role_id,
|
||||||
|
is_active: member.is_active
|
||||||
|
};
|
||||||
|
this.showEditModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update team member
|
||||||
|
*/
|
||||||
|
async updateMember() {
|
||||||
|
if (!this.selectedMember) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.put(
|
||||||
|
`/vendor/${this.vendorCode}/team/members/${this.selectedMember.user_id}`,
|
||||||
|
this.editForm
|
||||||
|
);
|
||||||
|
|
||||||
|
Utils.showToast('Team member updated', 'success');
|
||||||
|
vendorTeamLog.info('Updated team member:', this.selectedMember.user_id);
|
||||||
|
|
||||||
|
this.showEditModal = false;
|
||||||
|
this.selectedMember = null;
|
||||||
|
await this.loadMembers();
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Failed to update team member:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to update team member', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Confirm remove member
|
||||||
|
*/
|
||||||
|
confirmRemove(member) {
|
||||||
|
this.selectedMember = member;
|
||||||
|
this.showRemoveModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove team member
|
||||||
|
*/
|
||||||
|
async removeMember() {
|
||||||
|
if (!this.selectedMember) return;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/vendor/${this.vendorCode}/team/members/${this.selectedMember.user_id}`);
|
||||||
|
|
||||||
|
Utils.showToast('Team member removed', 'success');
|
||||||
|
vendorTeamLog.info('Removed team member:', this.selectedMember.user_id);
|
||||||
|
|
||||||
|
this.showRemoveModal = false;
|
||||||
|
this.selectedMember = null;
|
||||||
|
await this.loadMembers();
|
||||||
|
} catch (error) {
|
||||||
|
vendorTeamLog.error('Failed to remove team member:', error);
|
||||||
|
Utils.showToast(error.message || 'Failed to remove team member', 'error');
|
||||||
|
} finally {
|
||||||
|
this.saving = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get role display name
|
||||||
|
*/
|
||||||
|
getRoleName(member) {
|
||||||
|
if (member.role_name) return member.role_name;
|
||||||
|
const role = this.roles.find(r => r.id === member.role_id);
|
||||||
|
return role ? role.name : 'Unknown';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get member initials for avatar
|
||||||
|
*/
|
||||||
|
getInitials(member) {
|
||||||
|
const first = member.first_name || member.email?.charAt(0) || '';
|
||||||
|
const last = member.last_name || '';
|
||||||
|
return (first.charAt(0) + last.charAt(0)).toUpperCase() || '?';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format date for display
|
||||||
|
*/
|
||||||
|
formatDate(dateStr) {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user