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:
2026-01-01 15:34:38 +01:00
parent d803e1c911
commit 463e1b67d5
18 changed files with 4100 additions and 374 deletions

View 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