wbDesign Wiki
Storybook

Tender outer customers

Скачать .md ↓

Tasks: A-002 — https://github.com/logisticsdesign/logistics-2/issues/21 (logist); A-003 — https://github.com/logisticsdesign/logistics-2/issues/24 (carrier); A-004 — https://github.com/logisticsdesign/logistics-2/issues/27 (logist drawer); A-006 — https://github.com/logisticsdesign/logistics-2/issues/34 (carrier saved directions) · member anastasia-ermoshina · agent: Claude Code.

Readiness

Dimension Status and evidence
Specification This document. Logist view only; carrier and participant views are open questions.
Figma File jwmCEMZZjn9cieKYqxI6FL (read-only): «Внешние заказчики / логист» 18897:14220, «… / перевозчик» 19223:178823, «… / перевозчик / мои заявки» 19223:178822, «… / участник» 19223:178821; drawers 20596:79385, 20350:90596, 20350:90980, 20350:92388.
Local prototype Implemented at /tenders/outer-customer with static fixtures. [S4] [S5]
Verification Focused unit tests pass; browser check at 1440 px (layout, role switch, tabs, keyboard on tabs and role switch). A-004: drawer unit tests and a browser check of all four drawers at 1024 px (open, backdrop, close button, Escape, focus return). No verify:local run yet.

Purpose

Desktop prototype of the outer-customer tender list as the logist sees it: 13 example lots, a notice for a lot whose report was not delivered, and the section tabs and toolbar from the layout.

