fix: resolve search dropdown clickability and add new documentation pages

- Fix: resolve search dropdown clickability by increasing z-index. The DocSearch button and dropdown were not clickable due to z-index conflict with sticky sidebar elements. Added position: relative and z-index: 501 to .docsearch .DocSearch-Button, and z-index: 500 to .docsearch wrapper to ensure proper stacking context.

- Docs: add UI Standards documentation for developer guidelines
- Docs: add Routing documentation for developer reference
- Docs: add Affiliates documentation for marketing section

contents/docs/developer/routing/index.mdx

@@ -0,0 +1,44 @@
+---
+title: SPA Routing Architecture
+description: Understand the HashRouter implementation in the Customer SPA and why it's used.
+---
+
+WooNooW relies on a **Hybrid by Default** architecture with React SPA islands. To avoid conflicting with native WordPress rewrite rules and to provide a seamless frontend experience, the Customer SPA uses `HashRouter` instead of the traditional `BrowserRouter`.
+
+## Why HashRouter?
+
+When a customer navigates the WooNooW Customer SPA (e.g., Shop, Cart, Checkout, or My Account), the routing happens entirely on the client side without triggering full page reloads or conflicting with WordPress.
+
+**URL Format:**
+```
+Shop:     https://example.com/shop#/
+Product:  https://example.com/shop#/product/product-slug
+Cart:     https://example.com/shop#/cart
+Checkout: https://example.com/shop#/checkout
+Account:  https://example.com/shop#/my-account
+```
+
+### How It Works
+
+1. **WordPress Load**: WordPress handles the initial request (e.g., `/shop`) and renders the SPA container.
+2. **React Takes Over**: The React application reads the route after the `#` (e.g., `#/product/product-slug`) and renders the appropriate component.
+3. **No Conflicts**: Anything after the hash `#` is ignored by the server, ensuring zero 404 errors or conflicts with existing WordPress canonical redirects.
+
+## Benefits
+
+*   **Zero Server Config**: No complex `.htaccess` or NGINX rewrite rules required.
+*   **Shareable Links**: Hash routes can be shared in email campaigns or social media.
+*   **Direct URL Access**: Users can directly paste a URL or bookmark a page and the SPA will load perfectly.
+
+## Developer Rules
+
+When building custom frontend extensions or working with the Customer SPA:
+
+1.  **Always use `HashRouter`** for the Customer SPA.
+2.  **Use React Router `Link` components** to ensure links automatically use hash URLs.
+3.  **Never use `BrowserRouter`**, as it will cause immediate conflicts with WordPress routing.
+4.  **Never try to override WordPress routes**; rely on the hash for internal SPA navigation.
+
+## SEO Considerations
+
+While HashRouter URLs are primarily for the SPA experience, WooCommerce product pages still exist in the background. Search engines index the actual product URLs, and canonical tags ensure SEO equity is maintained while providing the fast SPA experience to actual users.

contents/docs/developer/ui-standards/index.mdx

@@ -0,0 +1,58 @@
+---
+title: Admin SPA UI & CRUD Standards
+description: Design principles, layout structure, and behavioral patterns for the WooNooW Admin interface.
+---
+
+WooNooW enforces a strict UI pattern for the Admin SPA to ensure predictable UX, maintainability, and responsiveness. When building custom modules or addons, adhere to these standards.
+
+## Template Pattern
+
+The WooNooW Admin SPA follows a consistent layout structure:
+
+*   **App Bar**: Persistent across all routes. Contains global controls like fullscreen toggle, server connectivity, and the user menu.
+*   **Menu Bar**: Primary navigation (Dashboard, Orders, Products). Sticky with overflow-x scroll. In Fullscreen mode, it becomes a collapsible sidebar.
+*   **Submenu Bar**: Context-sensitive secondary tabs under the main menu.
+*   **Page Tool Bar**: Functional filters and actions relevant to the current page.
+*   **Page Content**: Hosts data tables, analytics, and CRUD forms.
+
+## CRUD Module Pattern
+
+All entity management modules (Orders, Products, Customers) use a consistent **Submenu Tabs Pattern**:
+
+`[All {Entity}] [New] [Categories] [Tags]`
+
+### Implementation Rules
+*   **Use Submenu Tabs**: The primary action (e.g., "New") is a tab, NOT a toolbar button.
+*   **Toolbar for Actions & Filters**: Use the toolbar for bulk actions (Delete, Export), filter dropdowns, and search inputs. **Do not** put primary CRUD buttons here.
+*   **No Mixing**: Keep filters in the toolbar and navigation in the submenu.
+
+## Toolbar Button Standards
+
+*   **Delete**: Always use a red background (`bg-red-600`), and only show when items are selected.
+*   **Refresh**: Mandatory on all CRUD list pages (`hover:bg-accent`).
+*   **Reset Filters**: Use a text link style with underline (`hover:text-foreground underline`), not a button block.
+*   **Icons**: Use `inline-flex items-center gap-2`.
+
+## Table and List UI Standards
+
+Tables must gracefully degrade to tappable cards on mobile devices.
+
+### Desktop Tables
+*   Use `bg-muted/50` for table headers and `font-medium`.
+*   Body rows should have `hover:bg-muted/30`.
+*   Table cells use consistent padding (`p-3`).
+
+### Mobile Cards
+Mobile cards are fully tappable links wrapping the entire card body.
+*   Hide on desktop (`md:hidden`) and show on mobile.
+*   Add a visual indicator like a chevron to indicate tappability.
+*   Include active scale animation (`active:scale-[0.98]`) for tap feedback.
+
+## Dialog Behavior Pattern
+
+WooNooW prevents accidental dismissal of heavy forms and complex edits using Radix UI Dialog patterns.
+
+*   **Prevent outside click & escape key** for heavy edits (Email builder, multi-field forms, destructive actions).
+*   **Allow dismissal** for simple info dialogs or quick single-field edits.
+
+Always provide explicit 'Cancel' and 'Save' buttons.

