WooNooW/SPA_ADMIN_MENU_PLAN.md

WooNooW — Single Source of Truth for WooCommerce Admin Menus → SPA Routes

This document enumerates the default WooCommerce admin menus & submenus (no add‑ons) and defines how each maps to our SPA routes. It is the canonical reference for nav generation and routing.

Scope: WordPress wp‑admin defaults from WooCommerce core and WooCommerce Admin (Analytics/Marketing). Add‑ons will be collected dynamically at runtime and handled separately.

---

Legend

• WP Admin: the native admin path/slug WooCommerce registers
• Purpose: what the screen is about
• SPA Route: our hash route (admin‑spa), used by nav + router
• Status:
  • SPA = fully replaced by a native SPA view
  • Bridge = temporarily rendered in a legacy bridge (iframe) inside SPA
  • Planned = route reserved, SPA view pending

---

Top‑level: WooCommerce (woocommerce)

Menu	WP Admin	Purpose	SPA Route	Status
Home	admin.php?page=wc-admin	WC Admin home / activity	/home	Bridge (for now)
Orders	edit.php?post_type=shop_order	Order list & management	/orders	SPA
Add Order	post-new.php?post_type=shop_order	Create order	/orders/new	SPA
Customers	admin.php?page=wc-admin&path=/customers	Customer index	/customers	Planned
Coupons	edit.php?post_type=shop_coupon	Coupon list	/coupons	Planned
Settings	admin.php?page=wc-settings	Store settings (tabs)	/settings	Bridge (tabbed)
Status	admin.php?page=wc-status	System status/tools	/status	Bridge
Extensions	admin.php?page=wc-addons	Marketplace	/extensions	Bridge

Notes

• “Add Order” does not always appear as a submenu in all installs, but we expose /orders/new explicitly in SPA.
• Some sites show Reports (classic) if WooCommerce Admin is disabled; we route that under /reports (Bridge) if present.

---

Top‑level: Products (edit.php?post_type=product)

Menu	WP Admin	Purpose	SPA Route	Status
All Products	edit.php?post_type=product	Product catalog	/products	Planned
Add New	post-new.php?post_type=product	Create product	/products/new	Planned
Categories	edit-tags.php?taxonomy=product_cat&post_type=product	Category mgmt	/products/categories	Planned
Tags	edit-tags.php?taxonomy=product_tag&post_type=product	Tag mgmt	/products/tags	Planned
Attributes	edit.php?post_type=product&page=product_attributes	Attributes mgmt	/products/attributes	Planned

---

Top‑level: Analytics (admin.php?page=wc-admin&path=/analytics/overview)

Menu	WP Admin	Purpose	SPA Route	Status
Overview	admin.php?page=wc-admin&path=/analytics/overview	KPIs dashboard	/analytics/overview	Bridge
Revenue	admin.php?page=wc-admin&path=/analytics/revenue	Revenue report	/analytics/revenue	Bridge
Orders	admin.php?page=wc-admin&path=/analytics/orders	Orders report	/analytics/orders	Bridge
Products	admin.php?page=wc-admin&path=/analytics/products	Products report	/analytics/products	Bridge
Categories	admin.php?page=wc-admin&path=/analytics/categories	Categories report	/analytics/categories	Bridge
Coupons	admin.php?page=wc-admin&path=/analytics/coupons	Coupons report	/analytics/coupons	Bridge
Taxes	admin.php?page=wc-admin&path=/analytics/taxes	Taxes report	/analytics/taxes	Bridge
Downloads	admin.php?page=wc-admin&path=/analytics/downloads	Downloads report	/analytics/downloads	Bridge
Stock	admin.php?page=wc-admin&path=/analytics/stock	Stock report	/analytics/stock	Bridge
Settings	admin.php?page=wc-admin&path=/analytics/settings	Analytics settings	/analytics/settings	Bridge

Analytics entries are provided by WooCommerce Admin. We keep them accessible via a Bridge until replaced.

---

Top‑level: Marketing (admin.php?page=wc-admin&path=/marketing)

Menu	WP Admin	Purpose	SPA Route	Status
Hub	admin.php?page=wc-admin&path=/marketing	Marketing hub	/marketing	Bridge

---

Cross‑reference for routing

When our SPA receives a wp-admin URL, map using these regex rules first; if no match, fall back to Legacy Bridge:

// Admin URL → SPA route mapping
export const WC_ADMIN_ROUTE_MAP: Array<[RegExp, string]> = [
  [/edit\.php\?post_type=shop_order/i, '/orders'],
  [/post-new\.php\?post_type=shop_order/i, '/orders/new'],
  [/edit\.php\?post_type=product/i, '/products'],
  [/post-new\.php\?post_type=product/i, '/products/new'],
  [/edit-tags\.php\?taxonomy=product_cat/i, '/products/categories'],
  [/edit-tags\.php\?taxonomy=product_tag/i, '/products/tags'],
  [/product_attributes/i, '/products/attributes'],
  [/wc-admin.*path=%2Fcustomers/i, '/customers'],
  [/wc-admin.*path=%2Fanalytics%2Foverview/i, '/analytics/overview'],
  [/wc-admin.*path=%2Fanalytics%2Frevenue/i, '/analytics/revenue'],
  [/wc-admin.*path=%2Fanalytics%2Forders/i, '/analytics/orders'],
  [/wc-admin.*path=%2Fanalytics%2Fproducts/i, '/analytics/products'],
  [/wc-admin.*path=%2Fanalytics%2Fcategories/i, '/analytics/categories'],
  [/wc-admin.*path=%2Fanalytics%2Fcoupons/i, '/analytics/coupons'],
  [/wc-admin.*path=%2Fanalytics%2Ftaxes/i, '/analytics/taxes'],
  [/wc-admin.*path=%2Fanalytics%2Fdownloads/i, '/analytics/downloads'],
  [/wc-admin.*path=%2Fanalytics%2Fstock/i, '/analytics/stock'],
  [/wc-admin.*path=%2Fanalytics%2Fsettings/i, '/analytics/settings'],
  [/wc-admin.*page=wc-settings/i, '/settings'],
  [/wc-status/i, '/status'],
  [/wc-addons/i, '/extensions'],
];

