TL;DR

The Jusmila admin is a separate SPA on Vite + React 18, accessible only to warehouse staff and the manager. It manages the catalog of 10,000+ parts, the order queue, supplier imports, delivery zones on a map, and built-in session replay for triaging UX issues.

Admin overview

The admin is the second half of the system. On the storefront the buyer sees the catalog and places an order. In the admin the warehouse staffer handles orders and keeps the catalog up to date. Between them — a shared NestJS API.

Catalog

The main admin screen is a product list with filters: stock status, category, supplier. You can create a new card, edit an existing one (name, description, prices, photos, fitment), bulk-update stock counts.

Each part has a fitment table (compatibility): which motorcycle models fit, from which year. This table powers the "by model" filter on the storefront. Without it the client can't tell whether the part fits their motorcycle.

Categories are a tree: motorcycles → consumables → brake systems → pads. When you add a new product you pick the leaf category, and the storefront automatically places it in the right listing.

Orders

The order queue is the main operational screen. The staffer sees every new order in real time (Socket.IO). Each order shows line items with SKUs and quantities, delivery address, payment method, and status.

Order lifecycle: new → confirmed → picking → packed → shipped → delivered. On every transition the client gets a notification.

If the warehouse is short on some items (stock mismatch), the staffer moves the order to partial, specifies what's missing, and the client gets an email with options — wait, replace, or cancel.

Imports

A dedicated section for import scripts. Right now there are pipelines for mototex and anjese — suppliers with public-web catalogs. The import is triggered from the admin by a button; the result is a real-time log over Socket.IO: which SKUs were updated, which were added, which were skipped due to conflicts.

Under the hood — chrome-devtools MCP: a real browser opens, product cards, SKUs, and prices are parsed, then queued for update through the API.

Maps and zones

Leaflet is integrated — the operator can see delivery zones as polygons on a map of Lithuania. Each zone has its rules: minimum order amount, delivery time, distance surcharge. The manager can redraw zone borders without touching the code.

At checkout the client enters an address, it's geocoded to coordinates, and the system checks which zone it lands in. None — "delivery doesn't cover your area".

Session replay

The most unusual feature in the admin is the built-in rrweb-player. When a client reports a bug ("can't add to cart", "payment failed"), the operator opens that client's session, scrubs through the recording, and sees the exact click sequence and DOM state.

rrweb writes events on the client (masking passwords and payment data), sends them to the backend, which stores them in Postgres. In the admin the player shows the session as a mini-video: you can scrub, pause, filter by event type.

This is critical for UX work: instead of "it doesn't work for me" the operator sees a concrete behaviour pattern, and the engineer gets a reproducible report.

Analytics

Recharts draws basic charts: sales by day, top categories, conversion by delivery zone. This isn't BI-grade — it's an operational summary. The manager opens the admin, sees the weekly chart, decides "we need more drivers in this zone" or "expand assortment in this category".

Export and reports

jsPDF generates invoices, delivery notes, and reports right in the browser. The warehouse staffer prints a delivery note while picking the order; the manager exports the monthly sales report to PDF.

Access and roles

Auth — JWT via NestJS Passport. Two primary roles: manager (everything, including pricing) and warehouse (orders, stock, and picking only). If a dispatcher or marketer comes tomorrow, adding a new role is a permissions table edit, not a refactor.