Screens

Admin screens

Every route of the back office as it is built, with the states it really has.

Built Real screenshots of the running app at 1440 and 390 px, light and dark, on the demo data. Click one to see the whole page at its real size.

Signing in

Staff only: no registration. The brand panel is a framed card here, with a line on where each role lands and the backend’s status under the form.

Staff sign in

Built

/login

Who Administrator

What Remember me is off by default here; on the web it is on.

RealThe running app on the demo data.

Staff sign in: Wrong password, desktop, light

Staff sign in: Wrong password, desktop, dark

Staff sign in: Wrong password, phone, light

Staff sign in: Wrong password, phone, dark

Who Administrator

What Remember me is off by default here; on the web it is on.

RealThe running app on the demo data.

No administrator role

Built

any page, signed in without the role

No administrator role: An inspection operator, desktop, light

No administrator role: An inspection operator, desktop, dark

No administrator role: An inspection operator, phone, light

No administrator role: An inspection operator, phone, dark

Who A buyer or an inspection operator

What Stands in place of the app for an account without the administrator role. The hub workspace for inspection operators is planned.

RealThe running app on the demo data.

Forgotten password

Built

/forgot-password

Forgotten password: Blank, desktop, light

Forgotten password: Blank, desktop, dark

Who Staff

What The same answer whether or not the address has an account.

RealThe running app on the demo data.

Forgotten password: Link sent, desktop, light

Forgotten password: Link sent, desktop, dark

Forgotten password: Link sent, phone, light

Forgotten password: Link sent, phone, dark

Who Staff

What The same answer whether or not the address has an account.

RealThe running app on the demo data.

New password

Built

/reset-password?token=…

New password: With a link, desktop, light

New password: With a link, desktop, dark

Who Holder of a reset link

What With the strength bar under the new password.

RealThe running app on the demo data.

New password: Link not valid, desktop, light

New password: Link not valid, desktop, dark

New password: Link not valid, phone, light

New password: Link not valid, phone, dark

Who Holder of a reset link

What With the strength bar under the new password.

RealThe running app on the demo data.

Confirm your email

Built

/verify-email?token=…

Confirm your email: With a link, desktop, light

Confirm your email: With a link, desktop, dark

Confirm your email: With a link, phone, light

Confirm your email: With a link, phone, dark

Who Holder of an activation link

What A public page outside the shell.

RealThe running app on the demo data.

The back office

A fixed sidebar from 1024 px, a drawer below it, a top bar with the address, the theme and Sign out. Compact tables with a filter bar. Orders are demo orders, and a verified listing is reviewed by the team: no payment, no independent authentication.

Dashboard

Built

/dashboard

Who Administrator

What Six figures and four charts with sample data, each labelled so, and two shortcuts. No figure is real yet.

RealThe running app on the demo data.

Who Administrator

What Six figures and four charts with sample data, each labelled so, and two shortcuts. No figure is real yet.

RealThe running app on the demo data.

Users

Built

/users

Who Administrator

What Roles, status and whether the email is confirmed. A row opens the account’s details; suspending and marking the email go through a dialog.

RealThe running app on the demo data.

Who Administrator

What Roles, status and whether the email is confirmed. A row opens the account’s details; suspending and marking the email go through a dialog.

RealThe running app on the demo data.

Users: Suspend this account?, desktop, light

Users: Suspend this account?, desktop, dark

Who Administrator

What Roles, status and whether the email is confirmed. A row opens the account’s details; suspending and marking the email go through a dialog.

RealThe running app on the demo data.

Users: Mark this email as verified?, desktop, light

Users: Mark this email as verified?, desktop, dark

Who Administrator

What Roles, status and whether the email is confirmed. A row opens the account’s details; suspending and marking the email go through a dialog.

RealThe running app on the demo data.

Who Administrator

What Roles, status and whether the email is confirmed. A row opens the account’s details; suspending and marking the email go through a dialog.

API mockedThe list answers with no accounts: the data set has them.

Listings

Built

/listings

Who Administrator

What Every listing: search, status chips, view and withdraw.

RealThe running app on the demo data.

Listings: Nothing matches, desktop, light

Listings: Nothing matches, desktop, dark

Who Administrator

What Every listing: search, status chips, view and withdraw.

RealThe running app on the demo data.

Listings: Withdraw this listing?, desktop, light

Listings: Withdraw this listing?, desktop, dark

Who Administrator

What Every listing: search, status chips, view and withdraw.

RealThe running app on the demo data.

Verification queue

Built

/verification

Verification queue: Filled, phone, light

Who Administrator

What The team’s review of the pilot: it is not an independent authentication, and the catalogue says “Verified by our team (demo)”.

RealThe running app on the demo data.

Verification queue: Verify this listing?, desktop, light

Verification queue: Verify this listing?, desktop, dark

Who Administrator

What The team’s review of the pilot: it is not an independent authentication, and the catalogue says “Verified by our team (demo)”.

RealThe running app on the demo data.

Verification queue: Reject, with a reason, desktop, light

Verification queue: Reject, with a reason, desktop, dark

Who Administrator

