From ff527ad6d2fb5a37c1a533cebcea26fc5fb8d2e1 Mon Sep 17 00:00:00 2001
From: zabudko-ru <yuri@zabudko.ru>
Date: Wed, 21 Oct 2026 03:51:58 +0400
Subject: [PATCH] Stage 6 (part 1): new client mini-app look and order ratings

Plum hero with a club-card ticket, a 'Now' block with the live order timeline,
new order cards and order screen, QR club card screen, new nav
(Home / Orders / Chat / Card / Profile). Clients rate completed orders
(1-5 stars + comment); provider rating is recalculated.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/api/src/routers/client.ts                |   6 +-
 apps/miniapp-client/src/App.tsx               |  14 +-
 apps/miniapp-client/src/lib.tsx               | 150 +++-
 apps/miniapp-client/src/main.tsx              |   1 +
 apps/miniapp-client/src/redesign.css          | 845 ++++++++++++++++++
 apps/miniapp-client/src/screens/Home.tsx      | 201 +++--
 .../src/screens/OrderDetail.tsx               | 201 +++--
 apps/miniapp-client/src/screens/Orders.tsx    |  21 +-
 apps/miniapp-client/src/screens/Perks.tsx     |  40 +-
 packages/i18n/locales/en.json                 |  38 +-
 packages/i18n/locales/es.json                 |  38 +-
 packages/i18n/locales/hy.json                 |  38 +-
 packages/i18n/locales/ru.json                 |  38 +-
 packages/i18n/locales/zh.json                 |  38 +-
 packages/services/src/index.ts                |   1 +
 packages/services/src/queries.ts              |   4 +
 packages/services/src/ratings.ts              |  29 +
 packages/services/test/ratings.test.ts        |  38 +
 18 files changed, 1536 insertions(+), 205 deletions(-)
 create mode 100644 apps/miniapp-client/src/redesign.css
 create mode 100644 packages/services/src/ratings.ts
 create mode 100644 packages/services/test/ratings.test.ts

diff --git a/apps/api/src/routers/client.ts b/apps/api/src/routers/client.ts
index 96d6a51..f71f130 100644
--- a/apps/api/src/routers/client.ts
+++ b/apps/api/src/routers/client.ts
@@ -1,5 +1,5 @@
 import { defaultParams, discountFor, LOCALES } from '@barev/core';
