---
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.