Match Route Figma design and real Route API payloads

[GergesFaiz]

Summary

Reworks the UI to follow the Route E-Commerce Figma and fixes the data layer so it parses the real Route API responses.

UI

• The four tabs (Home, Categories, Wishlist, Account) are a StatefulShellRoute with one blue bottom bar; the active tab sits in a white circle. Product lists, details, cart and orders open full-screen above it.
• Shared header: Route logo, rounded search field and cart icon with an item-count badge.
• Home: promo slider, 2-row categories, brands and best sellers.
• Categories: side rail, category banner and a subcategory grid that opens filtered products.
• Product card and details: discounted price with struck-through original (they were swapped before), heart bound to the wishlist, sold/rating/quantity row, total and add to cart.
• Cart, wishlist, account and orders restyled. Account shows the name, e-mail, editable fields, a password dialog and saved addresses.
• Fixed stray shell quotes that rendered literally in the reviews section.

API

• Models accept _id-only documents, populated-or-id references (POST /cart, POST /orders), wishlist payloads without message, the clear-cart {message} answer and the bare orders array with a numeric order number.
• Cart update and remove use the product id. A missing cart (404) is treated as empty.
• Readable validation errors. Unexpected payloads become failures instead of uncaught exceptions.
• The new token is saved after changing the password. The profile is cached locally.

State

• CartCubit and WishlistCubit are app-wide singletons, so badges and hearts stay in sync. Adding with a quantity uses POST and then PUT.

Deliberate differences from the design (API limits)

• Subcategories have no images, so tiles reuse the parent image.
• Size and colour pickers are visual only (no variants in the API).
• Cart rows show the brand.

Testing

• dart analyze --fatal-infos: no issues.
• flutter test: 88 tests pass. Model tests use realistic API payloads, plus new cart/wishlist cubit, formatter, error and widget tests.
• The Figma, Postman docs and live API were not reachable from the build environment, so the design match and live API behaviour still need a manual check on a device.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QaZdQvfKyrAcyAA9VbJfCT

---

Generated by Claude Code