What The team’s review of the pilot: it is not an independent authentication, and the catalogue says “Verified by our team (demo)”.

RealThe running app on the demo data.

Verification queue: Empty, desktop, light

Verification queue: Empty, desktop, dark

Who Administrator

What The team’s review of the pilot: it is not an independent authentication, and the catalogue says “Verified by our team (demo)”.

API mockedThe queue answers with no listings: the data set has them waiting.

Verification queue: Error, desktop, light

Verification queue: Error, desktop, dark

Who Administrator

What The team’s review of the pilot: it is not an independent authentication, and the catalogue says “Verified by our team (demo)”.

API mockedThe queue answers 500.

Orders

Built

/orders

Who Administrator

What Demo orders of the pilot, unpaid.

RealThe running app on the demo data.

Who Administrator

What Demo orders of the pilot, unpaid.

API mockedThe list answers with no orders: the data set has them.

Order

Built

/orders/{orderId}

Who Administrator

What Who bought what from whom. Cancelling asks for a reason and puts the item back on sale.

RealThe running app on the demo data.

Order: Cancel this order?, desktop, light

Order: Cancel this order?, desktop, dark

Who Administrator

What Who bought what from whom. Cancelling asks for a reason and puts the item back on sale.

RealThe running app on the demo data.

Who Administrator

What Who bought what from whom. Cancelling asks for a reason and puts the item back on sale.

RealThe running app on the demo data.

Profile

Built

/profile (and /account, which leads here)

Who Administrator

What Name, theme, password with strength, signed-in devices that can be signed out.

RealThe running app on the demo data.

When something is off

The same vitrine as the web’s.

Not found

Built

any unknown address

Who Anyone

What The vitrine with its brass 404 plaque, outside the shell.

RealThe running app on the demo data.

Demo data: products and photos

Brands and products appear as demo data only. The photos are openly licensed, resized, cropped and marked DEMO. Credits:

