Admin SPA UI & CRUD Standards

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.