Docs: additional for routing, ui standards guidelines and affiliates

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.