9:41
My Orders
No orders yet
Start shopping to see your orders here
Browse Products

Screen Annotations — CON-081 Order History (Empty)

Screen ID: CON-081
Flow: Profile → My Orders → Empty State
Previous: CON-100 Profile
Next: CON-082 Order History (Populated)
Header: White header with centered title "My Orders". No back button as this is accessed from the Profile tab in bottom navigation.
Tabs: Two-tab segmented control: "Active" and "Past". Active tab has bold text and a 2px bottom border in primary green (#043F2D). Inactive tab is muted. Both tabs share equal width.
Empty State: Centered layout with illustration placeholder (empty-orders.svg), heading "No orders yet", descriptive text, and a prominent lime (#C9F06B) "Browse Products" CTA button. The illustration is a shopping bag with dashed placeholder lines indicating emptiness.
CTA Button: The "Browse Products" button navigates to the Home screen (CON-030) to encourage the user to start shopping. Uses the accent lime colour with dark text for maximum contrast and visibility.
Bottom Nav: Profile tab is active (data-active-nav="profile") since orders are accessed from the Profile section.