# Outer-customer tender page Task: A-005 — https://github.com/logisticsdesign/logistics-2/issues/32 · member `anastasia-ermoshina` · agent: Claude Code. Applications tab: A-010 — https://github.com/logisticsdesign/logistics-2/issues/54 · member `anastasia-ermoshina` · agent: Claude Code. ## Readiness | Dimension | Status and evidence | | --- | --- | | Specification | This document. One state only: logist, auction, «Сбор заявок», seven applications (A-010). | | Figma | File `jwmCEMZZjn9cieKYqxI6FL` (read-only): «Страница тендера/Описание/нет заявок» `17265:117034`; sections `20369:543646`, `17790:98586`, `17792:98735`, `20312:188675`, `17792:98842`, `17792:98844`, `17792:98845`, `17792:98846`, `17792:98847`; right column `17265:117070`; «Описание/Есть заявки» `19758:39237` (tab counter and «Всего: 7»); «Заявки на участие / есть заявки» `20295:62604`. | | Local prototype | Implemented at `/tenders/outer-customer/tender` with static fixtures: «Описание» and «Заявки на участие». [S4] [S5] [S6] | | Verification | Focused unit tests pass; browser check at 1440 px (layout of every section, «Показать ещё 4» / «Свернуть», tabs and stub, back button, entry from the list drawer, pin Tooltip on hover); A-010: applications table, counter 7 on the tab and in the panel, date sort, carrier link stays on the page. No `verify:local` run yet. | ## Purpose Desktop prototype of one outer-customer tender as the logist sees it while carriers are applying: an auction at the «Сбор заявок» stage with no applications yet. ## Source and Route - Route `/tenders/outer-customer/tender`. [S5] The Sidebar keeps «Тендеры → Внешние заказчики» active and opens collapsed, as on every `/tenders/*` route. - Title, badges, «Отменить лот» and the tabs stay in place; everything below the tabs (stage strip, sections, right column, tab stubs) scrolls in its own area. This applies to every tender page. - Entry: on the logist list, lot №1235 «Аукцион · 7 ТС · Сбор заявок на участие» (Figma `18897:14220`) — a click anywhere on the card except its links and buttons (pointer cursor), or «Ставок: 7» → drawer «Ставки по ТС» → «К тендеру». Only a logist auction at «Сбор заявок» leads here; other cards and their «К тендеру» still do nothing. The card click is mouse-only; keyboard users reach the page through the drawer button. ## Primary Scenario 1. Header (`wbl-header-widget`): back «‹» (accessible name «К списку тендеров») returns to `/tenders/outer-customer`; h1 «Наименование тендера»; badges «Внешний заказчик» (`clear`) and «Сбор заявок на участие» (`warning`); «Отменить лот» (`secondary-danger`, `circle-close`) on the right. [S2] 2. Tabs «Описание · Маршрут · Заявки на участие 7 · Условия тендера · Документы заказчика»; «Описание» is selected. 3. Stage strip under the tabs, bottom border: «Сбор заявок» (current — accent dot and title, period, orange countdown «1д 23ч 59мин» with `circle-time`), «Проверка участников», «Торги» (grey, with periods) and «Итоги» (no period). 4. Left column (sections 20px apart), right column 320px (panels 16px apart): - «Основные данные»: lot number and date, tender type, extension deadline, obligations period, responsible employee (3 columns). - «Требования к ТС • 7 ТС»: per vehicle a grey `wbl-badge` S «ТС N • 2т • кузов» and tonnage, body, loading type, inner height, capacity; three vehicles show, «Показать ещё 4» (secondary S, full width) reveals the rest and turns into «Свернуть». Then «Дополнительно»: eight features with icons in two columns and a grey comment. - «Маршрут: 7 точек»: points as `wbl-tag` M with grey arrows between them; «Направление» with two directions and a bookmark (`wbl-button-flat` XS) each. Hover or focus on a bookmark shows the Tooltip «Сохранить направление»; a click fills the icon (`bookmark-filled`) and shows the success `wbl-toast` «Направление сохранено» at the bottom left, with a close button. A saved bookmark has no Tooltip and a second click does nothing (un-saving is not designed). Then a divider; distance/trips and norm time/speed; lilac «Комментарий к маршруту»; a 300px `wbl-map` `mini` with numbered pins 1–7 and a line through them, zoom control only. Hovering or focusing a pin shows a Tooltip above it with the point type and address — «Погрузка: …» or «Разгрузка: …». - «Коммерческие условия»: «Общие» — currency/VAT and payment; then per vehicle starting bid (medium weight), trip/day cost and minimum step, with the same «Показать ещё 4». - «Квалификационные критерии перевозчика»: three groups under grey badges, criteria in two columns; «Документ: …» under a criterion when required. - «Требования к водителю/экипажу» and «Услуги перевозчика»: `wbl-tag` M `selected` lists. - «Требования к грузу»: type, hazard class, forbidden neighbours; «Нормативные показатели»; lilac «Комментарий к грузу». - «Формат и условия перевозки»: format and type; «Условия» in one column. - Right: «Заявки на участие» panel with an accent border and «Всего: 7» (with no applications it would read «Заявок пока нет»); «Заказчик» with name, INN, e-mail and required documents as `wbl-tag` M `selected` with a download action. [S3] ## Alternate Scenarios - **Applications tab** (Figma `20295:62604`). Right under the tabs, full width, a `wbl-table` without the filter row or row selection: «Перевозчик» (secondary link with a dotted underline and «ИНН: …» below; the rest of the width), «Рейтинг» 160px (`wbl-badge` S: `success`, `warning` or `error`), «Контакт для связи» 220px (phone, then a `copy` icon 4px after it — `rightIconPlacement: 'inline'`; contact name below). Descriptions («ИНН: …», contact name) are primary-gray, as in every table cell, «Статус заявки» 200px (`clear` badge «Заявка подана») and «Дата подачи заявки» 260px, sortable, ascending by default. The table fills the height under the tabs: pagination («Строк на странице 25», «1-7 из 7») stays at the bottom of the widget, 8px from its edge, whatever the number of rows; when rows do not fit, they scroll inside the table. The number of rows, the tab counter and «Всего: N» come from one list, so they always match. [S6] - **Other tabs.** «Маршрут», «Условия тендера» and «Документы заказчика» show `wbl-empty-state` «Вкладка «…» ещё не спроектирована»; «Описание» brings the description back. - **Other statuses, tender types and roles** are not designed and not built: the page renders only the «Сбор заявок» auction for the logist. ## States, Errors, and Edge Cases - A long value in a field or document name truncates with an ellipsis; a long criterion wraps. - Without WebGL or tiles the map shows the `wbl-map` error slot; the rest of the page is unaffected. - Loading and errors are not designed or implemented. A page with no applications still renders «Заявок пока нет» in the panel; its applications tab has no designed empty state. ## Data and Integration Boundary - All values are static fixtures (`tender-page.fixtures.ts`) copied from the layout. Vehicles 4–7 are hidden in the layout; their contents are invented after vehicles 1–3. Route coordinates are the real cities of the addresses, so several pins overlap in Moscow and Omsk. - Applications (A-010): the layout repeats filler rows up to 40; the prototype has 7, as on «Описание»: five carriers from the layout and two invented after them (ООО Уралтрансавто, ИП Смирнова Е.А.), sorted by submission date. Every INN is 1234567890, as in the layout. The rating colour is set per row in the fixture, not computed from thresholds. - Visual stubs on the applications tab: the carrier link (no carrier card — a click stays on the page) and the copy icon (decorative; `wbl-table` has no interactive right icon, so nothing is copied). - The map uses the demo-only OpenFreeMap style also used by the `wbl-map` story; it is not a product tile provider. - Visual stubs only: «Отменить лот» and document downloads. A saved direction lives only in the page state and resets on reload. - No API, persistence, permissions, or production navigation. ## Components and Accessibility - Sections are feature components for outer-customer screens in `src/app/features/outer-customer-tenders/tender-page/` (`sections/` and `ui/`), built on the design system; they take ready values through inputs and are not design-system components. [S4] - Each section is a `section` named by its h2; fields are a `dl`; point, criterion and tag lists are lists; the stage strip is an ordered list «Этапы тендера» with `aria-current="step"` on the current stage and a visually hidden «До конца этапа:» before the countdown. - The right column is an `aside` «Заявки и заказчик»; the map is labelled «Карта маршрута»; bookmarks and downloads are named by their direction or document; a saved bookmark is named «Направление … сохранено». The toast is a `status` live region. - «Показать ещё» does not expose `aria-expanded`: `wbl-button` has no such input. ## Related Flows - `screen.tender-outer-customer` — the outer-customer list the back button returns to. ## Open Questions - Loading and unloading pins are violet and green in the layout; for now all pins and the line are violet (agreed in A-005), since `wbl-map-pin` has only the accent number pin. - Copy-to-clipboard for the phone, the carrier card behind the link, the rating thresholds for green / orange / red, and other application statuses. - The list card for lot №1235 shows 12 applications (layout `18897:14220`), while the tender page shows 7. - Content of the other three tabs, and what «Отменить лот» asks before cancelling. - Other stages (participants check, trading, results), multilot, and the carrier's view of the same page. - Can a saved direction be un-saved from its bookmark, and with which Tooltip and toast? Whether the toast should hide by itself.