contents/docs/marketing/affiliates/index.mdx

@@ -0,0 +1,30 @@
+---
+title: Affiliate Program
+description: Manage referral tracking and commissions for your store.
+---
+
+> [!NOTE]
+> **Status:** Planning / Upcoming Feature
+> The Affiliate Program module is currently in development and will be available in a future release.
+
+The WooNooW Affiliate Program allows you to build a network of partners who earn commissions by referring customers to your store. This feature is fully integrated into the WooNooW Admin SPA and Customer Dashboard.
+
+## Overview
+
+The affiliate system will handle referral tracking, commission calculation, and payout management without needing external plugins.
+
+### Planned Features
+
+1.  **Referral Tracking**: Cookie-based tracking (e.g., 30 days) to accurately attribute sales to affiliates.
+2.  **Commission Management**: Set flexible commission rates for successful referrals.
+3.  **Admin Management UI**:
+    *   Review and approve affiliate applications.
+    *   Monitor referral history and earnings.
+    *   Process payouts directly from the admin dashboard.
+4.  **Customer Dashboard Integration**:
+    *   Affiliates can access their unique referral links and codes from their account page.
+    *   View real-time statistics (clicks, conversions, pending earnings).
+    *   Submit payout requests.
+5.  **Automated Notifications**: Trigger emails or notifications when a referral is completed or a payout is processed.
+
+*More details will be provided once the module is officially released.*

docs/developer/routing.mdx

@@ -0,0 +1,44 @@
+---
+title: SPA Routing Architecture
+description: Understand the HashRouter implementation in the Customer SPA and why it's used.
+---
+
+WooNooW relies on a **Hybrid by Default** architecture with React SPA islands. To avoid conflicting with native WordPress rewrite rules and to provide a seamless frontend experience, the Customer SPA uses `HashRouter` instead of the traditional `BrowserRouter`.
+
+## Why HashRouter?
+
+When a customer navigates the WooNooW Customer SPA (e.g., Shop, Cart, Checkout, or My Account), the routing happens entirely on the client side without triggering full page reloads or conflicting with WordPress.
+
+**URL Format:**
+```
+Shop:     https://example.com/shop#/
+Product:  https://example.com/shop#/product/product-slug
+Cart:     https://example.com/shop#/cart
+Checkout: https://example.com/shop#/checkout
+Account:  https://example.com/shop#/my-account
+```
+
+### How It Works
+
+1. **WordPress Load**: WordPress handles the initial request (e.g., `/shop`) and renders the SPA container.
+2. **React Takes Over**: The React application reads the route after the `#` (e.g., `#/product/product-slug`) and renders the appropriate component.
+3. **No Conflicts**: Anything after the hash `#` is ignored by the server, ensuring zero 404 errors or conflicts with existing WordPress canonical redirects.
+
+## Benefits
+
+*   **Zero Server Config**: No complex `.htaccess` or NGINX rewrite rules required.
+*   **Shareable Links**: Hash routes can be shared in email campaigns or social media.
+*   **Direct URL Access**: Users can directly paste a URL or bookmark a page and the SPA will load perfectly.
+
+## Developer Rules
+
+When building custom frontend extensions or working with the Customer SPA:
+
+1.  **Always use `HashRouter`** for the Customer SPA.
+2.  **Use React Router `Link` components** to ensure links automatically use hash URLs.
+3.  **Never use `BrowserRouter`**, as it will cause immediate conflicts with WordPress routing.
+4.  **Never try to override WordPress routes**; rely on the hash for internal SPA navigation.
+
+## SEO Considerations
+
+While HashRouter URLs are primarily for the SPA experience, WooCommerce product pages still exist in the background. Search engines index the actual product URLs, and canonical tags ensure SEO equity is maintained while providing the fast SPA experience to actual users.

docs/developer/ui-standards.mdx

