Soueast
Motion MotorsSoueast

DELIVERY · JEDDAH, WESTERN REGION · 24 AUGUST 2026

Four Applications.
One Database.

The public showroom, the tool the floor uses, the event system and the dashboard everything reports into, built over one Supabase project, so that a car reserved on the website is gone from the salesperson's list in the same second.

Soueast S09 in Mountain Green
0PAGES
0TABLES
0DATABASE FUNCTIONS
0COMMITS

Section 01

The Handover

This document describes a system that is finished and running. Everything in it was checked against the repository or the live database on the day it was written, not recalled. Where a number could only come from production, it says so where it stands.

DELIVERY DOCUMENTMOTION MOTORS × SOUEAST

PREPARED BY

Ahmed Ali

Head of Digital Product and Growth
Emotion Group

PRESENTED TO

Motion Motors

Management, Western Region
Soueast, Jeddah

PERIOD

5 Jun → 24 Aug

80DAYS172COMMITSLiveSTATUS
The Motion Motors showroom, Jeddah

WHERE IT RUNS

One Showroom In Jeddah And Everything That Reaches It.

Not a product for sale to other dealerships. One dealership, which is what removes multi-tenancy, billing, plan tiers and most of what would otherwise have taken the year.

Section 03

The System

Three codebases, four hosts, one Postgres. The website is deployed a second time with a single environment variable set and that second deployment is the showroom tool, the floor and the shopfront cannot drift apart, because they are the same build.

one codebase, built twiceThe websitemotionmotors.me26 pagesThe showroom toolshowroom.motionmotors.me4 screensThe events systemmotion-motors.vercel.app16 pagesThe dashboardlive.motionmotors.me30 pagesreserve_unit()reserve_unit_for_customer()record_attribution()can('orders:refund')One PostgresSupabase · row-level security on every table451268593TABLESFUNCTIONSPOLICIESMIGRATIONSpg_cron8 jobs986 runs a day, unattendedWATIWhatsApp, codes, receiptsGemini 2.5 Flashlanguage only, never a priceSupabase Storage75 MB of turntable per colour,kept out of the deployA car reserved on the website is gone from the floor's listin the same second, because there is no second list.

Hover any box to isolate what it touches

Section 04

The Four Applications

01ANYBODY WHO ARRIVES

The Website

Arabic and English, both first-class. Not a brochure, a shop that sells a specific car, at the price the sheet says today, to somebody who signed in with a phone number and no password.

  • Five models, each with a 360° exterior spin in six colours at two resolutions, interior panoramas and specifications drawn from the price list rather than typed a second time.
  • A shop that sells actual cars: a specific VIN, nine add-ons, a deposit policy and an order reference the customer can track.
  • Compare and save against the browser, then adopted into the account the moment they sign in.
  • Test drives against real slots, the calendar knows what is already booked and the booking is tied to one car on the floor.
  • An assistant that answers from the dealer's own price sheet and hands over to a person the moment one is asked for.
26 screensNext 16 · next-intl · Supabase SSR · Gemini 2.5 Flash · WATI
motionmotors.me
Arabic, which is the default
Arabic, which is the default
02THE SALESPERSON, STANDING WITH A CUSTOMER

The Showroom Tool

The same codebase as the website, built a second time with one environment variable set and locked to four screens. Every other path on that host redirects here and it refuses search engines outright.

  • Registering a walk-in in the time it takes to ask: name, number, model, grade, colour and which car on the floor exactly.
  • Taking a deposit and holding that VIN, with the salesperson taken from the session rather than typed into a box.
  • A test-drive evaluation filled in with the customer while the car is still warm, tied to the unit they drove.
  • A showcase mode to hand across the desk: the 360° spin, full screen, no navigation.
4 screensThe website's build with NEXT_PUBLIC_SALES_ONLY=1 · one middleware · no second codebase
showroom.motionmotors.me
The screen the floor works from
The screen the floor works from
03MALL STANDS AND TEST-DRIVE DAYS

The Events System

Built first, before the rest of it existed, for a stand in a mall with a queue in front of it. Folded into the monorepo afterwards rather than left to drift.

  • Self-registration at the stand and a live queue the staff work through.
  • Campaign forms with financing questions and a leads list that says who has been rung and by whom.
  • The stock screen, every car, its status and the deposit that is holding it.
16 screensNext 16 · TanStack Query · ExcelJS exports · the same Postgres
motion-motors.vercel.app
The stand, self-registering
The stand, self-registering

11 of its 16 screens are behind a staff sign-in, this is as far as a stranger gets and the shot is honest about that.