Source and Route

  • Everything down to the filter row (role switch, heading, tabs, toolbar) stays in place; only the found line and the list scroll, on every tab.

  • Route /tenders/outer-customer, reached from Sidebar «Тендеры → Внешние заказчики». [S5]

  • On every /tenders/* route the Sidebar opens collapsed to the icon rail, as in the layout; the user can still expand it.

Primary Scenario

  1. The logist opens the section: heading «Внешние заказчики», «?» (help) and «Создать тендер ▾», tabs «Тендеры · Управление перевозчиками». The logist has no «Сохранённые направления» tab (A-006) — it belongs to the carrier.
  2. Under the tabs: sort, «+ Фильтр», download; then «Тендеров: 13 · Сортировка по дате окончания (по возрастанию)».
  3. The list shows lot cards in the outer-customer layout (see component.lot-card); a lot at the participants-check stage offers «Отметить допуск». The actions column has the same width on every card.
  4. A lot with an undelivered report sits in a red notice «Отчёт не отправлен заказчику / Перейдите в тендер и проверьте адрес электронной почты». The group carries the card's corners and a danger border; the card inside has none. On hover every card — with or without a notice — gets the same accent border (--color-stroke-accent).
  5. «N направлений», «Ставок: N» and «Тарификаций: N» are dotted links. «N направлений» does nothing yet. For the logist, «Ставок: N» and «Тарификаций: N» open the vehicles drawer (below); the carrier gets the same drawers on «Тендеры» and «Мои заявки».
  6. Vehicles drawer (A-004). Slides in from the right, full height, 45% of the viewport and at least 480px (the layout shows 680px), over the modal overlay --color-overlay-modal. Header: title and «№{номер} от {дата}, {откуда} → {куда}», close «×». Body scrolls with one card per vehicle «ТС 1…N»: three grey badges (wbl-badge S, clear), divider, rate columns; only at the 480px minimum the trip/day sums wrap at «•» instead of being cut. Footer: full-width primary «К тендеру». Bids equal vehicles, so N is the lot's vehicle count, at most 7.
    • Auction, «Ставок: N» under «Начальная ставка» with no current bid (20596:79385): «Ставки по ТС», starting bid only.
    • Auction with bids (20350:90596): «Ставки по ТС», starting bid in grey (--color-text-icon-primary-gray) and current bid — from either «Ставок: N», whatever caption is above it.
    • Multilot «Тарификаций: N» (20350:90980): «Тарификация по ТС», «Тарификация ₽/км» per vehicle; multilots have no starting bid.
    • Multilot «Ставок: N» (20350:92388): «Ставки по ТС», current bid only; tariffication is already in the bid. Closes by «×», the overlay and Escape; focus returns to the link.

Alternate Scenarios

  • Viewer role. A prototype-only switch «Кто смотрит: Логист · Перевозчик» sits in the heading row to the left of the header buttons («?» and «Создать тендер», or only «?» for the carrier), 16px before them; it takes no row of its own. Changing the role returns to «Тендеры». There is no separate participant role: participation is the carrier tab «Я участник».
  • Carrier (A-003, Figma 19223:178823 «Внешние заказчики / перевозчик»). Only «?» in the heading (no «Создать тендер»); tabs «Тендеры · Мои заявки (5) · Я участник · Сохранённые направления»; the toolbar adds the switch «Сохранённые направления» before download. Four lots at the applications stage, each with «Подать заявку», bookmark and menu; bids before trading: starting bid with trip/day sums, «Ставок: 7» for a 7-vehicle auction, «Тарификация ₽/км» and «Тарификаций: 2» for multilots.
  • Carrier «Мои заявки» (A-003, Figma 19223:178822). The toolbar adds a pinned chip «Статус заявки». Five applications; four carry a status wbl-alert (size S, no close) heading a group framed in its tone: rejected — danger, smile-sad, «Посмотреть причину»; approved ×2 — success, smile-happy, «Сделайте ставку, перейдя в карточку тендера»; withdrawn — neutral, «Участие в тендере будет отменено». The group owns the 12px corners; alert and card have none. On hover the frame takes the usual card accent border. Each card shows «Заявка от: 12.12.2026». The actions column is 108px on every card (bookmark + menu, 16px padding both sides), so a bookmark-only card keeps the same width. Rejected and withdrawn applications keep only the bookmark.
  • Carrier «Я участник» (A-003, Figma 19223:178821 «Внешние заказчики / участник»). Tab badge 8; pinned chip «Статус тендера». Cards render with the participant role. Two won lots (success alert «Вы выиграли тендер», status «Вы победили» + timer «11 ч 59 мин», crown by the bid), one lost (danger alert «Ваша ставка проиграла», «Перебили», own bid below), five at trading: «Лидируете», plain bid, «Ставок: 3», «Перебили · Перебито: 2 из 3». Auctions offer «Перебить» + bookmark + «Покинуть тендер» (tooltip below), multilots bookmark + «Покинуть тендер»; won/lost — bookmark only. The actions column is as wide as «Перебить» on every card.
  • Bid logic on every card (A-004). Before trading (created, applications-collection, participants-check) there is no current bid: an auction shows the starting bid — one, or «Ставок: N» for N ≤ 7 vehicles; a multilot shows «Тарификация» — one, or «Тарификаций: N» for N ≤ 7. Wherever a card shows «Ставок: N» or «Тарификаций: N» with N > 1, it also shows «N ТС» and N equals the vehicle count. Countdown captions follow the status. Tests check this on all four lists.
  • Participant. On «Я участник» «Ставок: N» does not open the drawer yet.
  • Other tabs. Logist: «Управление перевозчиками» — a stub «Раздел … ещё не спроектирован».
  • Carrier «Сохранённые направления» (A-006). The tab carries the number of saved directions as a badge and opens the tab content described in screen.tender-outer-customer-saved-directions: empty state, new direction form, «Мои направления» list and the regions map.

States, Errors, and Edge Cases

  • Populated list and the two stubs are the only implemented states.
  • Long directions wrap to a second line and truncate with an ellipsis.
  • Empty list, loading, and errors are not designed or implemented.

Data and Integration Boundary

  • All lots are static fixtures in the screen component. [S4] For the drawer, lots №1238 (open auction, no bids) and №1239 (auction with bids) are 7-vehicle auctions; every vehicle card repeats the layout values (45,90 / 44,90 ₽/км).
  • Visual stubs only: sort, «+ Фильтр» (its menu lists fields but does not filter), the «Сохранённые направления» switch (toggles, does not filter), download, help, «Создать тендер», card menus, bookmarks, «Отметить допуск» and «Подать заявку» do nothing. The «Мои заявки» count, the «Статус заявки» chip and «Посмотреть причину» are visual only; so are «Перебить», «Покинуть тендер» and the «Статус тендера» chip on «Я участник». The drawer button «К тендеру» does nothing, except for the logist's lot №1235 — «Аукцион · 7 ТС · Сбор заявок на участие» as in the layout (A-005 fixed it from a multilot) — where it opens /tenders/outer-customer/tender; a click on that card (outside its links and buttons) opens the page too.
  • No API, persistence, permissions, or production navigation.

Components and Accessibility

  • wbl-header-widget actions use the optional iconPosition and showLabel fields: the help button is icon-only with the accessible name «Справка». [S3]
  • The role switch is a wbl-segment-control radio group inside a labelled group «Кто смотрит»; arrow keys move and select.
  • The width sizer in each card's actions column is aria-hidden and inert.
  • Transport icons in cards carry their mode as the tag's accessible name.
  • The drawer is temporary feature code (src/app/features/outer-customer-tenders/lot-vehicles-drawer), built from the layouts until the design system gets its own Drawer (component.drawer is figma-only). It is a role="dialog" aria-modal panel named by its title and described by the subtitle; focus moves to the panel and is trapped; the page does not scroll behind it; the closed drawer is inert; motion is off with prefers-reduced-motion.
  • None yet. screen.tender-list is the related, still proposed, list outline.
  • screen.tender-outer-customer-saved-directions (A-006) — the carrier tab «Сохранённые направления».
  • screen.tender-outer-customer-tender-page (A-005) — the tender page of an auction at «Сбор заявок» for the logist, opened by «К тендеру» in the drawer of lot №1235.

Open Questions

  • Tab counters differ between layouts («Мои заявки» 2 vs 0); the prototype derives «Мои заявки» and «Я участник» from the number of cards (5 and 8).
  • What «Посмотреть причину» opens for a rejected application.
  • Content of the logist tab «Управление перевозчиками».
  • What sort, filter, download, help and the «Создать тендер» menu should offer.
  • Content of the drawer for «N направлений»; carrier and participant drawers.
  • Real per-vehicle bids, tags and what «К тендеру» opens.
  • Swap the temporary drawer for the design-system Drawer when it exists.
  • Placeholders in the layout the card API does not express — see component.lot-card open questions.
WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

Начните вводить название или текст