@@ -0,0 +1,58 @@
+---
+title: Admin SPA UI & CRUD Standards
+description: Design principles, layout structure, and behavioral patterns for the WooNooW Admin interface.
+---
+
+WooNooW enforces a strict UI pattern for the Admin SPA to ensure predictable UX, maintainability, and responsiveness. When building custom modules or addons, adhere to these standards.
+
+## Template Pattern
+
+The WooNooW Admin SPA follows a consistent layout structure:
+
+*   **App Bar**: Persistent across all routes. Contains global controls like fullscreen toggle, server connectivity, and the user menu.
+*   **Menu Bar**: Primary navigation (Dashboard, Orders, Products). Sticky with overflow-x scroll. In Fullscreen mode, it becomes a collapsible sidebar.
+*   **Submenu Bar**: Context-sensitive secondary tabs under the main menu.
+*   **Page Tool Bar**: Functional filters and actions relevant to the current page.
+*   **Page Content**: Hosts data tables, analytics, and CRUD forms.
+
+## CRUD Module Pattern
+
+All entity management modules (Orders, Products, Customers) use a consistent **Submenu Tabs Pattern**:
+
+`[All {Entity}] [New] [Categories] [Tags]`
+
+### Implementation Rules
+*   **Use Submenu Tabs**: The primary action (e.g., "New") is a tab, NOT a toolbar button.
+*   **Toolbar for Actions & Filters**: Use the toolbar for bulk actions (Delete, Export), filter dropdowns, and search inputs. **Do not** put primary CRUD buttons here.
+*   **No Mixing**: Keep filters in the toolbar and navigation in the submenu.
+
+## Toolbar Button Standards
+
+*   **Delete**: Always use a red background (`bg-red-600`), and only show when items are selected.
+*   **Refresh**: Mandatory on all CRUD list pages (`hover:bg-accent`).
+*   **Reset Filters**: Use a text link style with underline (`hover:text-foreground underline`), not a button block.
+*   **Icons**: Use `inline-flex items-center gap-2`.
+
+## Table and List UI Standards
+
+Tables must gracefully degrade to tappable cards on mobile devices.
+
+### Desktop Tables
+*   Use `bg-muted/50` for table headers and `font-medium`.
+*   Body rows should have `hover:bg-muted/30`.
+*   Table cells use consistent padding (`p-3`).
+
+### Mobile Cards
+Mobile cards are fully tappable links wrapping the entire card body.
+*   Hide on desktop (`md:hidden`) and show on mobile.
+*   Add a visual indicator like a chevron to indicate tappability.
+*   Include active scale animation (`active:scale-[0.98]`) for tap feedback.
+
+## Dialog Behavior Pattern
+
+WooNooW prevents accidental dismissal of heavy forms and complex edits using Radix UI Dialog patterns.
+
+*   **Prevent outside click & escape key** for heavy edits (Email builder, multi-field forms, destructive actions).
+*   **Allow dismissal** for simple info dialogs or quick single-field edits.
+
+Always provide explicit 'Cancel' and 'Save' buttons.

docs/marketing/affiliates.mdx

@@ -0,0 +1,30 @@
+---
+title: Affiliate Program
+description: Manage referral tracking and commissions for your store.
+---
+
+> [!NOTE]
+> **Status:** Planning / Upcoming Feature
+> The Affiliate Program module is currently in development and will be available in a future release.
+
+The WooNooW Affiliate Program allows you to build a network of partners who earn commissions by referring customers to your store. This feature is fully integrated into the WooNooW Admin SPA and Customer Dashboard.
+
+## Overview
+
+The affiliate system will handle referral tracking, commission calculation, and payout management without needing external plugins.
+
+### Planned Features
+
+1.  **Referral Tracking**: Cookie-based tracking (e.g., 30 days) to accurately attribute sales to affiliates.
+2.  **Commission Management**: Set flexible commission rates for successful referrals.
+3.  **Admin Management UI**:
+    *   Review and approve affiliate applications.
+    *   Monitor referral history and earnings.
+    *   Process payouts directly from the admin dashboard.
+4.  **Customer Dashboard Integration**:
+    *   Affiliates can access their unique referral links and codes from their account page.
+    *   View real-time statistics (clicks, conversions, pending earnings).
+    *   Submit payout requests.
+5.  **Automated Notifications**: Trigger emails or notifications when a referral is completed or a payout is processed.
+
+*More details will be provided once the module is officially released.*

docu.json

@@ -122,6 +122,10 @@
         {
           "title": "Wishlist",
           "href": "/wishlist"
+        },
+        {
+          "title": "Affiliates",
+          "href": "/affiliates"
         }
       ]
     },
@@ -239,6 +243,14 @@
           "title": "Store Owner",
           "href": "/store-owner"
         },
+        {
+          "title": "UI Standards",
+          "href": "/ui-standards"
+        },
+        {
+          "title": "Routing",
+          "href": "/routing"
+        },
         {
           "title": "Software Updates",
           "href": "/software-updates"

next.config.mjs

@@ -9,6 +9,9 @@ const nextConfig = {
             },
         ],
     },
+    "allowedDevOrigins": [
+        "192.168.18.82"
+    ],
     experimental: {
         optimizePackageImports: ["lucide-react", "react-icons"],
     },

styles/algolia.css

@@ -48,6 +48,13 @@
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
+  position: relative;
+  z-index: 501;
+}
+
+.docsearch {
+  position: relative;
+  z-index: 500;
 }
 
 .docsearch .DocSearch-Button:hover {