# Atelier admin · original structure

Build target: the existing admin interface at `C:/Projects/Bots/Abnabot/miniapp/web`, adapted into a separate local version. That project is a read-only reference; no production application or service is modified or called.

Primary layout references: `admin/core/nav.js`, `admin/sections/dashboard.js`, the Payments/Catalog/Infrastructure section tabs, and `admin.css`. Preserve the centered sticky header, nine direct navigation sections, two-column overview counters, today's performance breakdown, compact section cards and nested editors. This is the user's explicit layout target and authorization for direct implementation.

Visual authority: `02-atelier/style.css` and its selected subscription cards. Preserve charcoal `#101110`, flat `#1a1b19` surfaces, apricot `#ffb78c` primary actions, quiet olive-gray dividers, local Vazirmatn and 8px card corners. Good/warning/danger retain their distinct semantic roles. The light theme retains the same hierarchy.

Refero live research is unavailable. Its bundled typography and craft references supply compact work-tool typography, visible keyboard focus, readable labels, native dialogs and appropriate touch targets. Source layout owns composition; Atelier owns styling. No bitmap imagery is needed for this code-native operations interface.

| Decision | Reference | Implementation |
| --- | --- | --- |
| Nine-section navigation and internal tabs | Original admin nav and section modules | Preserve route structure and information hierarchy |
| Six overview counters before today's performance | Original dashboard | Keep original reading order and meaningful quantities |
| Charcoal/apricot and restrained borders | 02-atelier | Flat surfaces, line icons, strong primary actions |
| Readable sheet editors with focus containment | Original editors + craft accessibility | Native dialogs with Atelier surfaces and explicit confirmations |
| One backend for every version | User's shared-world requirement | Adapter delegates original path-shaped calls to `shared/admin-api.js`; no duplicated state or remote backend |
| Startup independent of Telegram availability | Verified startup fix | Optional async SDK, local bootstrap and retry state |

Validation completed at 360px, 390px and 1280px. The original composition remains recognizable in the counters, daily revenue, nine navigation destinations, section tabs and setup accordion. Native dialogs were checked visually and through wallet cancellation/confirmation and condition testing. See [QA.md](QA.md).

Refinements made during review: mobile revenue filters collapse to reveal the report; dashboard payers link to customer records; job progress refreshes while visible; destructive global switches and wallet decreases show consequences before submission. The adapter normalizes list envelopes without changing the shared backend.

## UI correction reference lock

The user's supplied screenshots identify switch knobs extending below their
tracks, a boxed tab strip with 14px of unused bottom padding, and inconsistent
control spacing. The target remains 02-atelier, using its flat surfaces,
compact controls and restrained separators. Refero's bundled craft reference
owns focus, hit targets and form alignment; its typography reference supports
quieter metadata and consistent density.

The correction uses one canonical set of switch dimensions, an unboxed
underline tab strip, aligned action rows, consistent form controls and a
scrolling dialog body between fixed header/actions. Validate actual geometry
in on/off and compact/full-size controls, not just page overflow.

The completed revision removes the competing legacy switch/tab geometry.
Full switches use a 44 × 26px track; compact switches use 34 × 22px. Both
keep the knob centered and provide a 44px touch area. Section tabs share
one accessible, horizontally scrolling underline component. Card actions,
wallet options and category toggles use consistent spacing; paired form
fields align even when a label wraps. Dialog bodies scroll independently
of the title and footer. Category deletion lives at the end of its form.

User financial summaries reserve a full row for each amount, preventing
digit wrapping on narrow screens. Progress animation starts at each ring's
actual circumference, and setup completion uses the success color. Review
evidence, viewport coverage and screenshots are recorded in `QA.md`.

## Workflow simplification

Reference lock: the user's activity/rules feedback and supplied condition-builder
screenshot define the problems; the existing Atelier II surfaces and typography
remain the visual authority. Refero's bundled form guidance supplies explicit
labels, meaningful input types and visible keyboard focus. This is a direct
refinement of the approved product, with no change to the shared data model.

| Problem | Decision |
| --- | --- |
| Notification jobs are below every bulk job | Two independently accessible activity lists, with sticky tabs and counts |
| Generic connections/sales icons | Dedicated network and repeat-purchase line icons in the existing icon system |
| Provider configuration is a long, separate crypto page | Provider settings open from their payment-method cards; NOWPayments settings are grouped disclosures |
| The logic builder exposes its data structure first | Outcome first, labeled conditions with units, a live sentence explaining the result, advanced grouping on demand |

Preserve the exact condition tree, all six operators, ALL/ANY groups, method
selection, priorities, activation, warnings and evaluation. Test round trips
and representative nested evaluations against the same shared API.