04MANAGEMENT, BEHIND A LOGIN

The Dashboard

The largest of the four and the only one nobody outside the building can see. Twenty-five permissions across eight roles decide which of its thirty screens a given person gets.

  • Today, what needs somebody right now, on one screen: chats waiting, deposits about to expire, leads nobody has rung, open orders, errors.
  • Live chat: the queue grouped by whose problem it is, the whole customer history beside it, saved replies, tags, car cards sent into the conversation, transfer to a colleague and search across every conversation ever held.
  • Stock by VIN, with ageing measured four ways, including from the people who actually drove it.
  • Money: orders, deposits, reservations, financing applications and the price list itself, editable without a deploy.
  • Traffic: Google Analytics and Search Console, a world map, landing pages and what people searched to arrive.
30 screensNext 16 · GA4 Data API · Search Console · Recharts · Supabase Realtime
live.motionmotors.me
Today, the screen the dashboard opens on
Today, the screen the dashboard opens on

All 30 of its screens are behind a staff sign-in; this one was supplied for the handover, this is as far as a stranger gets and the shot is honest about that.

The site, Arabic, on a phone
The site, Arabic, on a phone
The shop
The shop
The stand's own form
The stand's own form
Park at Home, the camera page
Park at Home, the camera page

Section 05

Seventy-Two Frames

This is not a picture of the product. It is the product, the same turntable the showroom tablet plays, pulled from the same storage, at the same frame rate. Drag it.

LOADING THE TURNTABLE

Mountain Green · 72 frames held in this page · 0% · drag it

Stills, not a 3D model

The factory ships them per paint colour, they look exactly like the brochure and a phone on the floor can play them without a WebGL context.

Two resolutions

The small tier loads first so the car can be turned almost immediately; the large one replaces it in place, sharing a frame index so nothing jumps.

75 MB per colour

Which is why they are served from storage rather than committed. Adding a car is not a git commit measured in gigabytes.

Section 06

The Route Atlas

Seventy-two pages is a number that proves nothing on its own, thirty screens could be thirty variations of one. Here they are, grouped by the question each one answers.

71 routes · 42 of them exist in Arabic and English · 41 behind a sign-in

The Website

22

motionmotors.me

THE SITE

/
/about
/news
/careers
/showrooms
/aftersales
/privacy
/terms

CARS

/models
/models/[slug]ID
/prices
/test-drive

THE SHOP

/store
/store/[vin]ID
/store/[vin]/reserveID
/store/compare
/store/saved
/store/orders
/store/order/[reference]ID
/store/track

CAMERA

/park
/stage

The Showroom Tool

4

showroom.motionmotors.me

THE FLOOR

/salesLOCK
/sales/reserveLOCK
/sales/evaluationLOCK
/sales/showcaseLOCK

The Events System

16

motion-motors.vercel.app

THE STAND

/
/lead
/queue
/thanks
/register/success/[publicId]ID
/login

BACK OFFICE

/dashboardLOCK
/dashboard/queueLOCK
/dashboard/stockLOCK
/dashboard/showroomLOCK
/dashboard/reservationsLOCK
/dashboard/campaignLOCK
/dashboard/campaign/[id]IDLOCK
/dashboard/leads/[id]IDLOCK
/dashboard/registrations/[id]IDLOCK
/dashboard/adminLOCK

11 of its 16 screens are behind a staff sign-in.

The Dashboard

29

live.motionmotors.me

NOW

/todayLOCK
/alertsLOCK

CONVERSATION

/chatLOCK
/chat/[id]IDLOCK
/responseLOCK
/customersLOCK
/customers/[phone]IDLOCK

STOCK

/stockLOCK
/ageingLOCK
/pricingLOCK
/addonsLOCK

MONEY

/ordersLOCK
/orders/[reference]IDLOCK
/depositsLOCK
/reservationsLOCK
/financeLOCK

DEMAND

/leadsLOCK
/demandLOCK
/campaignsLOCK
/showroomLOCK
/appointmentsLOCK

TRAFFIC

/trafficLOCK
/sourcesLOCK
/reportsLOCK

SYSTEM

/staffLOCK
/auditLOCK
/errorsLOCK
/login
/no-access

All 30 of its screens are behind a staff sign-in; this one was supplied for the handover.

Section 07

When Somebody Buys A Car

The reason the four applications share one database rather than talking to each other.

01

They Arrive And Are Remembered

The campaign, the landing page and the device are recorded against the browser before anything is asked of them. No form, no name, just the fact of the arrival, waiting to be joined to a person later.

