Redesign menu admin screen with two-panel layout and modal forms

Browse Source

UX improvements:
- Two-panel layout: sticky category sidebar (desktop) + items grid
- Mobile: horizontal scrolling category pills above items
- Category sidebar shows item count badge per category; edit on hover
- Items search bar + instant filter (name, English name, Arabic name)
- Category filter drives items grid (click sidebar = filter items)
- Item cards: image hover reveals Edit button (progressive disclosure)
- Out-of-stock overlay + inline toggle switch (replaces text button)
- Add/Edit item opens in clean modal overlay (no jarring inline expansion)
- Add/Edit category opens in separate modal
- nameEn made optional (was blocking new item creation)
- Consolidated form state with single object per form
- Empty state with illustration and Add CTA
- Skeleton loading grid
- Branch overrides tab wired to branchId from store
- New i18n keys for search, counts, states in en/fa/ar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

...

This commit is contained in:

soroush.asadi

2026-05-28 08:10:25 +03:30

parent 79deab543a

commit 8f81a62ec9

4 changed files with 840 additions and 425 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

web/dashboard/src/components/menu/menu-admin-screen.tsx

+786 -422

File diff suppressed because it is too large Load Diff