Auge=mit, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Folding_clasp_of_an_Omega_Speedmaster_Professional_wristwatch.jpg
Copyleft, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Hacking_bandouliere_sac_Louis_Vuitton_noe_Toile_monogram_avant_apres.jpg
Cvmontuy, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Engagement_Ring_Mexico_2023.jpg
Cvmontuy, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Engagement_Ring_Mexico_2023_p2.jpg
Dnalor 01 (background removed by a Commons editor), CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Seiko_automatic_chronograph_6139_%22Pogue-Seiko%22.jpg
Dnalor 01, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Dial_detail_of_a_Seiko_Speed-Timer_Chronograph_Automatic_6138-0040_(%22Bullhead%22),_1976.jpg
Dnalor 01, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Seiko_Speed-Timer_Chronograph_Automatic_6138-0040_(%22Bullhead%22),_1976.jpg
Dnalor 01, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:The_name-providing_push-buttons_on_top_of_a_%22Bullhead%22_Seiko_Speed-Timer_Chronograph_Automatic_6138-0040_Bullhead,_1976.jpg
Dr.K., CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Back_of_Rolex_Submariner_Professional.JPG
Dr.K., CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Edge_view_of_Rolex_Submariner_Professional.JPG
Dr.K., CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Rolex_Submariner_Professional.JPG
FASTILY, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Tiffany_%26_Co._Sterling_Silver_Necklace_1_2019-01-27.jpg
FASTILY, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Tiffany_%26_Co._Sterling_Silver_Necklace_2_2019-01-27.jpg
FASTILY, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Tiffany_%26_Co._Sterling_Silver_Necklace_3_2019-01-27.jpg
Ian Rosenberg Jeweller, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Ian_Rosenberg_Jeweller_%E2%80%93_Freshwater_pearl_necklace.JPG
Ian Rosenberg Jeweller, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Ian_Rosenberg_Jeweller_%E2%80%93_Gold_Art_Deco_earrings_with_diamonds.JPG
Ian Rosenberg Jeweller, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Ian_Rosenberg_Jeweller_%E2%80%93_Stunning_double_diamond_and_platinum_necklace.JPG
Ian Rosenberg Jeweller, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Ian_Rosenberg_Jeweller_-_Classic_diamond_drop_earrings_set_in_white_gold.JPG
Ian Rosenberg Jeweller, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Ian_Rosenberg_Jeweller_-_Pav%C3%A9_diamond_and_platinum_ring.JPG
Mliz2000, CC BY 4.0: commons.wikimedia.org/wiki/File:Bespoke-custom-made-Australian-sapphire-diamond-engagement-ring-Sydney-jeweller-Lizunova-Fine-Jewels.jpg
Mliz2000, CC BY 4.0: commons.wikimedia.org/wiki/File:Bespoke-custom-made-Vera-teal-sapphire-kite-diamond-engagement-ring-Sydney-jeweller-Lizunova-Fine-Jewels-NSW-Australia.jpg
Mliz2000, CC BY 4.0: commons.wikimedia.org/wiki/File:Kai-Montana-sapphire-diamond-engagement-ring-Sydney-jeweller-Lizunova-Fine-Jewels-NSW-Australia.jpg
OpaleHorse, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Tudor_Pelagos_for_Carolina_Watch_Club_Limited_Edition.jpg
OpaleHorse, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Tudor_Pelagos_for_Carolina_Watch_Club_on_Wrist.jpg
Peter Wilson (background removed by a Commons editor), CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Rolex_GMT_Master_II_-_16710_(without_background).jpg
Peter Wilson, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Rolex_GMT_Master_II_-_16710_in_it_sitting_on_top_of_the_box.jpg
Pittigrilli, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Detailed_view_on_chronograph_pushers_and_crown_of_Omega_Speedmaster_Schumacher_Edition_(cropped).jpg
Pittigrilli, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Omega_Speedmaster_Schumacher_Edition10_36_22_158000.jpeg
Pittigrilli, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Omega_Speedmaster_Schumacher_Edition_.jpeg
Queen Bee of Beverly Hills, CC BY 2.0: commons.wikimedia.org/wiki/File:Dior-saddle-bag-blue-logo-1.jpg
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/5791624770
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/6243883719
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/6243884427
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/6244398036
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/6244401788
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/8234580993
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/8234581017
Queen Bee of Beverly Hills, CC BY 2.0: www.flickr.com/photos/62997622@N03/8234581135
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Breguet_MG_2573.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Breitling_MG_2677.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Breitling_MG_2683.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Detailed_view_of_Breitling_MG_2683_(cropped).jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Detailed_view_on_part_of_Breitling_MG_2677_(cropped).jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Omega-Seamaster-p1020458.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Omega-Seamaster-p1020460.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Omega-Seamaster-p1020461.jpg
Rama, CC BY-SA 2.0 fr: commons.wikimedia.org/wiki/File:Patek-Philippe_MG_2584.jpg
STSPP, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Grand_Seiko.JPG
STSPP, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Grand_Seiko_Caliber_9S64_Hand-wound.jpg
STSPP, CC BY-SA 4.0: commons.wikimedia.org/wiki/File:Grand_Seiko_SBGW231_sideview.JPG
Sailko, CC BY 3.0: commons.wikimedia.org/wiki/File:Gucci,_bamboo_bag,_1960-65_ca._(firenze,_archivio_storico_gucci).jpg
Tinton5, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Black_coach_purse.JPG
Tinton5, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Black_coach_side.JPG
Tinton5, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Brown_coach_purse.JPG
Tinton5, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Brown_coach_purse_2.JPG
Tinton5, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Brown_coach_side.JPG
Torsten Bolten, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Breitling-Navitimer.jpg
Torsten Bolten, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Breitling_Navitimer_chronograph_watch.jpg
Torsten Bolten, CC BY-SA 3.0: commons.wikimedia.org/wiki/File:Breitling_Navitimer_slide_rule.jpg
Torsten Bolten, Public domain: commons.wikimedia.org/wiki/File:OMEGA-Speedmaster-Professional-Front.jpg
W.carter, CC BY 4.0: commons.wikimedia.org/wiki/File:Gold_ring_with_different_gemstones_set_in_a_rainbow_and_topped_with_diamonds_1.jpg
W.carter, CC BY 4.0: commons.wikimedia.org/wiki/File:Gold_ring_with_different_gemstones_set_in_a_rainbow_and_topped_with_diamonds_3.jpg
W.carter, CC BY 4.0: commons.wikimedia.org/wiki/File:Gold_ring_with_different_gemstones_set_in_a_rainbow_and_topped_with_diamonds_4.jpg
Walters Art Museum, Public domain: commons.wikimedia.org/wiki/File:Tiffany_and_Company_-_Nautical_Ring_-_Walters_571123.jpg
Walters Art Museum, Public domain: commons.wikimedia.org/wiki/File:Tiffany_and_Company_-_Nautical_Ring_-_Walters_571123_-_Three_Quarter.jpg
Walters Art Museum, Public domain: commons.wikimedia.org/wiki/File:Tiffany_and_Company_-_Pendant_Necklace_-_Walters_572168.jpg
Walters Art Museum, Public domain: commons.wikimedia.org/wiki/File:Tiffany_and_Company_-_Pendant_Necklace_-_Walters_572168_-_Detail.jpg
Wen-Cheng Liu, CC BY-SA 2.0: commons.wikimedia.org/wiki/File:Chanel_2.55.jpg
Wen-Cheng Liu, CC BY-SA 2.0: commons.wikimedia.org/wiki/File:Hermes_Ostrich_Birkin_Bag.jpg
ajay_suresh, CC BY 2.0: commons.wikimedia.org/wiki/File:Rolex_Datejust_126234.jpg
ajay_suresh, CC BY 2.0: commons.wikimedia.org/wiki/File:Rolex_Datejust_36_-_At_an_Angle_(50826143003).jpg
ajay_suresh, CC BY 2.0: commons.wikimedia.org/wiki/File:Rolex_Datejust_36_-_Black_Sunburst_Dial_(50826887656).jpg
ajay_suresh, CC BY 2.0: commons.wikimedia.org/wiki/File:Rolex_Datejust_36_-_Ready_in_the_Box_(50826141328).jpg