record_attribution()visitor_attribution, written from the browser on first paint

utm_source=snapchat/ar/modelsvisitor_attributionbefore a single question is asked
02

They Ask And Get A Real Answer

The assistant answers from the price sheet. If they want a person, the conversation rings in the dashboard with everything already known about them sitting beside it.

chat_open()Gemini 2.5 Flash, grounded on the live price list and forbidden from quoting a figure the site does not also quote

كام قسط الـ S09؟1,739 SAR / monthprice sheet, row 6the model supplies the sentencethe repository supplies the number
03

A Specific Car Is Put In Front Of Them

An agent sends a card into the conversation: that VIN, that colour, today's price and a link that reserves that exact car. Not a model. A car.

chat_send_car()A message row whose payload is a vehicle_units id

Soueast S09LB37822Z1NW014392Mountain Green · 106,900 SARReserve this carone VIN, not one model
04

They Pay A Deposit

From the website, or across the desk in the showroom. The same function, two doors, one set of rules. The car leaves the floor in the same second, there is no window in which two people can both be sold it.

reserve_unit()The storefront and the showroom tool both end at one function. The floor's key opens the same lock.

The showroomacross the deskThe websiteat midnightreserve_unit()one lock and the floor holds the same keystock 6 → 5, in that second
05

The Rest Is Paperwork With A Timer

Balance, purchase order, handover. Each stage moves the car and the money together, or neither. A hold nobody completes expires on its own and the car goes back on the floor without anybody remembering to do it.

expire_stale_store_orders()advance_store_order() and expire-store-holds sweeping every five minutes

6d 22:14:07the hold, counting downDepositBalancePurchase orderHandovernobody has to remember to release itexpire-store-holds · every 5 minutes
06

And The Numbers Were Never Entered Twice

The sale is already in stock, in the customer record, in the salesperson's figures and in Sunday's digest, because it was one row all along. Nobody reconciles anything.

One write, six readers. This is the whole argument for one database.

one rowStockThe customerThe salespersonThe digestnobody reconciles anything

Section 08

One Database

Forty-five tables, every one with row-level security enabled. Who may read what is decided in the database, not in the application that asks, so a stale phone in a pocket cannot break a rule that a screen was enforcing.

Stock

5

The cars themselves and what they are worth today.

carsvehicle_unitsprice_liststore_addonsdeposit_policies

Money

6

Every path a riyal takes and the timer on each one.

store_ordersstore_paymentsstore_eventsreservationsreservation_paymentsfinance_applications

Demand

11

Everybody who showed interest, however they arrived.

leadscampaign_leadsregistrationsregistration_status_historyeventsshowroom_visitscustomer_profilescustomer_interestvisitor_attributiontest_drive_bookingstest_drive_evaluations

Conversation

10

The chat console, which is most of the surface area added last.

chat_conversationschat_messageschat_presencechat_tagschat_conversation_tagschat_cannedchat_triggerschat_trigger_fireschat_callscall_signals

Access

7

Who may do what and how they proved who they are.

staff_profilesstaff_rolesstaff_invitesrolespermissionsrole_permissionsphone_otps

System

6

The parts that watch the other parts.

audit_logapp_errorsapp_settingsalerts_sentalert_recipientsweb_vitals

Section 09

Who May Do What

25 permissions across 8 roles. Flat, not hierarchical, a person holds several roles and their permissions are the union, because “is a manager above a finance officer” has no answer and “who may approve finance” has exactly one.

STOCK
ORDERS
SHOWROOM
FINANCE
DEMAND
OPS
ADMIN
Administrator25 of 25
Showroom manager17 of 25
Sales9 of 25
Stock keeper5 of 25
Finance7 of 25
Marketing5 of 25
Customer support6 of 25
Read only6 of 25

Hover a row to read what that person can do, or a square for the exact permission. The squares with a dark ring are the ten marked sensitive, they move money or change who can see what and the audit log never omits them.

Motion MotorsSoueast

BUILT WITH

Next.js 16Three applications, App Router
React 19Server components by default
TypeScriptEvery file, no JavaScript left
Tailwind 4CSS-first, no config file
SupabaseOne project under all four
PostgreSQL45 tables, 85 policies, pg_cron
Gemini 2.5 FlashLanguage only, never a price
WATISign-in codes and receipts
GA4 Data APIRead server-side into the dashboard
Search ConsoleWhat people searched to arrive
VercelFour deployments, one repository
SoueastThe brand all four of them wear

© 2026 Motion Motors · Soueast Western Region