-import {
+import { rateOrder,
   applyAgencyCode,
   availableSlots,
   cancelByClient,
@@ -229,6 +229,10 @@ export const clientRouter = router({
     reschedule: clientProcedure
       .input(z.object({ id: z.string(), scheduledAt: z.date() }))
       .mutation(({ ctx, input }) => rescheduleByClient(ctx.svc, { orderId: input.id, clientId: ctx.client.id, scheduledAt: input.scheduledAt })),
+    /** Оценка после выполнения: звёзды и комментарий */
+    rate: consentedClientProcedure
+      .input(z.object({ id: z.string(), score: z.number().int().min(1).max(5), comment: z.string().max(1000).optional() }))
+      .mutation(({ ctx, input }) => rateOrder(ctx.svc, { orderId: input.id, clientId: ctx.client.id, score: input.score, comment: input.comment })),
     /** ORD-7 */
     repeat: clientProcedure.input(z.object({ id: z.string() })).query(({ ctx, input }) => repeatDraft(ctx.db, input.id, ctx.client.id)),
   }),
diff --git a/apps/miniapp-client/src/App.tsx b/apps/miniapp-client/src/App.tsx
index 3aeca77..eff48a0 100644
--- a/apps/miniapp-client/src/App.tsx
+++ b/apps/miniapp-client/src/App.tsx
@@ -17,7 +17,7 @@ import { Profile } from './screens/Profile.tsx';
 import { Services } from './screens/Services.tsx';
 import { Chat } from './screens/Chat.tsx';
 
-const ROOTS = ['/', '/services', '/perks', '/profile', '/docs'];
+const ROOTS = ['/', '/orders', '/services', '/perks', '/profile', '/docs'];
 
 export function App({ hasInitData }: { hasInitData: boolean }) {
   const trpc = useTRPC();
@@ -66,7 +66,7 @@ function Routes({ segment }: { segment: 'MOVING' | 'LIVING' }) {
   else if (path === '/membership') screen = <Membership />;
   else if (path === '/chat') screen = <Chat />;
   else screen = segment === 'MOVING' ? <Move /> : <Home />;
-  const withNav = ROOTS.includes(path) || path === '/orders';
+  const withNav = ROOTS.includes(path);
   return (
     <>
       {screen}
@@ -97,7 +97,7 @@ function MoveNav({ path }: { path: string }) {
   );
 }
 
-/** ORD-1: Главная / Услуги / + / Скидки / Профиль */
+/** Главная / Заказы / Чат (в центре) / Клубная карта / Профиль; услуги — с главной */
 function BottomNav({ path }: { path: string }) {
   const { t } = useI18n();
   const item = (href: string, icon: Parameters<typeof Icon>[0]['name'], label: string) => (
@@ -109,11 +109,11 @@ function BottomNav({ path }: { path: string }) {
   return (
     <nav className="bc-bottomnav" aria-label={t('client.nav.label')}>
       {item('/', 'home', t('client.nav.home'))}
-      {item('/services', 'grid', t('client.nav.services'))}
-      <a href="#/order/cleaning" className="bc-bottomnav__plus" aria-label={t('client.nav.newOrder')}>
-        <Icon name="plus" size={26} strokeWidth={2.6} />
+      {item('/orders', 'clock', t('client.nav.orders'))}
+      <a href="#/chat" className="bc-bottomnav__plus" aria-label={t('client.nav.chat')}>
+        <Icon name="chat" size={24} strokeWidth={2.4} />
       </a>
-      {item('/perks', 'gift', t('client.nav.perks'))}
+      {item('/perks', 'gift', t('client.nav.card'))}
       {item('/profile', 'user', t('client.nav.profile'))}
     </nav>
   );
diff --git a/apps/miniapp-client/src/lib.tsx b/apps/miniapp-client/src/lib.tsx
index 0d91c7e..8d784d8 100644
--- a/apps/miniapp-client/src/lib.tsx
+++ b/apps/miniapp-client/src/lib.tsx
@@ -1,4 +1,4 @@
-import { CATEGORY_TONE, Icon, type CategoryCode } from '@barev/ui';
+import { CATEGORY_ICON, CATEGORY_TONE, Icon, type CategoryCode } from '@barev/ui';
 import { paramsSummary, useI18n } from '@barev/web';
 import type { ReactNode } from 'react';
 
@@ -38,19 +38,31 @@ export function useParamsSummary() {
   return (serviceCode: string, params: Record<string, unknown>) => paramsSummary(t, serviceCode, params);
 }
 
-/** Строка заявки как в превью «Мои заявки» макета */
-export function OrderRow({ o }: { o: OrderLike }) {
+/** Карточка заказа в списке: иконка направления, услуга, время, статус и полоска прогресса */
+export function OrderRow({ o }: { o: OrderLike & { active?: boolean; steps?: readonly string[]; rating?: { score: number } | null; done?: boolean } }) {
   const { t, dt } = useI18n();
   const summary = useParamsSummary();
+  const idx = o.steps ? o.steps.indexOf(o.status) : -1;
+  const progress = o.active && o.steps && idx >= 0 ? (idx + 1) / o.steps.length : null;
   return (
-    <a href={`#/orders/${o.id}`} className={`order-row ${toneClass(o.category)}`}>
-      <div className="order-row__main">
-        <div className="order-row__title">
-          {t(`services.${o.serviceCode}.name`)} · {summary(o.serviceCode, o.params)}
-        </div>
-        <div className="bc-small">{dt(o.scheduledAt, { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}</div>
-      </div>
-      <span className="bc-badge">{t(`status.${o.flow}.${o.status}`)}</span>
+    <a href={`#/orders/${o.id}`} className="order-card" data-status={o.status === 'CANCELLED' ? 'cancelled' : o.active ? 'active' : 'done'}>
+      <span className={`order-card__icon ${toneClass(o.category)}`}>
+        <Icon name={CATEGORY_ICON[o.category as CategoryCode] ?? 'home'} size={22} />
+      </span>
+      <span className="order-card__main">
+        <span className="order-card__title">{t(`services.${o.serviceCode}.name`)}</span>
+        <span className="order-card__sub">{summary(o.serviceCode, o.params)}</span>
+        <span className="order-card__when">{dt(o.scheduledAt, { weekday: 'short', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}</span>
+        {progress !== null && (
+          <span className="order-card__bar" aria-hidden="true">
+            <span style={{ width: `${Math.round(progress * 100)}%` }} />
+          </span>
+        )}
+      </span>
+      <span className="order-card__side">
+        <span className="order-card__status">{t(`status.${o.flow}.${o.status}`)}</span>
+        {o.rating ? <Stars value={o.rating.score} size={12} /> : o.done ? <span className="order-card__rate">{t('client.rate.prompt')}</span> : null}
+      </span>
     </a>
   );
 }
@@ -93,3 +105,119 @@ export function itemHint(names: RelocationNames | undefined, kind: 'STEP' | 'DOC
   const h = names?.[`${kind}:${item.code}`]?.hint;
   return h?.[locale] || h?.ru || null;
 }
+
+export interface TimelineItem {
+  label: ReactNode;
+  state: 'done' | 'current' | 'todo';
+  meta?: ReactNode;
+}
+
+/** Вертикальная шкала как на сайте: зелёные точки — пройдено, розовая — сейчас */
+export function Timeline({ items, compact }: { items: TimelineItem[]; compact?: boolean }) {
+  return (
+    <ol className={`tl${compact ? ' tl--compact' : ''}`}>
+      {items.map((s, i) => (
+        <li key={i} className={`tl__item tl__item--${s.state}`}>
+          <span className="tl__dot" aria-hidden="true">
+            {s.state === 'done' && <Icon name="check" size={12} strokeWidth={3} />}
+          </span>
+          <span className="tl__body">
+            <span className="tl__label">{s.label}</span>
+            {s.meta && <span className="tl__meta">{s.meta}</span>}
+          </span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+export interface OrderSteps {
+  flow: string;
+  status: string;
+  /** false — заказ завершён: последний шаг тоже зелёный */
+  active?: boolean;
+  steps: readonly string[];
+  history: { to: string; event: string | null; at: Date }[];
+}
+
+/** Шаги заказа по истории статусов: пройденные, текущий, остальные */
+export function useOrderTimeline() {
+  const { t, dt } = useI18n();
+  return (o: OrderSteps): TimelineItem[] => {
+    const passed = new Set(o.history.map((h) => h.to));
+    if (o.status === 'CANCELLED')
+      return [...o.steps.filter((s) => passed.has(s)).map((s) => ({ label: t(`status.${o.flow}.${s}`), state: 'done' as const })), { label: t(`status.${o.flow}.CANCELLED`), state: 'current' as const }];
+    const currentIdx = o.steps.indexOf(o.status);
+    return o.steps.map((s, i) => {
+      const at = o.history.find((h) => h.to === s && !h.event)?.at ?? o.history.find((h) => h.to === s)?.at;
+      return {
+        label: t(`status.${o.flow}.${s}`),
+        state: i < currentIdx || (i === currentIdx && o.active === false) ? 'done' : i === currentIdx ? 'current' : 'todo',
+        meta: at && i <= currentIdx ? dt(at, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : undefined,
+      };
+    });
+  };
+}
+
+const STAR = 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z';
+
+/** Звёзды 1–5; без onChange — только показ */
+export function Stars({ value, onChange, size = 34 }: { value: number; onChange?: (v: number) => void; size?: number }) {
+  const { t } = useI18n();
+  return (
+    <div className="stars" role={onChange ? 'radiogroup' : 'img'} aria-label={onChange ? undefined : t('client.rate.star', { count: value })}>
+      {[1, 2, 3, 4, 5].map((n) => {
+        const svg = (
+          <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+            <path d={STAR} fill={n <= value ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={1.8} strokeLinejoin="round" />
+          </svg>
+        );
+        return onChange ? (
+          <button key={n} type="button" role="radio" aria-checked={n === value} aria-label={t('client.rate.star', { count: n })} data-on={n <= value || undefined} onClick={() => onChange(n)}>
+            {svg}
+          </button>
+        ) : (
+          <span key={n} data-on={n <= value || undefined}>
+            {svg}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Клубная карта-«билет» в стиле карт на сайте */
+export function ClubTicket({ level, name, code, until, href, action }: { level: Level; name?: string; code?: string | null; until?: ReactNode; href?: string; action?: ReactNode }) {
+  const id = level === 'BAREV' ? 'free' : level === 'BAREV_PLUS' ? 'plus' : 'elite';
+  const body = (
+    <>
+      <span className="ticket__main">
+        <span className="ticket__club">Barev Club</span>
+        <span className="ticket__level">{LEVEL_NAME[level]}</span>
+        <span className="ticket__meta">
+          {name && <b>{name}</b>}
+          {code && <span className="bc-num">{code}</span>}
+        </span>
+        {until && <span className="ticket__until">{until}</span>}
+      </span>
+      {action && <span className="ticket__stub">{action}</span>}
+    </>
+  );
+  return href ? (
+    <a className="ticket" data-plan={id} href={href}>
+      {body}
+    </a>
+  ) : (
+    <div className="ticket" data-plan={id}>
+      {body}
+    </div>
+  );
+}
+
+export function QrGlyph({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h2v2h-2zM18 14h2M14 18v2M18 18h2v2h-2z" />
+    </svg>
+  );
+}
diff --git a/apps/miniapp-client/src/main.tsx b/apps/miniapp-client/src/main.tsx
index beb587c..ecb16a7 100644
--- a/apps/miniapp-client/src/main.tsx
+++ b/apps/miniapp-client/src/main.tsx
@@ -1,5 +1,6 @@
 import '@barev/ui/styles.css';
 import './app.css';
+import './redesign.css';
 import { ApiProvider, loadTextOverrides, getInitData, initTelegram, ToastProvider } from '@barev/web';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
diff --git a/apps/miniapp-client/src/redesign.css b/apps/miniapp-client/src/redesign.css
new file mode 100644
index 0000000..981b8b5
--- /dev/null
+++ b/apps/miniapp-client/src/redesign.css
@@ -0,0 +1,845 @@
+/* Этап 6: новый вид клиентского приложения — в стиле barevclub.com (слива, розовый, зелёные точки) */
+
+:root {
+  --plum-2: #5e1a36;
+  --plum-line: rgba(246, 195, 211, 0.22);
+  --green: #a8c38a;
+  --green-ink: #1f3311;
+}
+
+/* ───── сливовый верх, как на сайте ───── */
+.app--hero {
+  padding-top: 0;
+}
+.hero {
+  margin: 0 -16px 4px;
+  padding: 18px 16px 22px;
+  background: var(--bc-plum);
+  color: #fff;
+  border-radius: 0 0 32px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  position: relative;
+  overflow: hidden;
+}
+.hero__word {
+  position: absolute;
+  right: -10px;
+  top: -18px;
+  font-family: var(--bc-font-head);
+  font-weight: 900;
+  font-style: italic;
+  font-size: 112px;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  color: var(--bc-pink);
+  opacity: 0.16;
+  pointer-events: none;
+}
+.hero__hello {
+  position: relative;
+  margin: 6px 0 0;
+  font-family: var(--bc-font-head);
+  font-weight: 800;
+  font-size: 30px;
+  line-height: 1.05;
+  letter-spacing: -0.01em;
+}
+.hero__hello span {
+  color: var(--bc-pink);
+}
+.hero__hello small {
+  display: block;
+  font-family: var(--bc-font-body);
+  font-weight: 500;
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 2px;
+}
+.hero__note {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+/* ───── клубная карта-«билет» ───── */
+.ticket {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-height: 132px;
+  border-radius: 24px;
+  text-decoration: none;
+  color: var(--bc-plum);
+  background: var(--bc-pink);
+  overflow: hidden;
+}
+.ticket[data-plan='free'] {
+  background: var(--plum-2);
+  color: #fff;
+  box-shadow: inset 0 0 0 1.5px var(--plum-line);
+}
+.ticket[data-plan='elite'] {
+  background: var(--bc-perks);
+}
+.ticket__main {
+  flex: 1;
+  min-width: 0;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ticket__club {
+  font-size: 12px;
+  font-weight: 600;
+  opacity: 0.75;
+}
+.ticket__level {
+  font-family: var(--bc-font-head);
+  font-weight: 900;
+  font-style: italic;
+  font-size: 34px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  margin-top: 2px;
+}
+.ticket__meta {
+  display: flex;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 10px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.ticket__until {
+  font-size: 12px;
+  opacity: 0.8;
+}
+/* корешок: пунктир и вырезы, как у билета */
+.ticket__stub {
+  flex: none;
+  width: 92px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.15;
+  padding: 10px 8px;
+  border-left: 2px dashed currentColor;
+  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
+  position: relative;
+}
+.ticket__stub::before,
+.ticket__stub::after {
+  content: '';
+  position: absolute;
+  left: -11px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--bc-plum);
+}
+.ticket__stub::before {
+  top: -10px;
+}
+.ticket__stub::after {
+  bottom: -10px;
+}
+
+/* ───── секции ───── */
+.sect {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sect__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 4px;
+}
+.sect__title {
+  margin: 4px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--bc-font-head);
+  font-weight: 800;
+  font-size: 22px;
+  letter-spacing: -0.01em;
+}
+.sect__link {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--bc-accent);
+  text-decoration: none;
+}
+.live-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(168, 195, 138, 0.3);
+  animation: live 2s ease-in-out infinite;
+}
+@keyframes live {
+  50% {
+    box-shadow: 0 0 0 7px rgba(168, 195, 138, 0.1);
+  }
+}
+
+/* ───── «Сейчас» ───── */
+.now-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 28px;
+  background: var(--bc-surface);
+  text-decoration: none;
+  color: var(--bc-ink);
+  box-shadow: var(--bc-shadow);
+}
+.now-card__top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.now-card__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.now-card__main b {
+  font-family: var(--bc-font-head);
+  font-size: 18px;
+  line-height: 1.15;
+}
+.now-card__main span {
+  font-size: 13px;
+  color: var(--bc-ink-2);
+}
+.now-card__when {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 16px;
+  background: var(--bc-bg);
+  font-weight: 600;
+  font-size: 14px;
+}
+.now-card__when::first-letter {
+  text-transform: uppercase;
+}
+.more-link {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--bc-ink-2);
+  text-decoration: none;
+}
+.empty-now {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 18px;
+  border-radius: 28px;
+  background: var(--bc-surface);
+}
+.empty-now p {
+  margin: 0;
+  color: var(--bc-ink-2);
+}
+
+/* ───── шкала как на сайте ───── */
+.tl {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.tl__item {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 14px;
+}
+.tl__item:last-child {
+  padding-bottom: 0;
+}
+.tl__item::before {
+  content: '';
+  position: absolute;
+  left: 10px;
+  top: 22px;
+  bottom: 0;
+  width: 2px;
+  background: var(--bc-line);
+}
+.tl__item--done::before {
+  background: var(--green);
+}
+.tl__item:last-child::before {
+  display: none;
+}
+.tl__dot {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--bc-line);
+  background: var(--bc-surface);
+  display: grid;
+  place-items: center;
+  color: var(--green-ink);
+  position: relative;
+  z-index: 1;
+}
+.tl__item--done .tl__dot {
+  background: var(--green);
+  border-color: var(--green);
+}
+.tl__item--current .tl__dot {
+  border: 6px solid var(--bc-accent);
+  box-shadow: 0 0 0 4px rgba(184, 35, 90, 0.15);
+}
+.tl__body {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1px;
+  min-width: 0;
+}
+.tl__label {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.3;
+}
+.tl__item--todo .tl__label {
+  color: var(--bc-ink-3);
+  font-weight: 500;
+}
+.tl__item--current .tl__label {
+  color: var(--bc-accent);
+}
+.tl__meta {
+  font-size: 12px;
+  color: var(--bc-ink-3);
+}
+/* компактно на главной — шаги в строку */
+.tl--compact {
+  flex-direction: row;
+}
+.tl--compact .tl__item {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 0;
+  min-width: 0;
+}
+.tl--compact .tl__item::before {
+  left: 22px;
+  right: 0;
+  top: 10px;
+  bottom: auto;
+  width: auto;
+  height: 2px;
+}
+.tl--compact .tl__item:last-child {
+  flex: none;
+}
+.tl--compact .tl__body {
+  display: none;
+}
+.tl--compact .tl__item--current .tl__body {
+  display: flex;
+  position: absolute;
+  top: 28px;
+  left: 0;
+  white-space: nowrap;
+}
+.tl--compact .tl__item--current .tl__meta {
+  display: none;
+}
+.tl--compact {
+  padding-bottom: 24px;
+}
+.tl--compact .tl__item:last-child.tl__item--current .tl__body {
+  left: auto;
+  right: 0;
+}
+
+/* ───── карточки заказов ───── */
+.order-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.order-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 24px;
+  background: var(--bc-surface);
+  text-decoration: none;
+  color: var(--bc-ink);
+}
+.order-card[data-status='cancelled'] {
+  opacity: 0.6;
+}
+.order-card__icon {
+  flex: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+}
+.order-card__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.order-card__title {
+  font-family: var(--bc-font-head);
+  font-weight: 700;
+  font-size: 16px;
+}
+.order-card__sub,
+.order-card__when {
+  font-size: 13px;
+  color: var(--bc-ink-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.order-card__when {
+  color: var(--bc-ink);
+  font-weight: 500;
+}
+.order-card__bar {
+  margin-top: 8px;
+  height: 4px;
+  border-radius: 4px;
+  background: var(--bc-line);
+  overflow: hidden;
+}
+.order-card__bar span {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: var(--green);
+}
+.order-card__side {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+.order-card__status {
+  padding: 5px 10px;
+  border-radius: var(--bc-pill);
+  background: var(--bc-bg);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.order-card[data-status='active'] .order-card__status {
+  background: var(--bc-plum);
+  color: #fff;
+}
+.order-card__rate {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--bc-accent);
+}
+.order-card .stars {
+  color: #e9a400;
+}
+
+/* ───── карточка заказа ───── */
+.od-hero {
+  margin: -16px -16px 0;
+  padding: 12px 16px 22px;
+  border-radius: 0 0 32px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.od-hero__bar {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.od-hero__num {
+  font-family: var(--bc-font-head);
+  font-weight: 700;
+  opacity: 0.6;
+}
+.od-hero__status {
+  padding: 6px 12px;
+  border-radius: var(--bc-pill);
+  background: var(--bc-plum);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+}
+.od-hero__status[data-status='done'] {
+  background: var(--bc-surface);
+  color: var(--green-ink);
+}
+.od-hero__status[data-status='cancelled'] {
+  background: var(--bc-surface);
+  color: var(--bc-danger);
+}
+.od-hero__title {
+  margin: 4px 0 0;
+  font-family: var(--bc-font-head);
+  font-weight: 800;
+  font-size: 32px;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
+}
+.od-hero__sub {
+  font-size: 15px;
+  opacity: 0.85;
+}
+.facts {
+  margin: 0;
+  padding: 4px 16px;
+  border-radius: 24px;
+  background: var(--bc-surface);
+}
+.facts > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 0;
+  border-top: 1px solid var(--bc-line);
+}
+.facts > div:first-child {
+  border-top: 0;
+}
+.facts dt {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--bc-ink-3);
+}
+.facts dd {
+  margin: 0 0 0 24px;
+  font-weight: 600;
+}
+.facts dd::first-letter {
+  text-transform: uppercase;
+}
+.panel {
+  padding: 16px;
+  border-radius: 24px;
+  background: var(--bc-surface);
+}
+.panel__title {
+  margin: 0 0 12px;
+  font-family: var(--bc-font-head);
+  font-weight: 700;
+  font-size: 18px;
+}
+
+/* ───── оценка ───── */
+.rate {
+  padding: 18px;
+  border-radius: 28px;
+  background: var(--bc-plum);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.rate__title {
+  margin: 0;
+  font-family: var(--bc-font-head);
+  font-weight: 800;
+  font-size: 22px;
+}
+.rate__text {
+  margin: -4px 0 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.75);
+}
+.rate .stars {
+  color: var(--bc-perks);
+}
+.rate__input {
+  width: 100%;
+  min-height: 64px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  border: 0;
+  font: inherit;
+  font-size: 15px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+.rate--done {
+  background: var(--bc-surface);
+  color: var(--bc-ink);
+}
+.rate--done .stars {
+  color: #e9a400;
+}
+.rate__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bc-ink-3);
+}
+.rate__change {
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--bc-accent);
+  cursor: pointer;
+}
+.rate__comment {
+  margin: 0;
+  color: var(--bc-ink-2);
+}
+.rate-nudge {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 24px;
+  background: var(--bc-perks);
+  color: var(--bc-perks-ink);
+  text-decoration: none;
+}
+.rate-nudge > span {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 13px;
+}
+.rate-nudge b {
+  font-family: var(--bc-font-head);
+  font-size: 16px;
+}
+.stars {
+  display: flex;
+  gap: 4px;
+}
+.stars button {
+  padding: 2px;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: 0;
+  transition: transform 0.12s;
+}
+.stars button:active {
+  transform: scale(0.88);
+}
+.stars [data-on] svg {
+  filter: none;
+}
+
+/* ───── кнопки-«таблетки» как на сайте ───── */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 46px;
+  padding: 0 20px;
+  border-radius: var(--bc-pill);
+  border: 0;
+  font: inherit;
+  font-weight: 600;
+  font-size: 15px;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pill:disabled {
+  opacity: 0.6;
+}
+.pill--block {
+  width: 100%;
+}
+.pill--dark {
+  background: var(--bc-plum);
+  color: #fff;
+}
+.pill--pink {
+  background: var(--bc-pink);
+  color: var(--bc-plum);
+}
+.pill--green {
+  background: var(--green);
+  color: var(--green-ink);
+}
+.screen-head .pill--dark {
+  width: 46px;
+  padding: 0;
+}
+
+/* ───── заголовок экрана ───── */
+.screen-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+}
+.screen-head__title {
+  margin: 0;
+  font-family: var(--bc-font-head);
+  font-weight: 800;
+  font-size: 32px;
+  letter-spacing: -0.02em;
+}
+
+/* ───── направления ───── */
+.tiles .tile {
+  min-height: 118px;
+  border-radius: 26px;
+  justify-content: flex-start;
+  gap: 6px;
+}
+.tiles .tile .tile__title {
+  margin-top: auto;
+  font-size: 18px;
+}
+.tile__note {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+/* ───── чат ───── */
+.chat-cta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px;
+  border-radius: 28px;
+  background: var(--bc-plum);
+  color: #fff;
+  text-decoration: none;
+}
+.chat-cta > span:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.75);
+}
+.chat-cta b {
+  font-family: var(--bc-font-head);
+  font-size: 17px;
+  color: #fff;
+}
+
+/* ───── QR-карта ───── */
+.hero--card {
+  align-items: stretch;
+  padding-top: 22px;
+}
+.hero--card .pill {
+  align-self: flex-start;
+}
+.qr-card {
+  border-radius: 28px;
+  padding: 16px;
+  background: var(--bc-pink);
+  color: var(--bc-plum);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.qr-card[data-plan='free'] {
+  background: var(--plum-2);
+  color: #fff;
+  box-shadow: inset 0 0 0 1.5px var(--plum-line);
+}
+.qr-card[data-plan='elite'] {
+  background: var(--bc-perks);
+}
+.qr-card__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 13px;
+  font-weight: 600;
+}
+.qr-card__top b {
+  font-family: var(--bc-font-head);
+  font-weight: 900;
+  font-style: italic;
+  font-size: 26px;
+}
+.qr-card__code {
+  align-self: center;
+  padding: 12px;
+  border-radius: 22px;
+  background: #fff;
+  line-height: 0;
+}
+.qr-card__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+}
+.qr-card__timer {
+  opacity: 0.75;
+}
+
+.bc-segmented button[aria-pressed='true'] {
+  background: var(--bc-plum);
+  color: #fff;
+}
+
+/* ───── нижнее меню — слива и розовая кнопка чата ───── */
+.bc-bottomnav {
+  background: var(--bc-plum);
+  box-shadow: 0 10px 30px rgba(74, 16, 40, 0.35);
+}
+.bc-bottomnav a,
+.bc-bottomnav button {
+  color: rgba(246, 195, 211, 0.6);
+}
+.bc-bottomnav [aria-current='page'] {
+  color: var(--bc-pink);
+}
+.bc-bottomnav .bc-bottomnav__plus {
+  background: var(--bc-pink);
+  color: var(--bc-plum);
+}
diff --git a/apps/miniapp-client/src/screens/Home.tsx b/apps/miniapp-client/src/screens/Home.tsx
index 286409a..56abc9d 100644
--- a/apps/miniapp-client/src/screens/Home.tsx
+++ b/apps/miniapp-client/src/screens/Home.tsx
@@ -1,103 +1,148 @@
 import { useQuery } from '@tanstack/react-query';
-import { CATEGORY_ICON, Card, Chip, Icon, Spinner, type CategoryCode } from '@barev/ui';
-import { navigate, useI18n, useTRPC } from '@barev/web';
-import { LEVEL_NAME, LevelBadge, levelDiscount, OrderRow, toneClass, type Level } from '../lib.tsx';
+import { CATEGORY_ICON, Icon, Spinner, type CategoryCode } from '@barev/ui';
+import { useI18n, useTRPC } from '@barev/web';
+import { ClubTicket, LEVEL_NAME, levelDiscount, QrGlyph, Stars, Timeline, toneClass, useOrderTimeline, useParamsSummary, type Level } from '../lib.tsx';
 
-/** Главная для тех, кто уже живёт в Армении: заказы, быстрые кнопки, направления со скидкой по уровню */
+/**
+ * Главная для тех, кто уже живёт в Армении.
+ * Сверху — сливовый блок как на сайте: приветствие и клубная карта.
+ * Дальше — «Сейчас» (ближайший заказ со шкалой), просьба оценить, направления, чат.
+ */
 export function Home() {
   const { t, dt } = useI18n();
   const trpc = useTRPC();
   const me = useQuery(trpc.client.me.queryOptions());
   const orders = useQuery({ ...trpc.client.orders.list.queryOptions(), refetchInterval: 20_000 });
   const catalog = useQuery(trpc.client.catalog.queryOptions());
+  const timeline = useOrderTimeline();
+  const summary = useParamsSummary();
   const level = (me.data?.membership.level ?? 'BAREV') as Level;
-  const plus = level !== 'BAREV';
-  const lastDone = orders.data?.history.find((o) => o.status !== 'CANCELLED');
+  const now = orders.data?.active[0];
+  const moreActive = (orders.data?.active.length ?? 0) - 1;
+  const toRate = orders.data?.history.find((o) => o.done && !o.rating);
 
   return (
-    <main className="app">
-      <header className="bc-between" style={{ alignItems: 'flex-start' }}>
-        <div>
-          <div className="bc-small bc-muted">{t('client.home.hello')}</div>
-          <h1 className="bc-h2">{me.data?.firstName ?? t('client.home.guest')}</h1>
+    <main className="app app--hero">
+      <section className="hero">
+        <div className="hero__word" aria-hidden="true">
+          Barev
         </div>
-        <LevelBadge level={level} />
-      </header>
+        <h1 className="hero__hello">
+          <small>{t('client.home.hello')}</small>
+          <span>{me.data?.firstName ?? t('client.home.guest')}</span>
+        </h1>
+        <ClubTicket
+          level={level}
+          code={me.data?.cardCode}
+          href="#/perks"
+          until={
+            level !== 'BAREV' && me.data?.membership.endsAt
+              ? t('client.home.levelUntil', { plan: LEVEL_NAME[level], date: dt(me.data.membership.endsAt, { day: 'numeric', month: 'long' }) })
+              : t('client.home.free')
+          }
+          action={
+            <>
+              <QrGlyph />
+              <span>{t('client.home.cardShow')}</span>
+            </>
+          }
+        />
+      </section>
 
-      {plus && me.data?.membership.endsAt && (
-        <Card tone="perks" tight>
-          <div className="bc-row">
-            <Icon name="gift" />
-            <div className="bc-small" style={{ fontWeight: 600 }}>
-              {t('client.home.levelUntil', { plan: LEVEL_NAME[level], date: dt(me.data.membership.endsAt, { day: 'numeric', month: 'long' }) })}
-            </div>
+      {orders.isPending ? (
+        <Spinner />
+      ) : now ? (
+        <section className="sect">
+          <div className="sect__head">
+            <h2 className="sect__title">
+              <span className="live-dot" aria-hidden="true" />
+              {t('client.home.now')}
+            </h2>
+            <a href="#/orders" className="sect__link">
+              {t('client.home.allOrders')}
+            </a>
           </div>
-        </Card>
+          <a href={`#/orders/${now.id}`} className="now-card">
+            <span className="now-card__top">
+              <span className={`order-card__icon ${toneClass(now.category)}`}>
+                <Icon name={CATEGORY_ICON[now.category as CategoryCode] ?? 'home'} size={22} />
+              </span>
+              <span className="now-card__main">
+                <b>{t(`services.${now.serviceCode}.name`)}</b>
+                <span>{summary(now.serviceCode, now.params)}</span>
+              </span>
+              <Icon name="arrow" size={20} />
+            </span>
+            <span className="now-card__when">
+              <Icon name="clock" size={18} />
+              {dt(now.scheduledAt, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })}
+            </span>
+            <Timeline items={timeline(now)} compact />
+          </a>
+          {moreActive > 0 && (
+            <a href="#/orders" className="more-link">
+              {t('client.home.moreActive', { count: moreActive })}
+              <Icon name="arrow" size={16} />
+            </a>
+          )}
+        </section>
+      ) : (
+        <section className="empty-now">
+          <p>{t('client.home.noOrders')}</p>
+          <a href="#/order/cleaning" className="pill pill--dark">
+            <Icon name="plus" size={18} strokeWidth={2.6} />
+            {t('services.cleaning.name')}
+          </a>
+        </section>
       )}
 
-      {!plus && (
+      {toRate && (
+        <a href={`#/orders/${toRate.id}?rate=1`} className="rate-nudge">
+          <span>
+            <b>{t('client.rate.prompt')}</b>
+            <span>
+              {t(`services.${toRate.serviceCode}.name`)} · {dt(toRate.scheduledAt, { day: 'numeric', month: 'short' })}
+            </span>
+          </span>
+          <Stars value={0} size={22} />
+        </a>
+      )}
+
+      <section className="sect">
+        <div className="sect__head">
+          <h2 className="sect__title">{t('client.home.orderTitle')}</h2>
+          <a href="#/services" className="sect__link">
+            {t('client.nav.services')}
+          </a>
+        </div>
+        <div className="tiles">
+          {(catalog.data?.categories ?? []).map((c) => (
+            <a key={c.code} href={c.code === 'PERKS' ? '#/perks' : `#/services?c=${c.code}`} className={`tile ${toneClass(c.code)}`}>
+              <Icon name={CATEGORY_ICON[c.code as CategoryCode]} size={26} />
+              <span className="tile__title">{t(`categories.${c.code}.name`)}</span>
+              <span className="tile__note">{levelDiscount(level, c) > 0 ? t('client.services.yourDiscount', { pct: levelDiscount(level, c) }) : t(`categories.${c.code}.short`)}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      {level === 'BAREV' && (
         <a href="#/membership" className="upsell">
           <b>{t('client.home.upsellTitle', { pct: me.data?.plans.eliteMaxPct ?? 0 })}</b>
           <span className="bc-small">{t('client.home.upsellText')}</span>
         </a>
       )}
 
-      <Card style={{ padding: 16 }}>
-        <div className="bc-between" style={{ padding: '0 4px 8px' }}>
-          <h2 className="bc-h3">{t('client.home.myOrders')}</h2>
-          <a href="#/orders" className="bc-small bc-muted">
-            {t('client.home.allOrders')}
-          </a>
-        </div>
-        {orders.isPending ? (
-          <Spinner />
-        ) : orders.data && orders.data.active.length > 0 ? (
-          <div className="bc-stack" style={{ gap: 8 }}>
-            {orders.data.active.slice(0, 4).map((o) => (
-              <OrderRow key={o.id} o={o} />
-            ))}
-          </div>
-        ) : (
-          <div className="bc-stack" style={{ padding: '4px 4px 6px' }}>
-            <p className="bc-muted" style={{ margin: 0 }}>
-              {t('client.home.noOrders')}
-            </p>
-          </div>
-        )}
-      </Card>
-
-      <div className="quick">
-        <Chip onClick={() => navigate('/order/cleaning')}>
-          <Icon name="home" size={18} />
-          {t('services.cleaning.name')}
-        </Chip>
-        {lastDone && (
-          <Chip onClick={() => navigate(`/order/${lastDone.serviceCode}?repeat=${lastDone.id}`)}>
-            <Icon name="repeat" size={18} />
-            {t('client.home.repeatLast')}
-          </Chip>
-        )}
-        {!me.data?.agencyName && (
-          <Chip onClick={() => navigate('/profile?code=1')}>
-            <Icon name="gift" size={18} />
-            {t('client.home.enterCode')}
-          </Chip>
-        )}
-      </div>
-
-      <div className="tiles">
-        {(catalog.data?.categories ?? []).map((c) => (
-          <a key={c.code} href={c.code === 'PERKS' ? '#/perks' : `#/services?c=${c.code}`} className={`tile ${toneClass(c.code)}`}>
-            <div className="bc-between" style={{ alignItems: 'flex-start' }}>
-              <div className="tile__title">{t(`categories.${c.code}.name`)}</div>
-              <Icon name={CATEGORY_ICON[c.code as CategoryCode]} size={24} />
-            </div>
-            <div className="bc-small">
-              {levelDiscount(level, c) > 0 ? t('client.services.yourDiscount', { pct: levelDiscount(level, c) }) : t(`categories.${c.code}.short`)}
-            </div>
-          </a>
-        ))}
-      </div>
+      <a href="#/chat" className="chat-cta">
+        <span>
+          <b>{t('client.home.chatTitle')}</b>
+          <span>{t('client.home.chatText')}</span>
+        </span>
+        <span className="pill pill--green">
+          <Icon name="chat" size={18} />
+          {t('client.nav.chat')}
+        </span>
+      </a>
     </main>
   );
 }
diff --git a/apps/miniapp-client/src/screens/OrderDetail.tsx b/apps/miniapp-client/src/screens/OrderDetail.tsx
index 20c0cc8..d296af2 100644
--- a/apps/miniapp-client/src/screens/OrderDetail.tsx
+++ b/apps/miniapp-client/src/screens/OrderDetail.tsx
@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Button, Card, Center, Icon, Sheet, Spinner, Steps } from '@barev/ui';
-import { confirmDialog, dateKeyToDate, errorText, haptic, navigate, nextDays, paramsExtras, useI18n, useToast, useTRPC } from '@barev/web';
-import { useMemo, useState } from 'react';
-import { PageHead, toneClass, useParamsSummary } from '../lib.tsx';
+import { Button, Center, Icon, Sheet, Spinner } from '@barev/ui';
+import { confirmDialog, dateKeyToDate, errorText, haptic, navigate, nextDays, paramsExtras, useI18n, useLocation, useToast, useTRPC } from '@barev/web';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Stars, Timeline, toneClass, useOrderTimeline, useParamsSummary } from '../lib.tsx';
 
 export function OrderDetail({ id }: { id: string }) {
   const { t, amd, dt, locale } = useI18n();
@@ -10,6 +10,7 @@ export function OrderDetail({ id }: { id: string }) {
   const qc = useQueryClient();
   const toast = useToast();
   const summary = useParamsSummary();
+  const timeline = useOrderTimeline();
   const order = useQuery({ ...trpc.client.orders.get.queryOptions({ id }), refetchInterval: 15_000 });
   const preview = useQuery({ ...trpc.client.orders.cancelPreview.queryOptions({ id }), enabled: !!order.data?.active });
   const [reschedule, setReschedule] = useState(false);
@@ -32,22 +33,8 @@ export function OrderDetail({ id }: { id: string }) {
       </Center>
     );
   const o = order.data;
-
-  // шкала прогресса: пройденные статусы по истории, текущий, остальные
-  const passed = new Set(o.history.map((h) => h.to));
-  const currentIdx = o.steps.indexOf(o.status);
-  const steps =
-    o.status === 'CANCELLED'
-      ? [...o.steps.filter((s) => passed.has(s)).map((s) => ({ label: t(`status.${o.flow}.${s}`), state: 'done' as const })), { label: t(`status.${o.flow}.CANCELLED`), state: 'current' as const }]
-      : o.steps.map((s, i) => {
-          const at = o.history.find((h) => h.to === s && !h.event)?.at ?? o.history.find((h) => h.to === s)?.at;
-          return {
-            label: t(`status.${o.flow}.${s}`),
-            state: i < currentIdx ? ('done' as const) : i === currentIdx ? ('current' as const) : ('todo' as const),
-            meta: at && i <= currentIdx ? dt(at, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : undefined,
-          };
-        });
   const arrived = o.history.some((h) => h.event === 'arrived');
+  const extras = paramsExtras(t, o.params);
 
   async function onCancel() {
     const p = preview.data?.policy;
@@ -58,47 +45,63 @@ export function OrderDetail({ id }: { id: string }) {
 
   return (
     <main className="app app--plain">
-      <PageHead title={`#${o.number}`} />
+      <section className={`od-hero ${toneClass(o.category)}`}>
+        <div className="od-hero__bar">
+          <button className="back" onClick={() => window.history.back()} aria-label={t('common.back')}>
+            <Icon name="back" />
+          </button>
+          <span className="od-hero__num">#{o.number}</span>
+        </div>
+        <span className="od-hero__status" data-status={o.status === 'CANCELLED' ? 'cancelled' : o.active ? 'active' : 'done'}>
+          {t(`status.${o.flow}.${o.status}`)}
+          {arrived && o.status === 'EN_ROUTE' ? ` · ${t('client.detail.arrived')}` : ''}
+        </span>
+        <h1 className="od-hero__title">{t(`services.${o.serviceCode}.name`)}</h1>
+        <div className="od-hero__sub">
+          {summary(o.serviceCode, o.params)}
+          {extras.length > 0 && ` + ${extras.map((e) => e.label).join(', ')}`}
+        </div>
+      </section>
 
-      <Card className={toneClass(o.category)} style={{ padding: 20 }}>
-        <div className="bc-stack" style={{ gap: 8 }}>
-          <div className="bc-between" style={{ alignItems: 'flex-start' }}>
-            <h2 className="bc-h2">{t(`services.${o.serviceCode}.name`)}</h2>
-            <span className="bc-badge">{t(`status.${o.flow}.${o.status}`)}</span>
-          </div>
-          <div>{summary(o.serviceCode, o.params)}</div>
-          {paramsExtras(t, o.params).length > 0 && <div className="bc-small">+ {paramsExtras(t, o.params).map((e) => e.label).join(', ')}</div>}
-          <div className="bc-row" style={{ fontWeight: 600 }}>
+      <dl className="facts">
+        <div>
+          <dt>
             <Icon name="clock" size={18} />
-            {dt(o.scheduledAt, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })}
-          </div>
-          {o.addressText && (
-            <div className="bc-row">
+            {t('client.detail.when')}
+          </dt>
+          <dd>{dt(o.scheduledAt, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })}</dd>
+        </div>
+        {o.addressText && (
+          <div>
+            <dt>
               <Icon name="pin" size={18} />
+              {t('client.detail.where')}
+            </dt>
+            <dd>
               {o.districtCode ? `${t(`districts.${o.districtCode}`)}, ` : ''}
               {o.addressText}
-            </div>
-          )}
-          {o.providerName && (
-            <div className="bc-row">
-              <Icon name="user" size={18} />
-              {t(`client.detail.providerLabel.${o.flow}`)}: {o.providerName}
-              {arrived && o.status === 'EN_ROUTE' && <span className="bc-badge">{t('client.detail.arrived')}</span>}
-            </div>
-          )}
+            </dd>
+          </div>
+        )}
+        <div>
+          <dt>
+            <Icon name="user" size={18} />
+            {t(`client.detail.providerLabel.${o.flow}`)}
+          </dt>
+          <dd>{o.providerName ?? <span className="bc-muted">{t('client.detail.whoPending')}</span>}</dd>
         </div>
-      </Card>
+      </dl>
 
-      <Card>
-        <h2 className="bc-h3" style={{ marginBottom: 12 }}>
-          {t('client.detail.progress')}
-        </h2>
-        <Steps items={steps} />
-      </Card>
+      {o.done && <RateBlock id={o.id} rating={o.rating} />}
+
+      <section className="panel">
+        <h2 className="panel__title">{t('client.detail.progress')}</h2>
+        <Timeline items={timeline(o)} />
+      </section>
 
       {o.photos.length > 0 && <PhotoReport photos={o.photos} />}
 
-      <Card className="price-lines">
+      <section className="panel price-lines">
         <div className="bc-between">
           <span>{t('client.order.price')}</span>
           <span>{amd(o.basePrice)}</span>
@@ -123,16 +126,31 @@ export function OrderDetail({ id }: { id: string }) {
           {t(`payment.${o.paymentStatus}`)}
           {o.paymentMethod ? ` · ${o.paymentMethod.name[locale] || o.paymentMethod.name.ru}` : ''}
         </div>
-      </Card>
+      </section>
 
       {o.note && (
-        <Card tight>
+        <section className="panel">
           <div className="bc-small bc-muted">{t('client.order.note')}</div>
           <div>{o.note}</div>
-        </Card>
+        </section>
       )}
 
       <div className="bc-stack" style={{ gap: 8 }}>
+        {!o.active && o.status !== 'CANCELLED' && (
+          <Button variant="dark" block onClick={() => navigate(`/order/${o.serviceCode}?repeat=${o.id}`)}>
+            <Icon name="repeat" size={18} />
+            {t('client.detail.repeat')}
+          </Button>
+        )}
+        {o.status === 'CANCELLED' && (
+          <Button variant="dark" block onClick={() => navigate(`/order/${o.serviceCode}?repeat=${o.id}`)}>
+            {t('client.detail.orderAgain')}
+          </Button>
+        )}
+        <Button variant="light" block onClick={() => navigate('/chat')}>
+          <Icon name="chat" size={18} />
+          {t('client.detail.ask')}
+        </Button>
         {o.active && preview.data?.canReschedule && (
           <Button variant="light" block onClick={() => setReschedule(true)}>
             {t('client.detail.reschedule')}
@@ -148,17 +166,6 @@ export function OrderDetail({ id }: { id: string }) {
             {t('client.detail.viaOperator', { hours: preview.data.freeHours })}
           </p>
         )}
-        {!o.active && o.status !== 'CANCELLED' && (
-          <Button variant="dark" block onClick={() => navigate(`/order/${o.serviceCode}?repeat=${o.id}`)}>
-            <Icon name="repeat" size={18} />
-            {t('client.detail.repeat')}
-          </Button>
-        )}
-        {o.status === 'CANCELLED' && (
-          <Button variant="light" block onClick={() => navigate(`/order/${o.serviceCode}?repeat=${o.id}`)}>
-            {t('client.detail.orderAgain')}
-          </Button>
-        )}
       </div>
 
       <RescheduleSheet open={reschedule} onClose={() => setReschedule(false)} order={o} />
@@ -166,20 +173,76 @@ export function OrderDetail({ id }: { id: string }) {
   );
 }
 
+/** Оценка после выполнения: звёзды и комментарий; уже оценённый заказ показывает оценку с кнопкой «Изменить» */
+function RateBlock({ id, rating }: { id: string; rating: { score: number; comment: string | null } | null }) {
+  const { t } = useI18n();
+  const trpc = useTRPC();
+  const qc = useQueryClient();
+  const toast = useToast();
+  const { query } = useLocation();
+  const ref = useRef<HTMLElement>(null);
+  const [editing, setEditing] = useState(!rating);
+  const [score, setScore] = useState(rating?.score ?? 0);
+  const [comment, setComment] = useState(rating?.comment ?? '');
+  useEffect(() => {
+    if (query.get('rate') && ref.current) ref.current.scrollIntoView({ block: 'center' });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const rate = useMutation(
+    trpc.client.orders.rate.mutationOptions({
+      onSuccess: () => {
+        haptic.ok();
+        toast(t('client.rate.thanks'));
+        setEditing(false);
+        void qc.invalidateQueries({ queryKey: trpc.client.orders.pathKey() });
+      },
+      onError: (e) => toast(errorText(t, e), 'error'),
+    }),
+  );
+
+  if (!editing && rating)
+    return (
+      <section className="rate rate--done" ref={ref}>
+        <div className="bc-between">
+          <span className="rate__label">{t('client.rate.yours')}</span>
+          <button type="button" className="rate__change" onClick={() => setEditing(true)}>
+            {t('client.rate.change')}
+          </button>
+        </div>
+        <Stars value={rating.score} size={26} />
+        {rating.comment && <p className="rate__comment">{rating.comment}</p>}
+      </section>
+    );
+
+  return (
+    <section className="rate" ref={ref}>
+      <h2 className="rate__title">{t('client.rate.title')}</h2>
+      <p className="rate__text">{t('client.rate.text')}</p>
+      <Stars value={score} onChange={setScore} size={40} />
+      {score > 0 && (
+        <>
+          <textarea className="rate__input" rows={2} maxLength={1000} placeholder={t('client.rate.comment')} value={comment} onChange={(e) => setComment(e.target.value)} />
+          <button type="button" className="pill pill--pink pill--block" disabled={rate.isPending} onClick={() => rate.mutate({ id, score, comment: comment.trim() || undefined })}>
+            {t('client.rate.send')}
+          </button>
+        </>
+      )}
+    </section>
+  );
+}
+
 function PhotoReport({ photos }: { photos: { code: string; fileId: string }[] }) {
   const { t } = useI18n();
   const trpc = useTRPC();
   return (
-    <Card>
-      <h2 className="bc-h3" style={{ marginBottom: 10 }}>
-        {t('client.detail.photoReport')}
-      </h2>
+    <section className="panel">
+      <h2 className="panel__title">{t('client.detail.photoReport')}</h2>
       <div className="photos">
         {photos.map((p) => (
           <Photo key={p.fileId} fileId={p.fileId} alt={t(`checklist.${p.code}`)} trpc={trpc} />
         ))}
       </div>
-    </Card>
+    </section>
   );
 }
 
diff --git a/apps/miniapp-client/src/screens/Orders.tsx b/apps/miniapp-client/src/screens/Orders.tsx
index 9268336..674ca06 100644
--- a/apps/miniapp-client/src/screens/Orders.tsx
+++ b/apps/miniapp-client/src/screens/Orders.tsx
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { Center, LinkButton, Segmented, Spinner } from '@barev/ui';
+import { Center, Icon, Segmented, Spinner } from '@barev/ui';
 import { useI18n, useTRPC } from '@barev/web';
 import { useState } from 'react';
-import { OrderRow, PageHead } from '../lib.tsx';
+import { OrderRow } from '../lib.tsx';
 
 export function Orders() {
   const { t } = useI18n();
@@ -18,7 +18,12 @@ export function Orders() {
   const list = orders.data[tab];
   return (
     <main className="app">
-      <PageHead title={t('client.orders.title')} />
+      <header className="screen-head">
+        <h1 className="screen-head__title">{t('client.orders.title')}</h1>
+        <a href="#/services" className="pill pill--dark" aria-label={t('client.orders.order')}>
+          <Icon name="plus" size={18} strokeWidth={2.6} />
+        </a>
+      </header>
       <Segmented
         value={tab}
         onChange={setTab}
@@ -28,12 +33,14 @@ export function Orders() {
         ]}
       />
       {list.length === 0 ? (
-        <div className="bc-stack" style={{ alignItems: 'center', padding: 24 }}>
-          <p className="bc-muted">{t(tab === 'active' ? 'client.home.noOrders' : 'client.orders.noHistory')}</p>
-          <LinkButton href="#/services">{t('client.orders.order')}</LinkButton>
+        <div className="empty-now">
+          <p>{t(tab === 'active' ? 'client.home.noOrders' : 'client.orders.noHistory')}</p>
+          <a href="#/services" className="pill pill--dark">
+            {t('client.orders.order')}
+          </a>
         </div>
       ) : (
-        <div className="bc-stack" style={{ gap: 8 }}>
+        <div className="order-list">
           {list.map((o) => (
             <OrderRow key={o.id} o={o} />
           ))}
diff --git a/apps/miniapp-client/src/screens/Perks.tsx b/apps/miniapp-client/src/screens/Perks.tsx
index 62a5038..8ebdc10 100644
--- a/apps/miniapp-client/src/screens/Perks.tsx
+++ b/apps/miniapp-client/src/screens/Perks.tsx
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
-import { Card } from '@barev/ui';
+import { Card, Icon } from '@barev/ui';
 import { useI18n, useTRPC } from '@barev/web';
 import { useEffect, useState } from 'react';
-import { LEVEL_NAME, LEVEL_TONE, PageHead, type Level } from '../lib.tsx';
+import { LEVEL_NAME, type Level } from '../lib.tsx';
 import { Qr } from '../qr.tsx';
 
 /**
@@ -16,27 +16,33 @@ export function Perks() {
   const qr = useQuery({ ...trpc.client.cardQr.queryOptions(), refetchInterval: 20_000, refetchIntervalInBackground: false });
   const partners = useQuery(trpc.client.partners.queryOptions());
   const level = (me.data?.membership.level ?? 'BAREV') as Level;
-  const tone = LEVEL_TONE[level];
   const left = useSecondsLeft(qr.data?.expiresAt);
   const name = (l: Record<string, string>) => l[locale] || l.ru || '';
 
   return (
-    <main className="app">
-      <PageHead title={t('client.perks.title')} back={false} />
-      <section className="card-qr" style={{ background: level === 'BAREV' ? 'var(--bc-plum)' : tone.bg, color: level === 'BAREV' ? '#fff' : tone.ink }}>
-        <div className="card-qr__top">
-          <span>Barev Club · {LEVEL_NAME[level]}</span>
-          <b>{me.data?.firstName}</b>
-        </div>
-        <div className="card-qr__code">{qr.data ? <Qr value={qr.data.url} size={208} label={t('client.partners.qrLabel')} /> : <div style={{ width: 208, height: 208 }} />}</div>
-        <div className="card-qr__meta">
-          <span className="bc-num">{me.data?.cardCode}</span>
-          <span>{t('client.partners.qrRefresh', { seconds: left })}</span>
+    <main className="app app--hero">
+      <section className="hero hero--card">
+        <h1 className="hero__hello">{t('client.card.title')}</h1>
+        <div className="qr-card" data-plan={level === 'BAREV' ? 'free' : level === 'BAREV_PLUS' ? 'plus' : 'elite'}>
+          <div className="qr-card__top">
+            <span>Barev Club</span>
+            <b>{LEVEL_NAME[level]}</b>
+          </div>
+          <div className="qr-card__code">{qr.data ? <Qr value={qr.data.url} size={200} label={t('client.partners.qrLabel')} /> : <div style={{ width: 200, height: 200 }} />}</div>
+          <div className="qr-card__meta">
+            <span>
+              <b>{me.data?.firstName}</b> · <span className="bc-num">{me.data?.cardCode}</span>
+            </span>
+            <span className="qr-card__timer">{t('client.partners.qrRefresh', { seconds: left })}</span>
+          </div>
         </div>
+        <p className="hero__note">{t('client.partners.howTo')}</p>
+        <a href="#/membership" className="pill pill--pink">
+          {t('client.card.plans')}
+          <Icon name="arrow" size={18} />
+        </a>
       </section>
-      <p className="bc-small bc-muted" style={{ margin: 0 }}>
-        {t('client.partners.howTo')}
-      </p>
+      <h2 className="sect__title">{t('client.card.partners')}</h2>
       {partners.data?.length === 0 ? (
         <Card tone="perks" className="bc-stack">
           <h2 className="bc-h3">{t('client.perks.soonTitle')}</h2>
diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json
index 9350e93..f6bd19b 100644
--- a/packages/i18n/locales/en.json
+++ b/packages/i18n/locales/en.json
@@ -455,7 +455,10 @@
       "perks": "Perks",
       "profile": "Profile",
       "plan": "Plan",
-      "docs": "Documents"
+      "docs": "Documents",
+      "orders": "Orders",
+      "card": "Card",
+      "chat": "Chat"
     },
     "openInTelegram": {
       "title": "Open in Telegram",
@@ -480,7 +483,14 @@
       "discount": "−{{pct}}% with Barev+",
       "upsellTitle": "Up to −{{pct}}% with Barev Elite",
       "upsellText": "Cleaning, repairs, transfers, paperwork and partner gifts",
-      "levelUntil": "{{plan}} active until {{date}}"
+      "levelUntil": "{{plan}} active until {{date}}",
+      "now": "Now",
+      "moreActive": "More active: {{count}}",
+      "orderTitle": "Book a service",
+      "cardShow": "Show QR",
+      "free": "Free level",
+      "chatTitle": "Any question — ask in chat",
+      "chatText": "We reply in your language"
     },
     "services": {
       "title": "Services",
@@ -547,7 +557,13 @@
         "LANGUAGE": "Teacher",
         "CAREER": "Coach",
         "DOCUMENTS": "Specialist"
-      }
+      },
+      "when": "When",
+      "where": "Where",
+      "who": "Provider",
+      "whoPending": "being assigned",
+      "payment": "Payment",
+      "ask": "Question about this order"
     },
     "perks": {
       "title": "Perks",
@@ -670,6 +686,22 @@
       "team": "Barev Club",
       "fileTooBig": "The file is larger than 10 MB",
       "file": "File"
+    },
+    "rate": {
+      "title": "How did it go?",
+      "text": "Your rating helps us keep the quality high",
+      "comment": "Comment — optional",
+      "send": "Rate",
+      "thanks": "Thanks for your rating!",
+      "yours": "Your rating",
+      "change": "Change",
+      "star": "{{count}} of 5",
+      "prompt": "Rate your order"
+    },
+    "card": {
+      "title": "Club card",
+      "partners": "Club partners",
+      "plans": "Levels and discounts"
     }
   },
   "pro": {
diff --git a/packages/i18n/locales/es.json b/packages/i18n/locales/es.json
index 81bd5aa..bc583aa 100644
--- a/packages/i18n/locales/es.json
+++ b/packages/i18n/locales/es.json
@@ -455,7 +455,10 @@
       "perks": "Descuentos",
       "profile": "Perfil",
       "plan": "Plan",
-      "docs": "Documentos"
+      "docs": "Documentos",
+      "orders": "Pedidos",
+      "card": "Tarjeta",
+      "chat": "Chat"
     },
     "openInTelegram": {
       "title": "Abre en Telegram",
@@ -480,7 +483,14 @@
       "discount": "−{{pct}}% con Barev+",
       "upsellTitle": "Hasta −{{pct}}% con Barev Elite",
       "upsellText": "Limpieza, reparaciones, traslados, trámites y regalos de socios",
-      "levelUntil": "{{plan}} activo hasta el {{date}}"
+      "levelUntil": "{{plan}} activo hasta el {{date}}",
+      "now": "Ahora",
+      "moreActive": "Más activos: {{count}}",
+      "orderTitle": "Reservar",
+      "cardShow": "Mostrar QR",
+      "free": "Nivel gratuito",
+      "chatTitle": "Cualquier pregunta, al chat",
+      "chatText": "Respondemos en tu idioma"
     },
     "services": {
       "title": "Servicios",
@@ -547,7 +557,13 @@
         "LANGUAGE": "Profesor/a",
         "CAREER": "Asesor",
         "DOCUMENTS": "Especialista"
-      }
+      },
+      "when": "Cuándo",
+      "where": "Dónde",
+      "who": "Profesional",
+      "whoPending": "asignando",
+      "payment": "Pago",
+      "ask": "Pregunta sobre el pedido"
     },
     "perks": {
       "title": "Descuentos",
@@ -670,6 +686,22 @@
       "team": "Barev Club",
       "fileTooBig": "El archivo supera los 10 MB",
       "file": "Archivo"
+    },
+    "rate": {
+      "title": "¿Qué tal fue?",
+      "text": "Tu valoración nos ayuda a cuidar la calidad",
+      "comment": "Comentario (opcional)",
+      "send": "Valorar",
+      "thanks": "¡Gracias por tu valoración!",
+      "yours": "Tu valoración",
+      "change": "Cambiar",
+      "star": "{{count}} de 5",
+      "prompt": "Valora tu pedido"
+    },
+    "card": {
+      "title": "Tarjeta del club",
+      "partners": "Socios del club",
+      "plans": "Niveles y descuentos"
     }
   },
   "pro": {
diff --git a/packages/i18n/locales/hy.json b/packages/i18n/locales/hy.json
index 2aaad81..e588a33 100644
--- a/packages/i18n/locales/hy.json
+++ b/packages/i18n/locales/hy.json
@@ -455,7 +455,10 @@
       "perks": "Զեղչեր",
       "profile": "Պրոֆիլ",
       "plan": "Պլան",
-      "docs": "Փաստաթղթեր"
+      "docs": "Փաստաթղթեր",
+      "orders": "Պատվերներ",
+      "card": "Քարտ",
+      "chat": "Չատ"
     },
     "openInTelegram": {
       "title": "Բացեք Telegram-ում",
@@ -480,7 +483,14 @@
       "discount": "−{{pct}}% Barev+-ով",
       "upsellTitle": "Մինչև −{{pct}}% Barev Elite-ով",
       "upsellText": "Մաքրում, վերանորոգում, տրանսֆեր, փաստաթղթեր և նվերներ գործընկերներից",
-      "levelUntil": "{{plan}}-ը գործում է մինչև {{date}}"
+      "levelUntil": "{{plan}}-ը գործում է մինչև {{date}}",
+      "now": "Հիմա",
+      "moreActive": "Եվս ակտիվ՝ {{count}}",
+      "orderTitle": "Պատվիրել",
+      "cardShow": "Ցույց տալ QR",
+      "free": "Անվճար մակարդակ",
+      "chatTitle": "Ցանկացած հարց՝ չատում",
+      "chatText": "Կպատասխանենք ձեր լեզվով"
     },
     "services": {
       "title": "Ծառայություններ",
@@ -547,7 +557,13 @@
         "LANGUAGE": "Դասավանդող",
         "CAREER": "Խորհրդատու",
         "DOCUMENTS": "Մասնագետ"
-      }
+      },
+      "when": "Երբ",
+      "where": "Որտեղ",
+      "who": "Կատարող",
+      "whoPending": "ընտրում ենք",
+      "payment": "Վճարում",
+      "ask": "Հարց պատվերի վերաբերյալ"
     },
     "perks": {
       "title": "Զեղչեր",
@@ -670,6 +686,22 @@
       "team": "Barev Club",
       "fileTooBig": "Ֆայլը 10 ՄԲ-ից մեծ է",
       "file": "Ֆայլ"
+    },
+    "rate": {
+      "title": "Ինչպե՞ս անցավ",
+      "text": "Գնահատականը կօգնի մեզ հետևել որակին",
+      "comment": "Մեկնաբանություն՝ ըստ ցանկության",
+      "send": "Գնահատել",
+      "thanks": "Շնորհակալություն գնահատականի համար",
+      "yours": "Ձեր գնահատականը",
+      "change": "Փոխել",
+      "star": "{{count}}՝ 5-ից",
+      "prompt": "Գնահատեք պատվերը"
+    },
+    "card": {
+      "title": "Ակումբային քարտ",
+      "partners": "Ակումբի գործընկերներ",
+      "plans": "Մակարդակներ և զեղչեր"
     }
   },
   "pro": {
diff --git a/packages/i18n/locales/ru.json b/packages/i18n/locales/ru.json
index 6c3af7b..331809d 100644
--- a/packages/i18n/locales/ru.json
+++ b/packages/i18n/locales/ru.json
@@ -455,7 +455,10 @@
       "perks": "Скидки",
       "profile": "Профиль",
       "plan": "План",
-      "docs": "Документы"
+      "docs": "Документы",
+      "orders": "Заказы",
+      "card": "Карта",
+      "chat": "Чат"
     },
     "openInTelegram": {
       "title": "Открой в Telegram",
@@ -480,7 +483,14 @@
       "discount": "−{{pct}}% с Barev+",
       "upsellTitle": "Скидки до −{{pct}}% с Barev Elite",
       "upsellText": "Клининг, ремонт, трансфер, документы и подарки партнёров",
-      "levelUntil": "{{plan}} активен до {{date}}"
+      "levelUntil": "{{plan}} активен до {{date}}",
+      "now": "Сейчас",
+      "moreActive": "Ещё активных: {{count}}",
+      "orderTitle": "Заказать",
+      "cardShow": "Показать QR",
+      "free": "Бесплатный уровень",
+      "chatTitle": "Любой вопрос — в чат",
+      "chatText": "Ответим на вашем языке"
     },
     "services": {
       "title": "Услуги",
@@ -547,7 +557,13 @@
         "LANGUAGE": "Преподаватель",
         "CAREER": "Консультант",
         "DOCUMENTS": "Специалист"
-      }
+      },
+      "when": "Когда",
+      "where": "Где",
+      "who": "Исполнитель",
+      "whoPending": "подбираем",
+      "payment": "Оплата",
+      "ask": "Вопрос по заказу"
     },
     "perks": {
       "title": "Скидки",
@@ -670,6 +686,22 @@
       "team": "Barev Club",
       "fileTooBig": "Файл больше 10 МБ",
       "file": "Файл"
+    },
+    "rate": {
+      "title": "Как всё прошло?",
+      "text": "Оценка поможет нам следить за качеством",
+      "comment": "Комментарий — по желанию",
+      "send": "Оценить",
+      "thanks": "Спасибо за оценку!",
+      "yours": "Ваша оценка",
+      "change": "Изменить",
+      "star": "{{count}} из 5",
+      "prompt": "Оцените заказ"
+    },
+    "card": {
+      "title": "Клубная карта",
+      "partners": "Партнёры клуба",
+      "plans": "Уровни и скидки"
     }
   },
   "pro": {
diff --git a/packages/i18n/locales/zh.json b/packages/i18n/locales/zh.json
index 4b06d44..a1d8f42 100644
--- a/packages/i18n/locales/zh.json
+++ b/packages/i18n/locales/zh.json
@@ -455,7 +455,10 @@
       "perks": "折扣",
       "profile": "我的",
       "plan": "计划",
-      "docs": "证件"
+      "docs": "证件",
+      "orders": "订单",
+      "card": "会员卡",
+      "chat": "聊天"
     },
     "openInTelegram": {
       "title": "请在 Telegram 中打开",
@@ -480,7 +483,14 @@
       "discount": "Barev+ 享 −{{pct}}%",
       "upsellTitle": "Barev Elite 最高 −{{pct}}%",
       "upsellText": "保洁、维修、接送、证件和合作伙伴礼品",
-      "levelUntil": "{{plan}} 有效期至 {{date}}"
+      "levelUntil": "{{plan}} 有效期至 {{date}}",
+      "now": "进行中",
+      "moreActive": "其他进行中：{{count}}",
+      "orderTitle": "预订服务",
+      "cardShow": "出示二维码",
+      "free": "免费等级",
+      "chatTitle": "有任何问题，请在聊天中提问",
+      "chatText": "我们用您的语言回复"
     },
     "services": {
       "title": "服务",
@@ -547,7 +557,13 @@
         "LANGUAGE": "老师",
         "CAREER": "顾问",
         "DOCUMENTS": "专员"
-      }
+      },
+      "when": "时间",
+      "where": "地点",
+      "who": "服务人员",
+      "whoPending": "正在分配",
+      "payment": "付款",
+      "ask": "关于此订单的问题"
     },
     "perks": {
       "title": "折扣",
@@ -670,6 +686,22 @@
       "team": "Barev Club",
       "fileTooBig": "文件超过 10 MB",
       "file": "文件"
+    },
+    "rate": {
+      "title": "服务体验如何？",
+      "text": "您的评价帮助我们保证服务质量",
+      "comment": "评论（可选）",
+      "send": "提交评价",
+      "thanks": "感谢您的评价！",
+      "yours": "您的评价",
+      "change": "修改",
+      "star": "{{count}} / 5",
+      "prompt": "请评价订单"
+    },
+    "card": {
+      "title": "俱乐部会员卡",
+      "partners": "俱乐部合作伙伴",
+      "plans": "等级与折扣"
     }
   },
   "pro": {
diff --git a/packages/services/src/index.ts b/packages/services/src/index.ts
index 365a607..9541cf1 100644
--- a/packages/services/src/index.ts
+++ b/packages/services/src/index.ts
@@ -19,3 +19,4 @@ export * from './sales.ts';
 export * from './texts.ts';
 export * from './promo.ts';
 export * from './partners.ts';
+export * from './ratings.ts';
diff --git a/packages/services/src/queries.ts b/packages/services/src/queries.ts
index ce3bee5..8f4bf77 100644
--- a/packages/services/src/queries.ts
+++ b/packages/services/src/queries.ts
@@ -12,6 +12,7 @@ const clientOrderInclude = {
   history: { orderBy: { createdAt: 'asc' } },
   checklist: { orderBy: { sortOrder: 'asc' } },
   paymentMethod: true,
+  rating: { select: { score: true, comment: true } },
 } satisfies Prisma.OrderInclude;
 
 type ClientOrderRow = Prisma.OrderGetPayload<{ include: typeof clientOrderInclude }>;
@@ -27,6 +28,9 @@ function clientOrderView(o: ClientOrderRow) {
     flow,
     status: o.status,
     active: !isTerminal(flow, o.status),
+    /** заказ выполнен — можно оценить */
+    done: getFlow(flow).done.includes(o.status),
+    rating: o.rating,
     scheduledAt: o.scheduledAt,
     durationMinutes: o.durationMinutes,
     isOnline: o.isOnline,
diff --git a/packages/services/src/ratings.ts b/packages/services/src/ratings.ts
new file mode 100644
index 0000000..1ff88a1
--- /dev/null
+++ b/packages/services/src/ratings.ts
@@ -0,0 +1,29 @@
+import { getFlow, type ServiceFlow } from '@barev/core';
+import { DomainError, type Ctx } from './context.ts';
+
+/**
+ * Оценка клиента после выполненного заказа: 1–5 звёзд и комментарий.
+ * Повторная оценка заменяет прежнюю; рейтинг исполнителя (ratingSum/ratingCount) пересчитывается.
+ */
+export async function rateOrder(ctx: Ctx, input: { orderId: string; clientId: string; score: number; comment?: string | null }) {
+  const score = Math.round(input.score);
+  if (score < 1 || score > 5) throw new DomainError('INVALID_PARAMS');
+  const comment = input.comment?.trim() || null;
+  return ctx.db.$transaction(async (tx) => {
+    const order = await tx.order.findUnique({ where: { id: input.orderId }, include: { service: true, rating: true } });
+    if (!order || order.clientId !== input.clientId) throw new DomainError('NOT_FOUND');
+    if (!getFlow(order.service.flow as ServiceFlow).done.includes(order.status)) throw new DomainError('TRANSITION_NOT_ALLOWED');
+    const prev = order.rating;
+    const providerId = prev?.providerId ?? order.providerId;
+    const rating = prev
+      ? await tx.rating.update({ where: { id: prev.id }, data: { score, comment } })
+      : await tx.rating.create({ data: { orderId: order.id, clientId: input.clientId, providerId, score, comment } });
+    if (providerId) {
+      await tx.provider.update({
+        where: { id: providerId },
+        data: prev ? { ratingSum: { increment: score - prev.score } } : { ratingSum: { increment: score }, ratingCount: { increment: 1 } },
+      });
+    }
+    return { score: rating.score, comment: rating.comment };
+  });
+}
diff --git a/packages/services/test/ratings.test.ts b/packages/services/test/ratings.test.ts
new file mode 100644
index 0000000..6d5c518
--- /dev/null
+++ b/packages/services/test/ratings.test.ts
@@ -0,0 +1,38 @@
+import { afterAll, beforeEach, describe, expect, it } from 'vitest';
+import { createOrder, DomainError, giveConsent, rateOrder, startClient } from '../src/index.ts';
+import { db, fixtures, makeCtx, NOW, slotAt, tgUser } from './helpers.ts';
+
+let fx: Awaited<ReturnType<typeof fixtures>>;
+beforeEach(async () => {
+  fx = await fixtures();
+});
+afterAll(() => db.$disconnect());
+
+const code = (p: Promise<unknown>) => p.then(() => null, (e: unknown) => (e instanceof DomainError ? e.code : String(e)));
+
+describe('оценка заказа клиентом', () => {
+  it('только после выполнения; повторная оценка заменяет прежнюю и пересчитывает рейтинг исполнителя', async () => {
+    const { ctx } = makeCtx(NOW);
+    const s = await startClient(ctx, tgUser(901));
+    await giveConsent(ctx, s.clientId);
+    const o = await createOrder(ctx, { clientId: s.clientId, serviceCode: 'cleaning', params: { cleaningType: 'regular', rooms: 2 }, scheduledAt: slotAt(2, 11), addressText: 'Pushkin 10', districtId: fx.kentron.id });
+    await db.order.update({ where: { id: o.id }, data: { providerId: fx.maria.id } });
+    const before = await db.provider.findUniqueOrThrow({ where: { id: fx.maria.id } });
+
+    expect(await code(rateOrder(ctx, { orderId: o.id, clientId: s.clientId, score: 5 }))).toBe('TRANSITION_NOT_ALLOWED');
+
+    await db.order.update({ where: { id: o.id }, data: { status: 'DONE' } });
+    const other = await startClient(ctx, tgUser(902));
+    expect(await code(rateOrder(ctx, { orderId: o.id, clientId: other.clientId, score: 5 }))).toBe('NOT_FOUND');
+    expect(await code(rateOrder(ctx, { orderId: o.id, clientId: s.clientId, score: 7 }))).toBe('INVALID_PARAMS');
+
+    expect(await rateOrder(ctx, { orderId: o.id, clientId: s.clientId, score: 3, comment: '  поздно пришла ' })).toEqual({ score: 3, comment: 'поздно пришла' });
+    let p = await db.provider.findUniqueOrThrow({ where: { id: fx.maria.id } });
+    expect([p.ratingSum - before.ratingSum, p.ratingCount - before.ratingCount]).toEqual([3, 1]);
+
+    await rateOrder(ctx, { orderId: o.id, clientId: s.clientId, score: 5 });
+    p = await db.provider.findUniqueOrThrow({ where: { id: fx.maria.id } });
+    expect([p.ratingSum - before.ratingSum, p.ratingCount - before.ratingCount]).toEqual([5, 1]);
+    expect(await db.rating.count({ where: { orderId: o.id } })).toBe(1);
+  });
+});