Keep this map in sync with the SPA routers. New SPA screens should switch a route’s Status from Bridge → SPA.

---

Implementation notes

• Nav Data: The runtime menu collector already injects window.WNM_WC_MENUS. Use this file as the static canonical mapping and the collector data as the dynamic source for what exists in a given site.
• Hidden WP‑Admin: wp‑admin menus will be hidden in final builds; all entries must be reachable via SPA.
• Capabilities: Respect capability from WP when we later enforce per‑user visibility. For now, the collector includes only titles/links.
• Customers & Coupons: Some installs place these differently. Our SPA routes should remain stable; mapping rules above handle variants.

---

Current SPA coverage (at a glance)

• Orders (list/new/edit/show) → SPA ✅
• Products (catalog/new/attributes/categories/tags) → Planned
• Customers, Coupons, Analytics, Marketing, Settings, Status, Extensions → Bridge → SPA gradually

---

Visual Menu Tree (Default WooCommerce Admin)

This tree mirrors what appears in the WordPress admin sidebar for a default WooCommerce installation — excluding add‑ons.

WooCommerce
├── Home (wc-admin)
├── Orders
│   ├── All Orders
│   └── Add Order
├── Customers
├── Coupons
├── Reports (deprecated classic) [may not appear if WC Admin enabled]
├── Settings
│   ├── General
│   ├── Products
│   ├── Tax
│   ├── Shipping
│   ├── Payments
│   ├── Accounts & Privacy
│   ├── Emails
│   ├── Integration
│   └── Advanced
├── Status
│   ├── System Status
│   ├── Tools
│   ├── Logs
│   └── Scheduled Actions
└── Extensions

Products
├── All Products
├── Add New
├── Categories
├── Tags
└── Attributes

Analytics (WooCommerce Admin)
├── Overview
├── Revenue
├── Orders
├── Products
├── Categories
├── Coupons
├── Taxes
├── Downloads
├── Stock
└── Settings

Marketing
└── Hub

Use this as a structural reference for navigation hierarchy when rendering nested navs in SPA (e.g., hover or sidebar expansion).

Proposed SPA Main Menu (Authoritative)

This replaces wp‑admin’s structure with a focused SPA hierarchy. Analytics & Marketing are folded into Dashboard. Status and Extensions live under Settings.

Dashboard
├── Overview (/dashboard)                    ← default landing
├── Revenue (/dashboard/revenue)
├── Orders (/dashboard/orders)
├── Products (/dashboard/products)
├── Categories (/dashboard/categories)
├── Coupons (/dashboard/coupons)
├── Taxes (/dashboard/taxes)
├── Downloads (/dashboard/downloads)
└── Stock (/dashboard/stock)

Orders
├── All Orders (/orders)
└── Add Order (/orders/new)

Products
├── All Products (/products)
├── Add New (/products/new)
├── Categories (/products/categories)
├── Tags (/products/tags)
└── Attributes (/products/attributes)

Coupons
└── All Coupons (/coupons)

Customers
└── All Customers (/customers)
  (Customers are derived from orders + user profiles; non‑buyers are excluded by default.)

Settings
├── General (/settings/general)
├── Products (/settings/products)
├── Tax (/settings/tax)
├── Shipping (/settings/shipping)
├── Payments (/settings/payments)
├── Accounts & Privacy (/settings/accounts)
├── Emails (/settings/emails)
├── Integrations (/settings/integrations)
├── Advanced (/settings/advanced)
├── Status (/settings/status)
└── Extensions (/settings/extensions)

Routing notes

• Dashboard subsumes Analytics & (most) Marketing metrics. Each item maps to a SPA page. Until built, these can open a Legacy Bridge view of the corresponding wc‑admin screen.
• Status and Extensions are still reachable (now under Settings) and can bridge to wc-status and wc-addons until replaced.
• Existing map (WC_ADMIN_ROUTE_MAP) remains, but should redirect legacy URLs to the new SPA paths above.

---

What is “Marketing / Hub” in WooCommerce?

The Marketing (Hub) screen is part of WooCommerce Admin. It aggregates recommended extensions and campaign tools (e.g., MailPoet, Facebook/Google listings, coupon promos). It’s not essential for day‑to‑day store ops. In WooNooW we fold campaign performance into Dashboard metrics; the extension browsing/management aspect is covered under Settings → Extensions (Bridge until native UI exists).

Customers in SPA

WooCommerce’s wc‑admin provides a Customers table; classic wp‑admin does not. Our SPA’s Customers pulls from orders + user profiles to show buyers. Non‑buyers are excluded by default (configurable later). Route: /customers.

---

Action items

• Update quick‑nav to use this SPA menu tree for top‑level buttons.
• Extend WC_ADMIN_ROUTE_MAP to point legacy analytics URLs to the new /dashboard/* paths.
• Implement /dashboard/* pages incrementally; use Legacy Bridge where needed.
• Keep window.WNM_WC_MENUS for add‑on items (dynamic), nesting them under Settings or Dashboard as appropriate.