# Web / iPad App — Product 2 of 2 This folder holds **Product 2** of the SuperCat Design System: the **Web / iPad App** surface. → See [`../docs/SURFACES.md`](../docs/SURFACES.md) for the full architecture (one foundation, two products). → See [`../docs/FRAMEWORK-GUIDE.md`](../docs/FRAMEWORK-GUIDE.md) for React/Vue/Angular/Svelte/Tailwind integration. → See [`../README.md`](../README.md) for the top-level entry point. --- ## What lives here | File | Role | |---|---| | `sales-portal-skin-mockup.html` | Before/after mockup of eCat Sales Portal with DS tokens on existing chrome (Phase 1). Toggle Legacy ↔ Proposed. | | `dashboard.html` | Workspace home — metric tiles + chart + best-sellers + activity. Skeleton-loaded with a Refresh control. | | `orders.html` | Orders data table — status tabs · search · filters · sortable headers · status pills · pagination. Skeleton-loaded. | | `products.html` | Products card-view grid — 4-up with rotating cover tones, vendor + SKU eyebrow, status pill + tabular-num price, New/Low corner flags. Skeleton-loaded. | | `settings.html` | Company Settings — horizontal `.ktab` section nav with panel swap. Profile, branding, address, defaults, notifications, API tokens, danger zone. Sticky save bar. | --- ## The App contract | Aspect | Rule | |---|---| | **Layout root** | `
` — floating shell with sticky `.knav-floating` sidebar + transparent `.kshell-top` topbar + `.kshell-content` main. | | **Sidebar** | `