orion/docs/implementation/vendor-frontend-parity-plan.md

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 ✅

• Read admin sidebar for patterns
• Create vendor sidebar macros
• Implement collapsible sections
• Add localStorage persistence
• Complete mobile sidebar
• Test all states

Phase 2: Core JS Files ✅

• products.js
• orders.js
• inventory.js
• customers.js
• team.js
• profile.js
• settings.js
• content-pages.js (already exists)

Phase 3: New Features

• Notifications center
• Analytics page
• Bulk operations