Dashboard

React application with light, dark, and system themes (follows OS settings without reload), fixed sidebar, live data refresh, and a two-column login page (layout like PyOrchestrator, custom background).

Navigation

Sections marked admin are available only to Administrator (manage_users or view_logs in JWT).
Profile — link in the header (/profile). Setup wizard — /setup (on first login or ?restart=1).

Resources (sidebar)

More about embedded platforms: Embedded services.

Interface language (v1.1.13+)

Notifications (v1.1.14)

The Notifications page and Overview widget display localized message templates by event type (mqtt_credit, user_login, wash_created, etc.), not the raw text stored when the record was created. Parameters (amount, login, entity name) are parsed from legacy messages. Severity labels and CSV export follow the active UI language.

Live mode

Operational data refreshes automatically (usePolling). Header shows a live-mode indicator.

On the Current status page, mode time ticks in real time (LiveModeTimer).

Tables (DataTable)

All main CRM tables use the shared DataTable component with unified pagination.

Features

• search across text fields;
• sort by clicking column headers;
• filters (dropdowns);
• visible column selection (table settings icon);
• pagination (see below);
• bulk actions (CSV export, delete — where available).

Pagination (v1.1.5+)

In the footer of each table:

Footer label: N rows · page X of Y · loaded M — when more rows exist in the current dataset.

Changing page size, search, or filters resets to page 1.

Large logs (two-level loading)

Pages with very large data volumes use two levels of loading:

Recent notifications widget on Overview — compact preview (10 rows by default, value 10 available in "Per page" list).

Sections in detail

Overview (/)

KPI cards before collection: cash / cashless / total revenue / discount total / active errors.

Finance and usage totals — sum of the latest record per post (not all historical rows).

Charts (Recharts): post status, pie charts for "Usage" (clients / service / VIP) and payment shares (cash / cashless / discounts), revenue by date, workload by date (v1.1.15). Recent notifications table.

Car washes (/washes)

Site reference: name, description, address, creation date, cloud. "Post count" column.

Posts (/posts)

Posts linked to a car wash: online/offline status, number, name, serial number, MQTT login, site. Cascade delete of related data.

Actions column — ⚙ icon (device settings) → post page. On create/edit — MQTT login and password for the post panel.

Online — if lastMessageAt is not older than 30 seconds (same as Overview).

Post card (/posts/:id)

Anchor #device-settings scrolls to the device settings block.

Current status (/states)

All posts across all sites. Status column (online/offline), status filter.

Interactive chart full width (Recharts): metric switching (mode time / balance / free pause), tooltip with details, brush for many posts, live mode time refresh.

Table: address, post number, balance, pause, discount, live mode timer, mode name, last message date.

Cards (/cards)

Application log: each NFC event (state/card from post) creates a new row. Active session updates from state/process data (balance, discount).

Discount type — number 1–5 from reference. Statuses: success, rejected. Collection (cardType: collection on device) — CRM notification, no row in the cards section.

Analytics (/usage, /finance, /archive)

• Usage — before/after collection, categories regular/service/unlimited.
• Finances — cash, cashless, discount, revenue.
• Archiving — policies by data group, operation log.

System and automation

Navigation stability (v1.1.12)

• retry loading JS chunks on network failure (lazyPage);
• RouteErrorBoundary instead of gray screen;
• polling timeout 60 s; on Overview — error message instead of endless Loading.

Header toggles (v1.1.14)

• language switcher — single icon with the current locale flag (all screen sizes);
• Live/Static — single icon (radio / pause) on all screen sizes.

Login page (/login)

Two-column layout (like PyOrchestrator): branding with SVG background (waves/SCADA) on the left, form on the right. Theme switcher in the top-right corner. Auto JWT refresh; on session expiry — redirect to /login.

User roles

User management: Dashboard → Users / Groups & permissions or Dynamic API Panel → Users / Groups.

Dashboard proxy (nginx)

Demo data

./scripts/generate-demo-data.sh
./scripts/generate-demo-cards.sh

Build

cd dashboard && npm install && npm run dev    # :5173
npm run build                                  # dist/ → Docker

Technologies

React 18 · TypeScript · Vite · Tailwind · Lucide · Recharts · usePolling / LiveModeContext