Aura CRM — панель управления

+ {stage.label} +

+ {stage.count} + + {Number(stage.revenue) > 0 ? money(stage.revenue) : '—'} + +

+ ) +} + +const DashboardPage = () => { + const { data, loading, error, refetch } = useDashboard() + const [selectedOrder, setSelectedOrder] = useState(null) + + if (loading && !data) return

Загрузка...

+ if (error) return

{error}

+ if (!data) return null + + const maxCount = Math.max(1, ...data.funnel.map((s) => s.count)) + const debt = Number(data.client_debt_total) + + return ( +

Главная

+ +

+ + {debt > 0 && ( +

+ Долг клиентов: {money(debt)} + + Клиенты + +

+ )} + +

+ + + + + 0 ? 'var(--accent-orange)' : undefined} /> + {data.pending_discount_count > 0 && ( + + )} +

+ + {(data.stale_orders?.length > 0 || data.master_workload?.length > 0) && ( +

+ {data.stale_orders?.length > 0 && ( +

Давно без движения

+ {data.stale_orders.map((o) => ( + + ))} +

+ )} + {data.master_workload?.length > 0 && ( +

Загрузка мастеров

+ {data.master_workload.map((w) => ( +

+ {w.master_name} + {w.count} +

+ ))} +

+ )} +

+ )} + +

Аналитика →}> +

Приход

{money(data.month.income)}

Расход

{money(data.month.expense)}

Прибыль

{money(data.month.profit)}

+ +

+ {data.funnel.every((s) => s.count === 0) ? ( +

Заказов пока нет

+ ) : ( + data.funnel.map((stage) => ) + )} +

+ +

Все →}> + {data.recent_orders.length === 0 ? ( +

Заказов пока нет

+ ) : ( +

+ {data.recent_orders.map((o) => ( +

+ {o.order_number || '—'} + {o.device_label} + {o.client_name} + + {o.status_label} + +

+ ))} +

+ )} +

+ + {selectedOrder && ( + { setSelectedOrder(null); refetch() }} + /> + )} +

+ ) +} + +export default DashboardPage diff --git a/production/web/src/analytics/ShopAnalyticsPage.jsx b/production/web/src/analytics/ShopAnalyticsPage.jsx new file mode 100644 index 0000000..ff9249e --- /dev/null +++ b/production/web/src/analytics/ShopAnalyticsPage.jsx @@ -0,0 +1,114 @@ +import { useState } from 'react' +import { useShopAnalytics } from './useShopAnalytics' +import LineChart from './charts/LineChart' +import BarChart from './charts/BarChart' +import { inputStyle, labelStyle } from '../orders/formStyles' + +const selectStyle = { ...inputStyle, width: 'auto', padding: '10px 14px' } +const money = (v) => `${Number(v).toLocaleString('ru-RU')} ₽` + +function SummaryTile({ label, value }) { + return ( +

{label}

{value}

+ ) +} + +function Section({ title, children }) { + return ( +

{title}

+ {children} +

+ ) +} + +// Owner/manager view of the "Магазин" side only — everything here is +// already scoped server-side to POS checkouts (cash_transactions.sale_id / +// stock_movements type='sale'), so these numbers never overlap with the +// service side's /analytics page. +const ShopAnalyticsPage = () => { + const [from, setFrom] = useState('') + const [to, setTo] = useState('') + const [interval, setInterval] = useState('day') + const { shop, loading, error } = useShopAnalytics({ from, to, interval }) + + const totals = (shop?.revenue || []).reduce( + (acc, b) => ({ income: acc.income + Number(b.income), sales: acc.sales + Number(b.sales) }), + { income: 0, sales: 0 }, + ) + const avgTicket = totals.sales > 0 ? totals.income / totals.sales : 0 + + const revenueSeries = [ + { name: 'Выручка', color: 'var(--color-shop-accent-fg)', points: (shop?.revenue || []).map((b) => ({ x: b.bucket, y: Number(b.income) })) }, + ] + const salesSeries = [ + { name: 'Продажи', color: 'var(--color-shop-accent-fg)', points: (shop?.revenue || []).map((b) => ({ x: b.bucket, y: b.sales })) }, + ] + const formatBucket = (b) => new Date(b).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }) + + return ( +

+ С + setFrom(e.target.value)} style={selectStyle} /> +

+ По + setTo(e.target.value)} style={selectStyle} /> +

+ Группировка + +

+ + {loading ? ( +

Загрузка...

+ ) : error ? ( +

{error}

+ ) : ( + <> +

+ + + +

+ +

+ money(v)} formatX={formatBucket} /> +

+ v} formatX={formatBucket} /> +

+ +

+ ({ label: c.category, value: c.qty }))} + barColor={() => 'var(--color-shop-accent)'} + /> +

+ ({ label: p.name, value: p.qty }))} + barColor={() => 'var(--color-shop-accent)'} + /> +

+ + )} +

+ ) +} + +export default ShopAnalyticsPage diff --git a/production/web/src/analytics/charts/BarChart.jsx b/production/web/src/analytics/charts/BarChart.jsx new file mode 100644 index 0000000..9474429 --- /dev/null +++ b/production/web/src/analytics/charts/BarChart.jsx @@ -0,0 +1,57 @@ +// Horizontal bar list, plain inline SVG. One measure per row (a ranked +// breakdown like "orders by device type") — per dataviz's form guidance, +// a single-measure ranked bar chart uses one consistent hue for every bar; +// distinct colors per bar are for genuinely different *series*, not +// different values of the same dimension. barColor defaults to the app's +// primary accent; pass a lookup function instead when bars map to an +// existing color convention (e.g. order status colors from the Kanban). +const BAR_HEIGHT = 20 +const BAR_GAP = 10 + +// Label sits above its bar rather than beside it — a fixed-width label +// column (the usual layout for this pattern) squeezes the bar itself down +// to near-nothing once the chart sits in a narrow card (this component +// lives in 2-3-column dashboard grids, not a full-width page), since the +// label+value columns' fixed pixel widths eat most of a narrow container +// before the bar gets anything. Stacking avoids that entirely — the bar +// always gets the card's full width. +const BarChart = ({ data, barColor = () => 'var(--accent-blue)', formatValue = (v) => v }) => { + if (!data || data.length === 0) { + return

Нет данных за период

+ } + + const max = Math.max(1, ...data.map((d) => d.value)) + + return ( +

+ {data.map((d) => { + const pct = (d.value / max) * 100 + return ( +

+ + {d.label} + + + {formatValue(d.value)} + +

+ ) + })} +

+ ) +} + +export default BarChart diff --git a/production/web/src/analytics/charts/LineChart.jsx b/production/web/src/analytics/charts/LineChart.jsx new file mode 100644 index 0000000..8358fd2 --- /dev/null +++ b/production/web/src/analytics/charts/LineChart.jsx @@ -0,0 +1,75 @@ +// Generic multi-series line chart, plain inline SVG (no charting lib in +// this project). Follows dataviz skill mark specs: 2px round-cap/join +// lines, ~10% opacity area wash, end markers (r=4, 2px surface ring), +// hairline gridlines, direct end-labels, a legend only when there's more +// than one series (a single series is already named by the chart title). +// One shared y-axis always — never render two differently-scaled series on +// the same chart (see dataviz's "one axis" rule); render separate charts +// for separate units instead. +const WIDTH = 560 +const HEIGHT = 200 +const PAD = { top: 12, right: 16, bottom: 24, left: 44 } + +const LineChart = ({ series, formatY = (v) => v, formatX = (v) => v }) => { + const points = series[0]?.points || [] + if (points.length === 0) { + return

Нет данных за период

+ } + + const allValues = series.flatMap((s) => s.points.map((p) => p.y)) + const maxY = Math.max(1, ...allValues) + const plotW = WIDTH - PAD.left - PAD.right + const plotH = HEIGHT - PAD.top - PAD.bottom + + const xAt = (i) => PAD.left + (points.length === 1 ? plotW / 2 : (i / (points.length - 1)) * plotW) + const yAt = (v) => PAD.top + plotH - (v / maxY) * plotH + + const gridLines = [0, 0.5, 1].map((t) => PAD.top + plotH * (1 - t)) + + return ( +

+ + {series.length > 1 && ( +

+ {series.map((s) => ( + + + {s.name} + + ))} +

+ )} +

+ ) +} + +export default LineChart diff --git a/production/web/src/analytics/useAnalytics.js b/production/web/src/analytics/useAnalytics.js new file mode 100644 index 0000000..a0e8e70 --- /dev/null +++ b/production/web/src/analytics/useAnalytics.js @@ -0,0 +1,40 @@ +import { useState, useEffect, useCallback } from 'react' +import * as api from '../lib/api' +import { exclusiveEndDate } from '../lib/dateRange' + +// Revenue/operations/inventory load together on every filter change; the AI +// summary is a separate on-demand Gemini call (see AISummaryPanel) so +// changing the date range never silently re-triggers an LLM request. +export function useAnalytics({ from, to, interval }) { + const [revenue, setRevenue] = useState(null) + const [operations, setOperations] = useState(null) + const [inventory, setInventory] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + const fetchAll = useCallback(async () => { + setLoading(true) + try { + const toExclusive = exclusiveEndDate(to) + const [rev, ops, inv] = await Promise.all([ + api.analytics.revenue({ from, to: toExclusive, interval }), + api.analytics.operations({ from, to: toExclusive }), + api.analytics.inventory({ from, to: toExclusive }), + ]) + setRevenue(rev) + setOperations(ops) + setInventory(inv) + setError(null) + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + }, [from, to, interval]) + + useEffect(() => { + (async () => { await fetchAll() })() + }, [fetchAll]) + + return { revenue, operations, inventory, loading, error, refetch: fetchAll } +} diff --git a/production/web/src/analytics/useDashboard.js b/production/web/src/analytics/useDashboard.js new file mode 100644 index 0000000..b3067aa --- /dev/null +++ b/production/web/src/analytics/useDashboard.js @@ -0,0 +1,39 @@ +import { useState, useEffect, useCallback } from 'react' +import * as api from '../lib/api' +import { subscribeRealtime } from '../lib/realtime' + +// Same realtime-push-plus-fallback-poll shape as orders/useOrders.js — the +// dashboard's numbers are driven mostly by order state, so an "orders" +// broadcast is reason enough to refetch the whole snapshot rather than +// trying to patch individual tiles. +const FALLBACK_POLL_MS = 120000 + +export function useDashboard() { + const [data, setData] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + const fetchDashboard = useCallback(async () => { + try { + const result = await api.analytics.dashboard() + setData(result) + setError(null) + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + }, []) + + useEffect(() => { + (async () => { await fetchDashboard() })() + + const unsubscribe = subscribeRealtime((topic) => { + if (topic === 'orders') fetchDashboard() + }) + const interval = setInterval(fetchDashboard, FALLBACK_POLL_MS) + return () => { unsubscribe(); clearInterval(interval) } + }, [fetchDashboard]) + + return { data, loading, error, refetch: fetchDashboard } +} diff --git a/production/web/src/analytics/useShopAnalytics.js b/production/web/src/analytics/useShopAnalytics.js new file mode 100644 index 0000000..00630e2 --- /dev/null +++ b/production/web/src/analytics/useShopAnalytics.js @@ -0,0 +1,28 @@ +import { useState, useEffect, useCallback } from 'react' +import * as api from '../lib/api' +import { exclusiveEndDate } from '../lib/dateRange' + +export function useShopAnalytics({ from, to, interval }) { + const [shop, setShop] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + + const fetchAll = useCallback(async () => { + setLoading(true) + try { + const data = await api.analytics.shop({ from, to: exclusiveEndDate(to), interval }) + setShop(data) + setError(null) + } catch (err) { + setError(err.message) + } finally { + setLoading(false) + } + }, [from, to, interval]) + + useEffect(() => { + (async () => { await fetchAll() })() + }, [fetchAll]) + + return { shop, loading, error, refetch: fetchAll } +} diff --git a/production/web/src/auth/AuthContext.jsx b/production/web/src/auth/AuthContext.jsx new file mode 100644 index 0000000..178cc46 --- /dev/null +++ b/production/web/src/auth/AuthContext.jsx @@ -0,0 +1,42 @@ +import { createContext, useContext, useState, useCallback } from 'react' +import * as api from '../lib/api' + +const AuthContext = createContext(null) + +export function AuthProvider({ children }) { + const [staff, setStaff] = useState(() => api.getStaff()) + + const login = useCallback(async (email, password) => { + try { + const data = await api.login(email, password) + api.setSession(data.access_token, data.staff) + setStaff(data.staff) + return { error: null } + } catch (err) { + return { error: err.message } + } + }, []) + + const logout = useCallback(() => { + api.clearSession() + setStaff(null) + }, []) + + return ( + + {children} + + ) +} + +// Auth is cross-cutting, read by many components (Sidebar, ProtectedRoute, +// order/comment authorship) — Context per the team's React state guidelines, +// not a bare hook that would fork state per call site. Co-locating the +// consumer hook with the Provider (same pattern as Glass's ToastContext) is +// the standard React shape; it costs a Fast Refresh granularity warning. +// eslint-disable-next-line react-refresh/only-export-components +export function useAuth() { + const ctx = useContext(AuthContext) + if (!ctx) throw new Error('useAuth must be used within AuthProvider') + return ctx +} diff --git a/production/web/src/auth/LoginPage.jsx b/production/web/src/auth/LoginPage.jsx new file mode 100644 index 0000000..5a1ced6 --- /dev/null +++ b/production/web/src/auth/LoginPage.jsx @@ -0,0 +1,120 @@ +import { useState } from 'react' +import { useNavigate, useLocation } from 'react-router-dom' +import { Wrench } from 'lucide-react' +import { useAuth } from './AuthContext' + +const LoginPage = () => { + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [error, setError] = useState('') + const [submitting, setSubmitting] = useState(false) + // Remounts .shake-once on every failed attempt (not just the first) — + // React won't replay a CSS animation on an element that's already mounted + // with the same className, so the key has to change each time to force it. + const [shakeKey, setShakeKey] = useState(0) + const { login } = useAuth() + const navigate = useNavigate() + const location = useLocation() + const from = location.state?.from?.pathname || '/kanban' + + const handleSubmit = async (e) => { + e.preventDefault() + setSubmitting(true) + setError('') + const { error } = await login(email, password) + if (error) { + setError('Неверный email или пароль') + setSubmitting(false) + setShakeKey((k) => k + 1) + } else { + navigate(from, { replace: true }) + } + } + + const inputStyle = { + width: '100%', padding: '14px 16px', + background: 'var(--color-surface-sunken)', + border: '1.5px solid var(--color-border)', + borderRadius: '9px', + color: 'var(--color-text)', + fontSize: '1rem', + outline: 'none', + fontFamily: 'var(--font-body)', + boxSizing: 'border-box', + transition: 'border-color 0.15s ease, box-shadow 0.15s ease', + } + + const labelStyle = { + display: 'block', marginBottom: '8px', + fontSize: '0.76rem', fontWeight: 590, + color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', + } + + return ( +

0 ? ' shake-once' : ''}`} style={{ padding: '52px 46px', width: '100%', maxWidth: '420px', margin: '20px' }}> +

+ + + + + Aura CRM + +

+ +

+ Вход в панель +

+ + +

+ ) +} + +export default LoginPage diff --git a/production/web/src/auth/ProtectedRoute.jsx b/production/web/src/auth/ProtectedRoute.jsx new file mode 100644 index 0000000..aa56bd2 --- /dev/null +++ b/production/web/src/auth/ProtectedRoute.jsx @@ -0,0 +1,15 @@ +import { Navigate, Outlet, useLocation } from 'react-router-dom' +import { useAuth } from './AuthContext' + +const ProtectedRoute = () => { + const { staff } = useAuth() + const location = useLocation() + + if (!staff) { + return + } + + return +} + +export default ProtectedRoute diff --git a/production/web/src/bookings/BookingsPage.jsx b/production/web/src/bookings/BookingsPage.jsx new file mode 100644 index 0000000..c5e0da5 --- /dev/null +++ b/production/web/src/bookings/BookingsPage.jsx @@ -0,0 +1,172 @@ +import { useState } from 'react' +import { Check, X, Phone, MapPin, Plus } from 'lucide-react' +import * as api from '../lib/api' +import { useBookings } from './useBookings' +import { inputStyle } from '../orders/formStyles' +import NewOnsiteBookingModal from './NewOnsiteBookingModal' +import { STATUS_LABELS, STATUS_COLORS } from './statuses' + +const TABS = [ + { value: 'pending', label: 'Ожидают' }, + { value: '', label: 'Все' }, + { value: 'confirmed', label: 'Подтверждены' }, + { value: 'declined', label: 'Отклонены' }, +] + +function DeclineForm({ bookingId, onDone, onCancel }) { + const [note, setNote] = useState('') + const [busy, setBusy] = useState(false) + + const submit = async () => { + setBusy(true) + try { + await api.bookings.decline(bookingId, note) + onDone() + } finally { + setBusy(false) + } + } + + return ( +

+ setNote(e.target.value)} placeholder="Причина (необязательно)" style={{ ...inputStyle, flex: 1, padding: '6px 10px', fontSize: '0.82rem' }} /> + + +

+ ) +} + +function BookingCard({ booking, onChanged }) { + const [busy, setBusy] = useState(false) + const [declining, setDeclining] = useState(false) + const [error, setError] = useState('') + + const handleConfirm = async () => { + setBusy(true) + setError('') + try { + await api.bookings.confirm(booking.id) + onChanged() + } catch (err) { + setError(err.message) + } finally { + setBusy(false) + } + } + + return ( +

{booking.name}

+ {booking.is_onsite && ( + + Выездной + + )} +

+ {booking.phone} +

+ + {STATUS_LABELS[booking.status] || booking.status} + +

+ +

{booking.device_type}

+ {booking.problem_description &&

{booking.problem_description}

} + {booking.address && ( +

+ {booking.address} +

+ )} +

+ Желаемое время: {new Date(booking.preferred_at).toLocaleString('ru-RU')} +

+ + {booking.status === 'confirmed' && ( +

+ Заявка создана — {booking.reviewed_by_staff_name} +

+ )} + {booking.status === 'declined' && ( +

+ Отклонено{booking.staff_note ? ` — ${booking.staff_note}` : ''} · {booking.reviewed_by_staff_name} +

+ )} + + {booking.status === 'pending' && ( + <> +

+ + +

+ {error &&

{error}

} + {declining && setDeclining(false)} />} + + )} +

+ ) +} + +const BookingsPage = () => { + const [tab, setTab] = useState('pending') + const { bookings, loading, reload } = useBookings(tab) + const [showNewOnsite, setShowNewOnsite] = useState(false) + + return ( +

+ {TABS.map((t) => ( + + ))} +

+ +

+ + {showNewOnsite && ( + setShowNewOnsite(false)} + onCreated={() => { setShowNewOnsite(false); setTab('pending'); reload() }} + /> + )} + + {loading ? ( +

Загрузка...

+ ) : bookings.length === 0 ? ( +

Заявок нет

+ ) : ( + bookings.map((b) => ) + )} +

+ ) +} + +export default BookingsPage diff --git a/production/web/src/bookings/NewOnsiteBookingModal.jsx b/production/web/src/bookings/NewOnsiteBookingModal.jsx new file mode 100644 index 0000000..19136c6 --- /dev/null +++ b/production/web/src/bookings/NewOnsiteBookingModal.jsx @@ -0,0 +1,88 @@ +import { useState } from 'react' +import * as api from '../lib/api' +import Modal from '../ui/Modal' +import ClientPicker from '../orders/ClientPicker' +import DateTimeField from '../ui/DatePicker' +import { inputStyle, labelStyle } from '../orders/formStyles' + +// Staff-facing counterpart to the public /book form — used from the +// "+Заявка" type-selector's "Выездной ремонт" branch (see +// AdminLayout.jsx/NewEntryTypeModal.jsx) and from this page's own "+ Новая +// запись" button. Creates a booking (not an order) via +// api.bookings.staffCreate — staff still has to review/confirm it into a +// real order later, same as any other booking, but with address+is_onsite +// carried through so the technician knows where to go. +const NewOnsiteBookingModal = ({ onClose, onCreated }) => { + const [client, setClient] = useState(null) + const [deviceType, setDeviceType] = useState('') + const [problemDescription, setProblemDescription] = useState('') + const [address, setAddress] = useState('') + const [preferredAt, setPreferredAt] = useState(null) + const [saving, setSaving] = useState(false) + const [error, setError] = useState('') + + const handleSubmit = async (e) => { + e.preventDefault() + if (!client) { setError('Выберите или создайте клиента'); return } + if (!deviceType) { setError('Укажите тип техники'); return } + if (!address.trim()) { setError('Укажите адрес выезда'); return } + if (!preferredAt) { setError('Выберите желаемые дату и время'); return } + setSaving(true) + setError('') + try { + await api.bookings.staffCreate({ + name: client.name, + phone: client.phone, + device_type: deviceType, + problem_description: problemDescription, + preferred_at: preferredAt.toISOString(), + address: address.trim(), + is_onsite: true, + }) + onCreated() + } catch (err) { + setError(err.message) + } finally { + setSaving(false) + } + } + + return ( + +

+ Клиент * + +

+ +

+ Тип техники * + setDeviceType(e.target.value)} placeholder="Ноутбук, принтер..." style={inputStyle} required /> +

+ +

+ Что случилось +

setProblemDescription(e.target.value)} rows={2} style={{ ...inputStyle, resize: 'vertical' }} />
+        </div>
+
+        <div>
+          <label style={labelStyle}>Адрес выезда *</label>
+          <input value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Город, улица, дом, квартира" style={inputStyle} required />
+        </div>
+
+        <div>
+          <label style={labelStyle}>Желаемые дата и время *</label>
+          <DateTimeField value={preferredAt} onChange={setPreferredAt} minDate={new Date()} />
+        </div>
+
+        {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem' }}>{error}</p>}
+
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px', fontSize: '0.9rem' }}>
+          {saving ? 'Создаём...' : 'Добавить в заявки на запись'}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+export default NewOnsiteBookingModal
diff --git a/production/web/src/bookings/OnsiteBookingCard.jsx b/production/web/src/bookings/OnsiteBookingCard.jsx
new file mode 100644
index 0000000..fbdbceb
--- /dev/null
+++ b/production/web/src/bookings/OnsiteBookingCard.jsx
@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { Phone, MapPin, Check, X } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from '../orders/formStyles'
+
+// Read-only for drag (see OnsiteKanbanBoard's own doc comment for why) —
+// the card's own Подтвердить/Отклонить buttons are the only way a booking
+// moves between columns, mirroring BookingsPage's BookingCard exactly
+// rather than inventing a second interaction model for the same action.
+const OnsiteBookingCard = ({ booking, onChanged }) => {
+  const [busy, setBusy] = useState(false)
+  const [declining, setDeclining] = useState(false)
+  const [note, setNote] = useState('')
+  const [error, setError] = useState('')
+
+  const handleConfirm = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.bookings.confirm(booking.id)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleDecline = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.bookings.decline(booking.id, note)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        background: 'var(--color-surface)',
+        border: '1px solid var(--color-border)',
+        borderRadius: '12px',
+        padding: '14px',
+        boxShadow: 'var(--shadow-card)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+      }}
+    >
+      <p style={{ fontWeight: 510, fontFamily: 'var(--font-heading)', fontSize: '0.92rem' }}>{booking.name}</p>
+      <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '5px' }}>
+        <Phone size={11} /> {booking.phone}
+      </p>
+      <p style={{ fontSize: '0.82rem' }}>{booking.device_type}</p>
+      {booking.address && (
+        <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'flex-start', gap: '5px' }}>
+          <MapPin size={11} style={{ flexShrink: 0, marginTop: '2px' }} /> {booking.address}
+        </p>
+      )}
+      <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>
+        {new Date(booking.preferred_at).toLocaleString('ru-RU')}
+      </p>
+
+      {booking.status === 'pending' && (
+        <>
+          <div style={{ display: 'flex', gap: '6px', marginTop: '6px' }}>
+            <button type="button" onClick={handleConfirm} disabled={busy} className="btn-primary" style={{ flex: 1, padding: '6px 10px', fontSize: '0.76rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }}>
+              <Check size={12} /> Подтвердить
+            </button>
+            <button type="button" onClick={() => setDeclining((d) => !d)} disabled={busy} className="btn-outline" style={{ padding: '6px 10px', fontSize: '0.76rem', display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <X size={12} />
+            </button>
+          </div>
+          {declining && (
+            <div style={{ display: 'flex', gap: '4px', marginTop: '4px' }}>
+              <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Причина" style={{ ...inputStyle, flex: 1, padding: '5px 8px', fontSize: '0.76rem' }} />
+              <button type="button" onClick={handleDecline} disabled={busy} className="btn-outline" style={{ padding: '5px 10px', fontSize: '0.76rem' }}>ОК</button>
+            </div>
+          )}
+        </>
+      )}
+      {booking.status === 'declined' && booking.staff_note && (
+        <p style={{ fontSize: '0.74rem', color: 'var(--text-muted)', marginTop: '4px' }}>{booking.staff_note}</p>
+      )}
+      {error && <p style={{ fontSize: '0.74rem', color: 'var(--accent-red)' }}>{error}</p>}
+    </div>
+  )
+}
+
+export default OnsiteBookingCard
diff --git a/production/web/src/bookings/OnsiteKanbanBoard.jsx b/production/web/src/bookings/OnsiteKanbanBoard.jsx
new file mode 100644
index 0000000..b9a022d
--- /dev/null
+++ b/production/web/src/bookings/OnsiteKanbanBoard.jsx
@@ -0,0 +1,52 @@
+import { useIsMobile } from '../hooks/useIsMobile'
+import { useOnsiteBookings } from './useOnsiteBookings'
+import OnsiteKanbanColumn from './OnsiteKanbanColumn'
+import KanbanBoardSwitcher from '../orders/KanbanBoardSwitcher'
+import { STATUSES } from './statuses'
+
+// Deliberately read-only for drag (no dnd-kit here, unlike KanbanBoard/
+// CartridgeKanbanBoard) — bookings are a lightweight intake queue, not a
+// scheduler (see internal/booking/handler.go's own package doc: "this
+// table is just the intake queue, not a scheduler"), and the only two
+// transitions a pending booking can make — confirm or decline — already
+// have single-click buttons on every pending card (mirroring BookingsPage's
+// own BookingCard). Adding drag-to-confirm/drag-to-decline on top of that
+// would just be a second, redundant way to trigger the exact same action,
+// for a 3-column board where "reordering within a column" has no meaning
+// at all (unlike orders/cartridges, position within a status has no
+// semantics for a booking).
+const OnsiteKanbanBoard = () => {
+  const { bookingsByStatus, loading, reload } = useOnsiteBookings()
+  const isMobile = useIsMobile()
+
+  return (
+    <>
+      <KanbanBoardSwitcher />
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '60px', color: 'var(--text-muted)', fontFamily: 'var(--font-heading)' }}>
+          Загрузка заявок...
+        </div>
+      ) : (
+        <div style={{
+          display: 'flex', gap: '14px', alignItems: 'flex-start',
+          overflowX: isMobile ? 'auto' : 'visible',
+          WebkitOverflowScrolling: 'touch',
+          paddingBottom: isMobile ? '12px' : '20px',
+          minWidth: 'min-content',
+        }}>
+          {STATUSES.map((status) => (
+            <OnsiteKanbanColumn
+              key={status}
+              status={status}
+              bookings={bookingsByStatus[status] || []}
+              onChanged={reload}
+              isMobile={isMobile}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
+
+export default OnsiteKanbanBoard
diff --git a/production/web/src/bookings/OnsiteKanbanColumn.jsx b/production/web/src/bookings/OnsiteKanbanColumn.jsx
new file mode 100644
index 0000000..e1060bf
--- /dev/null
+++ b/production/web/src/bookings/OnsiteKanbanColumn.jsx
@@ -0,0 +1,46 @@
+import OnsiteBookingCard from './OnsiteBookingCard'
+import { STATUS_LABELS, STATUS_COLORS } from './statuses'
+
+// No droppable/sortable wiring here — see OnsiteKanbanBoard's own doc
+// comment for why this board is read-only for drag (mirrors
+// KanbanColumn/CartridgeKanbanColumn's header treatment exactly, just
+// without the DnD parts neither this data model nor its 3-status enum
+// benefits from).
+const OnsiteKanbanColumn = ({ status, bookings, onChanged, isMobile }) => {
+  return (
+    <div style={{
+      flex: isMobile ? '0 0 260px' : '1 1 200px',
+      minWidth: isMobile ? '260px' : '215px',
+      maxWidth: isMobile ? '260px' : '300px',
+      display: 'flex', flexDirection: 'column', gap: '10px',
+    }}>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: '8px',
+        padding: '11px 14px',
+        background: 'var(--color-surface)', borderRadius: '12px',
+        border: '1px solid var(--color-border)',
+        borderTop: `3px solid ${STATUS_COLORS[status]}`,
+        boxShadow: 'var(--shadow-card)',
+      }}>
+        <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.87rem', flex: 1, letterSpacing: '-0.005em' }}>
+          {STATUS_LABELS[status]}
+        </span>
+        <span style={{
+          background: STATUS_COLORS[status], color: '#fff',
+          borderRadius: '50px', padding: '1px 8px',
+          fontSize: '0.72rem', fontWeight: 590,
+        }}>
+          {bookings.length}
+        </span>
+      </div>
+
+      <div style={{ flex: 1, minHeight: '180px', display: 'flex', flexDirection: 'column', gap: '8px', padding: '6px' }}>
+        {bookings.map((booking) => (
+          <OnsiteBookingCard key={booking.id} booking={booking} onChanged={onChanged} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default OnsiteKanbanColumn
diff --git a/production/web/src/bookings/statuses.js b/production/web/src/bookings/statuses.js
new file mode 100644
index 0000000..e07d9e1
--- /dev/null
+++ b/production/web/src/bookings/statuses.js
@@ -0,0 +1,10 @@
+// Mirrors the CHECK constraint on bookings.status in the backend migration
+// (014_bookings.sql) — a fixed 3-value enum, not an owner-editable catalog
+// like orders' own status set (see orders/statuses.js). Shared by
+// BookingsPage's flat list and OnsiteKanbanBoard's 3-column view so the
+// labels/colors never drift between the two.
+export const STATUSES = ['pending', 'confirmed', 'declined']
+
+export const STATUS_LABELS = { pending: 'Ожидает', confirmed: 'Подтверждена', declined: 'Отклонена' }
+
+export const STATUS_COLORS = { pending: 'var(--accent-orange)', confirmed: 'var(--accent-green)', declined: 'var(--text-muted)' }
diff --git a/production/web/src/bookings/useBookings.js b/production/web/src/bookings/useBookings.js
new file mode 100644
index 0000000..b2a4660
--- /dev/null
+++ b/production/web/src/bookings/useBookings.js
@@ -0,0 +1,25 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Same shape as useClients.js — status is the load key (defaults to
+// "pending" so the queue opens showing what actually needs a decision).
+export function useBookings(status) {
+  const [bookings, setBookings] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setBookings(await api.bookings.list(status))
+    } finally {
+      setLoading(false)
+    }
+  }, [status])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  return { bookings, loading, reload: load }
+}
diff --git a/production/web/src/bookings/useOnsiteBookings.js b/production/web/src/bookings/useOnsiteBookings.js
new file mode 100644
index 0000000..1162c5c
--- /dev/null
+++ b/production/web/src/bookings/useOnsiteBookings.js
@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+import { STATUSES } from './statuses'
+
+// Feeds OnsiteKanbanBoard — api.bookings.list has no is_onsite filter (the
+// booking queue is small enough, and this is the only caller that needs
+// that slice), so this fetches every booking (status='' = no filter, same
+// convention useBookings itself already uses) and buckets client-side, same
+// shape useOrders/useCartridgeBatches already return (an object keyed by
+// status) so the kanban column components can be written the same way.
+export function useOnsiteBookings() {
+  const [bookingsByStatus, setBookingsByStatus] = useState({})
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const all = (await api.bookings.list('')) || []
+      const onsite = all.filter((b) => b.is_onsite)
+      const grouped = {}
+      for (const status of STATUSES) {
+        grouped[status] = onsite.filter((b) => b.status === status)
+      }
+      setBookingsByStatus(grouped)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  return { bookingsByStatus, loading, reload: load }
+}
diff --git a/production/web/src/cartridges/BatchCard.jsx b/production/web/src/cartridges/BatchCard.jsx
new file mode 100644
index 0000000..5a08e0c
--- /dev/null
+++ b/production/web/src/cartridges/BatchCard.jsx
@@ -0,0 +1,87 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, PackageCheck, Truck } from 'lucide-react'
+
+const BatchCard = ({ batch, onClick }) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: batch.id,
+  })
+
+  const allDone = batch.item_count > 0 && batch.items_done >= batch.item_count
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.45 : 1,
+        background: 'var(--color-surface)',
+        border: '1px solid var(--border-light)',
+        borderRadius: '10px',
+        padding: '13px',
+        cursor: 'pointer',
+        boxShadow: isDragging ? 'var(--shadow-elevated)' : 'var(--shadow-card)',
+        display: 'flex',
+        gap: '9px',
+        userSelect: 'none',
+      }}
+      onClick={onClick}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        style={{ color: 'var(--text-muted)', cursor: 'grab', paddingTop: '2px', flexShrink: 0 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <GripVertical size={15} />
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p style={{
+          fontWeight: 590, fontFamily: 'var(--font-heading)',
+          fontSize: '0.9rem', marginBottom: '6px',
+          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        }}>
+          Партия {batch.order_number ? `№ ${batch.order_number}` : `#${batch.id.slice(0, 8)}`}
+        </p>
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '6px' }}>
+          <span style={{
+            display: 'flex', alignItems: 'center', gap: '4px',
+            fontSize: '0.72rem', fontWeight: 510,
+            background: allDone ? 'rgba(34,197,94,0.1)' : 'rgba(100,116,139,0.1)',
+            color: allDone ? 'var(--accent-green)' : 'var(--text-muted)',
+            padding: '2px 7px', borderRadius: '50px',
+          }}>
+            <PackageCheck size={12} />
+            {batch.items_done}/{batch.item_count} готово
+          </span>
+          {batch.pickup_required && (
+            <span style={{
+              display: 'flex', alignItems: 'center', gap: '4px',
+              fontSize: '0.72rem', fontWeight: 510,
+              background: 'rgba(249,115,22,0.1)', color: 'var(--accent-orange)',
+              padding: '2px 7px', borderRadius: '50px',
+            }}>
+              <Truck size={12} />
+              Забрать
+            </span>
+          )}
+        </div>
+        {batch.assigned_master_name && (
+          <span style={{
+            display: 'inline-block',
+            fontSize: '0.72rem', background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+            padding: '2px 7px', borderRadius: '50px', fontWeight: 510, marginBottom: '4px',
+          }}>
+            {batch.assigned_master_name}
+          </span>
+        )}
+        <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginTop: '3px' }}>
+          {new Date(batch.created_at).toLocaleDateString('ru-RU')}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default BatchCard
diff --git a/production/web/src/cartridges/BatchModal.jsx b/production/web/src/cartridges/BatchModal.jsx
new file mode 100644
index 0000000..0d8823f
--- /dev/null
+++ b/production/web/src/cartridges/BatchModal.jsx
@@ -0,0 +1,789 @@
+import { useState, useEffect } from 'react'
+import { X, MessageSquare, Camera, RefreshCw, Copy, Check, Plus, Droplet, Wrench, Wallet, History, Tag, Printer } from 'lucide-react'
+import * as api from '../lib/api'
+import { useAuth } from '../auth/AuthContext'
+import { STATUSES, STATUS_LABELS, STATUS_COLORS, ITEM_STATUSES, ITEM_STATUS_LABELS, ITEM_STATUS_COLORS } from './statuses'
+import ClientPicker from '../orders/ClientPicker'
+import AiIntakeBox from '../orders/AiIntakeBox'
+import PhotoThumb from '../orders/PhotoThumb'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import PartsUsedSection from '../inventory/PartsUsedSection'
+import NotifyClientButton from '../orders/NotifyClientButton'
+import CashSection from '../cash/CashSection'
+import { useCartridgeCatalog } from './useCartridgeCatalog'
+import { useAssignableStaff } from '../orders/useAssignableStaff'
+import StatusPicker from '../orders/StatusPicker'
+import Tabs, { TabPanel } from '../ui/Tabs'
+import CartridgeItemRow from './CartridgeItemRow'
+import QrScanField from './QrScanField'
+import CartridgeLabelPrint from './CartridgeLabelPrint'
+import { MAX_ITEMS, emptyCartridgeItem } from './cartridgeItem'
+
+const EDIT_TABS = [
+  { key: 'items', label: 'Картриджи', icon: Droplet },
+  { key: 'parts', label: 'Запчасти', icon: Wrench },
+  { key: 'cash', label: 'Касса', icon: Wallet },
+  { key: 'history', label: 'История', icon: History },
+]
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', color: 'var(--text-main)', borderRadius: '16px', width: '100%', maxWidth: '640px',
+  boxShadow: 'var(--shadow-elevated)',
+}
+
+function CreateForm({ onClose, onSaved }) {
+  const { staff } = useAuth()
+  const [client, setClient] = useState(null)
+  const [clientQueryHint, setClientQueryHint] = useState('')
+  const [pickupRequired, setPickupRequired] = useState(false)
+  const [items, setItems] = useState([emptyCartridgeItem()])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { brands, addBrand } = useCartridgeCatalog()
+  const assignableStaff = useAssignableStaff()
+  const [assignedMasterId, setAssignedMasterId] = useState('')
+  // Populated by QrScanField resolving a previously-printed label — shown
+  // right under the scan field so staff can see when this exact cartridge
+  // last came in before deciding what it needs this time.
+  const [scanHistory, setScanHistory] = useState(null)
+
+  // A scan pre-fills the client (fetched separately — scanByCode only
+  // returns client_id, not the full client shape ClientPicker needs) and
+  // the first item's model/color/catalog ids, plus recurring_item_id so
+  // the batch this creates chains onto the same cartridge's history rather
+  // than starting a new one. Only ever touches the first row — scanning
+  // mid-form with several rows already filled in would be a confusing time
+  // to also silently overwrite whichever row the operator is on.
+  const handleScanResolved = async (code, data) => {
+    setScanHistory(data.history)
+    try {
+      const c = await api.clients.get(data.client_id)
+      setClient(c.client)
+    } catch {
+      // Client fetch failing shouldn't block the rest of the pre-fill —
+      // staff can still pick the client manually from ClientPicker.
+    }
+    setItems((prev) => prev.map((it, i) => (i === 0 ? {
+      ...it,
+      model: data.model,
+      color: data.color || '',
+      cartridge_brand_id: data.cartridge_brand_id || '',
+      cartridge_model_id: data.cartridge_model_id || '',
+      recurring_item_id: data.id,
+    } : it)))
+  }
+
+  const updateItem = (index, field, value) => {
+    setItems((prev) => prev.map((it, i) => (i === index ? { ...it, [field]: value } : it)))
+  }
+  const addItem = () => setItems((prev) => (prev.length >= MAX_ITEMS ? prev : [...prev, emptyCartridgeItem()]))
+  const removeItem = (index) => setItems((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)))
+
+  // AI only fills the first item's free-text-friendly fields (model/note/
+  // price) plus a client search hint — same "AI never touches client_id
+  // directly" stance as OrderModal's own handleAiExtracted, and the same
+  // reason: a batch's real model/brand selection is a catalog FK the AI's
+  // guess can't reliably resolve to an id, so it lands in the plain model
+  // text field for staff to confirm/pick from the catalog themselves.
+  const handleAiExtracted = (fields) => {
+    setItems((prev) => prev.map((it, i) => (i === 0 ? {
+      ...it,
+      model: fields.device_model || fields.device_brand || it.model,
+      note: fields.problem_description || it.note,
+      price: fields.price_estimate || it.price,
+    } : it)))
+    setClientQueryHint(fields.client_phone || fields.client_name || '')
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!client) { setError('Выберите или создайте клиента'); return }
+    const filled = items.filter((it) => it.model.trim())
+    if (filled.length === 0) { setError('Добавьте хотя бы один картридж'); return }
+    setSaving(true)
+    setError('')
+    try {
+      const master = assignableStaff.find((s) => s.id === assignedMasterId)
+      await api.cartridges.create({
+        client_id: client.id,
+        pickup_required: pickupRequired,
+        assigned_master_id: assignedMasterId || undefined,
+        assigned_master_name: master?.name || undefined,
+        items: filled.map((it) => ({
+          model: it.model,
+          color: it.color || null,
+          tag: it.tag || null,
+          refill_count: it.refill_count === '' ? 0 : Number(it.refill_count),
+          price: it.price === '' ? null : it.price,
+          note: it.note || null,
+          cartridge_brand_id: it.cartridge_brand_id || undefined,
+          cartridge_model_id: it.cartridge_model_id || undefined,
+          recurring_item_id: it.recurring_item_id || undefined,
+        })),
+      })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px', maxHeight: '85vh', overflowY: 'auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Новая партия картриджей</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <AiIntakeBox onExtracted={handleAiExtracted} />
+
+      <div>
+        <label style={labelStyle}>Постоянный картридж — скан QR или код с этикетки</label>
+        <QrScanField onResolved={handleScanResolved} />
+      </div>
+
+      {scanHistory && (
+        <div style={{ border: '1px dashed var(--color-border)', borderRadius: '8px', padding: '10px', fontSize: '0.8rem' }}>
+          <p style={{ fontWeight: 590, marginBottom: '6px' }}>История этого картриджа</p>
+          {scanHistory.length === 0 ? (
+            <p style={{ color: 'var(--color-text-muted)' }}>Это первый раз, когда он в системе с этой меткой.</p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {scanHistory.map((h) => (
+                <div key={h.item_id} style={{ display: 'flex', justifyContent: 'space-between', gap: '8px', color: 'var(--color-text-muted)' }}>
+                  <span>{new Date(h.created_at).toLocaleDateString('ru-RU')}{h.order_number ? ` · № ${h.order_number}` : ''}</span>
+                  <span>{ITEM_STATUS_LABELS[h.status] || h.status} · заправок: {h.refill_count}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div>
+        <label style={labelStyle}>Клиент *</label>
+        <ClientPicker selectedClient={client} onSelect={setClient} initialQuery={clientQueryHint} />
+      </div>
+
+      {client && (
+        <div>
+          <NotifyClientButton clientId={client.id} />
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Мастер</label>
+          <div style={{ display: 'flex', gap: '6px' }}>
+            <select value={assignedMasterId} onChange={(e) => setAssignedMasterId(e.target.value)} style={inputStyle}>
+              <option value="">— не назначен —</option>
+              {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+            <button
+              type="button"
+              className="btn-outline"
+              style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}
+              onClick={() => setAssignedMasterId(staff?.id || '')}
+            >
+              Я
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem', color: 'var(--text-main)' }}>
+        <input type="checkbox" checked={pickupRequired} onChange={(e) => setPickupRequired(e.target.checked)} />
+        Требуется забрать у клиента
+      </label>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <label style={labelStyle}>Картриджи *</label>
+          <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{items.length}/{MAX_ITEMS}</span>
+        </div>
+        {items.map((item, index) => (
+          <CartridgeItemRow
+            key={item._id}
+            index={index}
+            item={item}
+            clientId={client?.id}
+            brands={brands}
+            addBrand={addBrand}
+            onChange={(field, value) => updateItem(index, field, value)}
+            onRemove={() => removeItem(index)}
+            canRemove={items.length > 1}
+          />
+        ))}
+        <button
+          type="button"
+          onClick={addItem}
+          disabled={items.length >= MAX_ITEMS}
+          className="btn-outline"
+          style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px', justifyContent: 'center', opacity: items.length >= MAX_ITEMS ? 0.5 : 1 }}
+        >
+          <Plus size={14} />
+          Добавить картридж
+        </button>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px', opacity: saving ? 0.7 : 1 }}>
+        {saving ? 'Создаём...' : 'Создать партию'}
+      </button>
+    </form>
+  )
+}
+
+function TimelineItem({ event }) {
+  const icon = event.type === 'comment' ? <MessageSquare size={14} /> : event.type === 'photo' ? <Camera size={14} /> : <RefreshCw size={14} />
+  return (
+    <div style={{ display: 'flex', gap: '10px', padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ color: 'var(--text-muted)', paddingTop: '2px', flexShrink: 0 }}>{icon}</div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <span style={{ fontSize: '0.8rem', fontWeight: 510 }}>{event.staff_name}</span>
+          <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>
+            {new Date(event.created_at).toLocaleString('ru-RU')}
+          </span>
+          {!event.is_public && (
+            <span style={{ fontSize: '0.68rem', background: 'var(--color-surface-sunken)', color: 'var(--text-muted)', padding: '1px 6px', borderRadius: '4px' }}>
+              внутреннее
+            </span>
+          )}
+        </div>
+        {event.type === 'status_change' && (
+          <p style={{ fontSize: '0.85rem', marginTop: '3px' }}>
+            Статус: <strong>{STATUS_LABELS[event.body] || event.body}</strong>
+          </p>
+        )}
+        {event.type === 'comment' && <p style={{ fontSize: '0.85rem', marginTop: '3px' }}>{event.body}</p>}
+        {event.type === 'photo' && <div style={{ marginTop: '6px' }}><PhotoThumb fileKey={event.file_key} /></div>}
+      </div>
+    </div>
+  )
+}
+
+// TonerConfirmPanel appears in place of an instant status save when marking
+// an item done whose cartridge_model_id has a linked production recipe
+// (Фаза 19) — the grammage isn't always exact, so staff enters what was
+// actually weighed in rather than the status just silently assuming the
+// recipe's nominal amount. On insufficient stock (409 from the backend's
+// FIFO consume) it offers either writing off exactly what's on hand or
+// producing more right here and retrying — no need to leave this panel to
+// go do that on the Производство page.
+function TonerConfirmPanel({ modelId, recipe, onConfirm, onCancel }) {
+  const [grams, setGrams] = useState('')
+  const [availableQty, setAvailableQty] = useState(recipe.available_qty)
+  const [shortfall, setShortfall] = useState(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const attempt = async (n) => {
+    setBusy(true)
+    setError('')
+    setShortfall(null)
+    try {
+      await onConfirm(n)
+    } catch (err) {
+      if (err.status === 409) {
+        setShortfall(n - availableQty)
+        setError(`Недостаточно тонера: нужно ${n} ${recipe.finished_part_unit}, в наличии ${availableQty} ${recipe.finished_part_unit}`)
+      } else {
+        setError(err.message)
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const n = Number(grams)
+    if (n > 0) attempt(n)
+  }
+
+  const handleUseAvailable = () => {
+    setGrams(String(availableQty))
+    attempt(availableQty)
+  }
+
+  const handleTopUp = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.productionRecipes.produce(recipe.recipe_id, { qty: shortfall })
+      const fresh = await api.productionRecipes.getByCartridgeModel(modelId)
+      setAvailableQty(fresh.available_qty)
+      setShortfall(null)
+      await attempt(Number(grams))
+    } catch (err) {
+      setError(err.message)
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ border: '1px dashed var(--color-accent)', borderRadius: '8px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)' }}>
+        Готового тонера «{recipe.finished_part_name}» в наличии: {availableQty} {recipe.finished_part_unit}
+      </p>
+      <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap' }}>
+        <input
+          type="number" min="1" placeholder={`Использовано, ${recipe.finished_part_unit}`}
+          value={grams} onChange={(e) => setGrams(e.target.value)}
+          style={{ ...inputStyle, width: '170px' }} autoFocus
+        />
+        <button type="submit" disabled={busy} className="btn-primary" style={{ padding: '7px 12px', fontSize: '0.78rem' }}>
+          Подтвердить заправку
+        </button>
+        <button type="button" onClick={onCancel} disabled={busy} className="btn-outline" style={{ padding: '7px 12px', fontSize: '0.78rem' }}>
+          Отмена
+        </button>
+      </form>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.76rem' }}>{error}</p>}
+      {shortfall !== null && (
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+          <button type="button" onClick={handleUseAvailable} disabled={busy} className="btn-outline" style={{ padding: '6px 10px', fontSize: '0.76rem' }}>
+            Списать по факту: {availableQty} {recipe.finished_part_unit}
+          </button>
+          <button type="button" onClick={handleTopUp} disabled={busy} className="btn-outline" style={{ padding: '6px 10px', fontSize: '0.76rem' }}>
+            Доприходовать {shortfall} {recipe.finished_part_unit} и продолжить
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Each cartridge is independently editable and PATCHes on blur (not on every
+// keystroke) — local state mirrors the item's fields, save fires when the
+// field loses focus and the value actually changed. Status is a select, so
+// it saves immediately on change like OrderModal's status select does —
+// except transitioning to "done" on an item whose model has a linked
+// production recipe, which routes through TonerConfirmPanel instead of
+// saving immediately (see its own doc comment).
+function ItemEditRow({ item, onSaved }) {
+  const serverValues = { status: item.status, refill_count: item.refill_count, price: item.price ?? '', note: item.note || '' }
+  const [local, setLocal] = useState(serverValues)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [tonerRecipe, setTonerRecipe] = useState(null)
+  const [printing, setPrinting] = useState(null)
+  const [labelBusy, setLabelBusy] = useState(false)
+
+  // Idempotent server-side (see PrintLabel's doc comment) — a re-click on
+  // an already-labeled item just re-opens the same code's print view
+  // rather than minting a second identity for the same physical cartridge.
+  const handlePrintLabel = async () => {
+    setLabelBusy(true)
+    setError('')
+    try {
+      const res = await api.cartridges.printLabel(item.id)
+      setPrinting(res)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLabelBusy(false)
+    }
+  }
+
+  // Re-sync local edit state only when the item's own server-side *values*
+  // actually change — NOT on every reference change from EditForm's load(),
+  // which re-fetches every item in the batch after any unrelated action
+  // (a comment, a photo, another row's save, the master-assignment save).
+  // Comparing by reference there would silently discard whatever the staff
+  // member is mid-editing in this row every time something else in the
+  // modal saves. Adjusted during render, same "reset state when a prop
+  // changes" pattern AdminLayout uses for lastPathname — but keyed off the
+  // actual field values, not the item object's identity.
+  const [lastServerValues, setLastServerValues] = useState(serverValues)
+  const serverChanged = Object.keys(serverValues).some((k) => serverValues[k] !== lastServerValues[k])
+  if (serverChanged) {
+    setLastServerValues(serverValues)
+    setLocal(serverValues)
+  }
+
+  // revertField, on failure, snaps just that one field back to the last
+  // known server value and surfaces the error — without this, a failed
+  // save (e.g. the status select, which applies its new value immediately)
+  // leaves the UI showing a value that was never actually persisted, with
+  // no indication anything went wrong.
+  const patch = async (body, revertField) => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.cartridges.updateItem(item.id, body)
+      await onSaved()
+    } catch (err) {
+      setError(err.message)
+      if (revertField) setLocal((l) => ({ ...l, [revertField]: serverValues[revertField] }))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleStatusChange = async (status) => {
+    setLocal((l) => ({ ...l, status }))
+
+    if (status !== 'done' || !item.cartridge_model_id) {
+      patch({ status }, 'status')
+      return
+    }
+    try {
+      const recipe = await api.productionRecipes.getByCartridgeModel(item.cartridge_model_id)
+      setTonerRecipe(recipe)
+    } catch (err) {
+      if (err.status === 404) patch({ status }, 'status')
+      else { setError(err.message); setLocal((l) => ({ ...l, status: item.status })) }
+    }
+  }
+
+  // Rethrows on failure (unlike patch above) so TonerConfirmPanel can react
+  // to a 409 specifically (offer write-off/top-up) instead of just showing
+  // a dead-end error message.
+  const confirmToner = async (gramsUsed) => {
+    await api.cartridges.updateItem(item.id, { status: 'done', toner_grams_used: gramsUsed })
+    setTonerRecipe(null)
+    await onSaved()
+  }
+  const handleRefillBlur = () => {
+    if (String(local.refill_count) !== String(item.refill_count)) patch({ refill_count: Number(local.refill_count) || 0 }, 'refill_count')
+  }
+  const handlePriceBlur = () => {
+    if (String(local.price) !== String(item.price ?? '')) patch({ price: local.price === '' ? null : local.price }, 'price')
+  }
+  const handleNoteBlur = () => {
+    if (local.note !== (item.note || '')) patch({ note: local.note }, 'note')
+  }
+
+  return (
+    <div style={{ border: '1px solid var(--border-light)', borderRadius: '8px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
+        <div style={{ minWidth: 0 }}>
+          <p style={{ fontWeight: 510, fontSize: '0.88rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {item.model}{item.color ? ` · ${item.color}` : ''}
+          </p>
+          {item.tag && <p style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>Метка: {item.tag}</p>}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+          <button
+            type="button" onClick={handlePrintLabel} disabled={labelBusy} className="btn-outline"
+            style={{ padding: '5px 9px', fontSize: '0.72rem', display: 'flex', alignItems: 'center', gap: '5px' }}
+            title={item.recurring_item_id ? 'Повторная печать этикетки' : 'Печать этикетки для постоянного обслуживания'}
+          >
+            {item.recurring_item_id ? <Printer size={13} /> : <Tag size={13} />}
+            {item.recurring_item_id ? 'Этикетка' : 'Выдать QR'}
+          </button>
+          <StatusPicker
+            value={local.status}
+            onChange={handleStatusChange}
+            statuses={ITEM_STATUSES}
+            labels={ITEM_STATUS_LABELS}
+            colors={ITEM_STATUS_COLORS}
+            hideLabel
+            compact
+            disabled={busy}
+          />
+        </div>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '8px' }}>
+        <div>
+          <label style={labelStyle}>Заправок</label>
+          <input
+            type="number"
+            value={local.refill_count}
+            onChange={(e) => setLocal((l) => ({ ...l, refill_count: e.target.value }))}
+            onBlur={handleRefillBlur}
+            style={inputStyle}
+          />
+        </div>
+        <div>
+          <label style={labelStyle}>Цена, ₽</label>
+          <input
+            type="number"
+            value={local.price}
+            onChange={(e) => setLocal((l) => ({ ...l, price: e.target.value }))}
+            onBlur={handlePriceBlur}
+            style={inputStyle}
+          />
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <textarea
+          value={local.note}
+          onChange={(e) => setLocal((l) => ({ ...l, note: e.target.value }))}
+          onBlur={handleNoteBlur}
+          rows={2}
+          style={{ ...inputStyle, resize: 'vertical' }}
+        />
+      </div>
+      {tonerRecipe && (
+        <TonerConfirmPanel
+          modelId={item.cartridge_model_id}
+          recipe={tonerRecipe}
+          onConfirm={confirmToner}
+          onCancel={() => { setTonerRecipe(null); setLocal((l) => ({ ...l, status: item.status })) }}
+        />
+      )}
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem' }}>{error}</p>}
+      {printing && (
+        <CartridgeLabelPrint
+          recurringItemId={printing.id}
+          code={printing.code}
+          model={item.model}
+          color={item.color}
+          onClose={() => setPrinting(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+function EditForm({ batchId, onClose }) {
+  const { staff } = useAuth()
+  const [batch, setBatch] = useState(null)
+  const [client, setClient] = useState(null)
+  const [items, setItems] = useState([])
+  const [events, setEvents] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [assignedMasterId, setAssignedMasterId] = useState('')
+  const assignableStaff = useAssignableStaff()
+  const [comment, setComment] = useState('')
+  const [commentPublic, setCommentPublic] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [docError, setDocError] = useState('')
+  const [activeTab, setActiveTab] = useState('items')
+
+  const load = async () => {
+    const data = await api.cartridges.get(batchId)
+    setBatch(data.batch)
+    setItems(data.items || [])
+    setEvents(data.events || [])
+    setAssignedMasterId(data.batch.assigned_master_id || '')
+    setLoading(false)
+    api.clients.get(data.batch.client_id).then((c) => setClient(c.client)).catch(() => {})
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [batchId])
+
+  const handleStatusChange = async (status) => {
+    await api.cartridges.updateStatus(batchId, status)
+    await load()
+  }
+
+  // Was previously a free-text name field that always saved the CURRENT
+  // staff member's id regardless of what name was typed — assigning a
+  // colleague would silently store your own id under their typed name. Now
+  // a real select over assignableStaff, same id+name pairing OrderModal's
+  // EditForm uses.
+  const handleSaveMaster = async () => {
+    setBusy(true)
+    try {
+      const master = assignableStaff.find((s) => s.id === assignedMasterId)
+      await api.cartridges.updateBatch(batchId, { assigned_master_id: assignedMasterId || null, assigned_master_name: master?.name || null })
+      await load()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleOpenDocument = async (kind) => {
+    setDocError('')
+    try {
+      await api.cartridges.openDocument(batchId, kind)
+    } catch (err) {
+      setDocError(err.message)
+    }
+  }
+
+  const handleAddComment = async () => {
+    if (!comment.trim()) return
+    setBusy(true)
+    try {
+      await api.cartridges.addComment(batchId, comment, commentPublic)
+      setComment('')
+      await load()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handlePhotoUpload = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setBusy(true)
+    try {
+      await api.cartridges.addPhoto(batchId, file, true)
+      await load()
+    } finally {
+      setBusy(false)
+      e.target.value = ''
+    }
+  }
+
+  const trackingUrl = batch ? `${window.location.origin}/track/${batch.tracking_token}` : ''
+  const copyTracking = () => {
+    navigator.clipboard.writeText(trackingUrl)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  if (loading || !batch) {
+    return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+  }
+
+  return (
+    <div>
+      <div style={{ padding: '24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>
+              Партия {batch.order_number ? `№ ${batch.order_number}` : `#${batch.id.slice(0, 8)}`}
+            </h2>
+            {client && <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px' }}>{client.name} · {client.phone}</p>}
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <p style={{ fontSize: '0.85rem', marginTop: '10px', color: 'var(--text-main)' }}>
+          {batch.items_done}/{batch.item_count} картриджей готово{batch.pickup_required ? ' · нужно забрать у клиента' : ''}
+        </p>
+        <button
+          type="button"
+          onClick={copyTracking}
+          style={{ marginTop: '10px', display: 'flex', alignItems: 'center', gap: '6px', background: 'none', color: 'var(--color-accent-fg)', fontSize: '0.78rem', padding: 0 }}
+        >
+          {copied ? <Check size={13} /> : <Copy size={13} />}
+          Ссылка для клиента
+        </button>
+      </div>
+
+      <div style={{ padding: '16px 24px 0' }}>
+        <StatusPicker value={batch.status} onChange={handleStatusChange} statuses={STATUSES} labels={STATUS_LABELS} colors={STATUS_COLORS} />
+      </div>
+
+      <Tabs tabs={EDIT_TABS} activeTab={activeTab} onChange={setActiveTab} />
+
+      <TabPanel tabKey="items" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div>
+            <label style={labelStyle}>Мастер</label>
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <select value={assignedMasterId} onChange={(e) => setAssignedMasterId(e.target.value)} style={inputStyle}>
+                <option value="">— не назначен —</option>
+                {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+              </select>
+              <button
+                type="button"
+                className="btn-outline"
+                style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}
+                onClick={() => setAssignedMasterId(staff?.id || '')}
+              >
+                Я
+              </button>
+            </div>
+          </div>
+
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
+            <button type="button" onClick={handleSaveMaster} disabled={busy} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Сохранить
+            </button>
+            <button type="button" onClick={() => handleOpenDocument('invoice')} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Счёт PDF
+            </button>
+            <button type="button" onClick={() => handleOpenDocument('act')} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Акт PDF
+            </button>
+            <NotifyClientButton clientId={client?.id} />
+            {docError && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)' }}>{docError}</span>}
+          </div>
+
+          <div>
+            <h3 style={{ fontSize: '0.95rem', marginBottom: '10px' }}>Картриджи</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {items.map((item) => (
+                <ItemEditRow key={item.id} item={item} onSaved={load} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="parts" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px' }}>
+          <PartsUsedSection
+            id={batchId}
+            listFn={() => api.cartridges.listParts(batchId)}
+            consumeFn={(body) => api.cartridges.consumeParts(batchId, body)}
+          />
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="cash" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px' }}>
+          <CashSection id={batchId} listFn={() => api.cash.listForCartridgeBatch(batchId)} cartridgeBatchId={batchId} />
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="history" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px' }}>
+          <h3 style={{ fontSize: '0.95rem', marginBottom: '8px' }}>История</h3>
+          <div style={{ maxHeight: '280px', overflowY: 'auto', marginBottom: '14px' }}>
+            {events.map((ev) => <TimelineItem key={ev.id} event={ev} />)}
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Добавить комментарий..."
+              rows={2}
+              style={{ ...inputStyle, resize: 'vertical' }}
+            />
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+                <input type="checkbox" checked={commentPublic} onChange={(e) => setCommentPublic(e.target.checked)} />
+                Показывать клиенту
+              </label>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <label className="btn-outline" style={{ padding: '7px 14px', fontSize: '0.82rem', cursor: 'pointer' }}>
+                  <Camera size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />
+                  Фото
+                  <input type="file" accept="image/*" onChange={handlePhotoUpload} style={{ display: 'none' }} />
+                </label>
+                <button type="button" onClick={handleAddComment} disabled={busy} className="btn-primary" style={{ padding: '7px 16px', fontSize: '0.82rem' }}>
+                  Отправить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+    </div>
+  )
+}
+
+const BatchModal = ({ mode, batchId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <CreateForm onClose={onClose} onSaved={onSaved} />
+          : <EditForm batchId={batchId} onClose={onClose} />}
+      </div>
+    </div>
+  )
+}
+
+export default BatchModal
diff --git a/production/web/src/cartridges/CartridgeItemRow.jsx b/production/web/src/cartridges/CartridgeItemRow.jsx
new file mode 100644
index 0000000..947d95a
--- /dev/null
+++ b/production/web/src/cartridges/CartridgeItemRow.jsx
@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react'
+import { Trash2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useCartridgeModels } from './useCartridgeCatalog'
+
+// Shared by BatchModal's own create form and MultiIntakeModal (several
+// items brought in at once, only some of which are cartridges) — pulled out
+// so both stay on the exact same brand/model catalog + suggestion behavior
+// instead of one being a lookalike copy that drifts. MAX_ITEMS/
+// emptyCartridgeItem live in ./cartridgeItem.js, not here — see that file's
+// own comment for why.
+
+// One row of the intake form. Debounces api.cartridges.suggest the same way
+// ClientPicker debounces its client search — a local setTimeout inside the
+// effect, not a direct setState call, so react-hooks/set-state-in-effect
+// doesn't flag it.
+const CartridgeItemRow = ({ index, item, clientId, brands, addBrand, onChange, onRemove, canRemove }) => {
+  const [suggestions, setSuggestions] = useState([])
+  const { models, addModel } = useCartridgeModels(item.cartridge_brand_id)
+  const [addingBrand, setAddingBrand] = useState(false)
+  const [newBrandName, setNewBrandName] = useState('')
+  const [addingModel, setAddingModel] = useState(false)
+  const [newModelCode, setNewModelCode] = useState('')
+
+  const handleSelectBrand = (e) => {
+    const id = e.target.value
+    if (id === '__add__') { setAddingBrand(true); return }
+    onChange('cartridge_brand_id', id)
+    onChange('cartridge_model_id', '')
+  }
+  const handleAddBrand = async () => {
+    if (!newBrandName.trim()) return
+    const b = await addBrand(newBrandName.trim())
+    onChange('cartridge_brand_id', b.id)
+    setNewBrandName('')
+    setAddingBrand(false)
+  }
+  const handleSelectModel = (e) => {
+    const id = e.target.value
+    if (id === '__add__') { setAddingModel(true); return }
+    onChange('cartridge_model_id', id)
+    const m = models.find((x) => x.id === id)
+    if (m) onChange('model', m.model_code)
+  }
+  const handleAddModel = async () => {
+    if (!newModelCode.trim()) return
+    const m = await addModel(newModelCode.trim())
+    onChange('cartridge_model_id', m.id)
+    onChange('model', m.model_code)
+    setNewModelCode('')
+    setAddingModel(false)
+  }
+
+  useEffect(() => {
+    // The "clear" branch also goes through the timeout (rather than calling
+    // setSuggestions([]) directly in the effect body) so nothing here calls
+    // setState synchronously within the effect — react-hooks/set-state-in-effect.
+    const id = setTimeout(async () => {
+      if (!clientId || !item.model.trim()) { setSuggestions([]); return }
+      try {
+        const data = await api.cartridges.suggest({
+          client_id: clientId,
+          model: item.model,
+          color: item.color || 'black',
+          tag: item.tag,
+        })
+        setSuggestions(data || [])
+      } catch {
+        setSuggestions([])
+      }
+    }, 350)
+    return () => clearTimeout(id)
+  }, [clientId, item.model, item.color, item.tag])
+
+  return (
+    <div style={{ border: '1.5px solid var(--border-light)', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.78rem', fontWeight: 590, color: 'var(--text-muted)' }}>Картридж {index + 1}</span>
+        {canRemove && (
+          <button type="button" onClick={onRemove} style={{ background: 'none', color: 'var(--accent-red)', padding: '2px', display: 'flex' }}>
+            <Trash2 size={15} />
+          </button>
+        )}
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '8px' }}>
+        <div>
+          <label style={labelStyle}>Производитель *</label>
+          {addingBrand ? (
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <input value={newBrandName} onChange={(e) => setNewBrandName(e.target.value)} placeholder="Новый производитель" style={inputStyle} autoFocus />
+              <button type="button" onClick={handleAddBrand} className="btn-outline" style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>Ок</button>
+              <button type="button" onClick={() => { setAddingBrand(false); setNewBrandName('') }} style={{ background: 'none', color: 'var(--text-muted)', padding: '0 4px' }}>✕</button>
+            </div>
+          ) : (
+            <select value={item.cartridge_brand_id} onChange={handleSelectBrand} style={inputStyle} required>
+              <option value="">— выбрать —</option>
+              {brands.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
+              <option value="__add__">+ Добавить...</option>
+            </select>
+          )}
+        </div>
+        <div>
+          <label style={labelStyle}>Модель *</label>
+          {addingModel ? (
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <input value={newModelCode} onChange={(e) => setNewModelCode(e.target.value)} placeholder="Код модели" style={inputStyle} autoFocus disabled={!item.cartridge_brand_id} />
+              <button type="button" onClick={handleAddModel} className="btn-outline" style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }} disabled={!item.cartridge_brand_id}>Ок</button>
+              <button type="button" onClick={() => { setAddingModel(false); setNewModelCode('') }} style={{ background: 'none', color: 'var(--text-muted)', padding: '0 4px' }}>✕</button>
+            </div>
+          ) : (
+            <select value={item.cartridge_model_id} onChange={handleSelectModel} style={inputStyle} disabled={!item.cartridge_brand_id} required>
+              <option value="">{item.cartridge_brand_id ? '— выбрать —' : 'сначала производителя'}</option>
+              {models.map((m) => <option key={m.id} value={m.id}>{m.model_code}</option>)}
+              <option value="__add__">+ Добавить...</option>
+            </select>
+          )}
+        </div>
+        <div>
+          <label style={labelStyle}>Цвет</label>
+          <input value={item.color} onChange={(e) => onChange('color', e.target.value)} placeholder="black" style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Метка</label>
+          <input value={item.tag} onChange={(e) => onChange('tag', e.target.value)} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Кол-во заправок</label>
+          <input type="number" value={item.refill_count} onChange={(e) => onChange('refill_count', e.target.value)} style={inputStyle} />
+        </div>
+      </div>
+
+      {suggestions.length > 0 && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
+          {suggestions.map((s) => (
+            <button
+              key={`${s.last_batch_at}-${s.refill_count}-${s.tag_matched}`}
+              type="button"
+              onClick={() => onChange('refill_count', String(s.refill_count))}
+              title={`Последняя партия: ${new Date(s.last_batch_at).toLocaleDateString('ru-RU')} — нажмите чтобы применить`}
+              style={{
+                fontSize: '0.7rem', fontWeight: 510, padding: '3px 9px', borderRadius: '50px',
+                border: 'none', cursor: 'pointer',
+                background: s.tag_matched ? 'rgba(34,197,94,0.12)' : 'rgba(148,163,184,0.18)',
+                color: s.tag_matched ? 'var(--accent-green)' : 'var(--text-muted)',
+              }}
+            >
+              {s.tag_matched ? 'Тот же картридж' : 'Похожий картридж'}: {s.refill_count} (нажмите чтобы применить)
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div>
+        <label style={labelStyle}>Цена, ₽</label>
+        <input type="number" value={item.price} onChange={(e) => onChange('price', e.target.value)} style={inputStyle} />
+      </div>
+
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <textarea value={item.note} onChange={(e) => onChange('note', e.target.value)} rows={2} style={{ ...inputStyle, resize: 'vertical' }} />
+      </div>
+    </div>
+  )
+}
+
+export default CartridgeItemRow
diff --git a/production/web/src/cartridges/CartridgeKanbanBoard.jsx b/production/web/src/cartridges/CartridgeKanbanBoard.jsx
new file mode 100644
index 0000000..a4dcbec
--- /dev/null
+++ b/production/web/src/cartridges/CartridgeKanbanBoard.jsx
@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react'
+import { DndContext, closestCorners, DragOverlay, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { useOutletContext, useSearchParams } from 'react-router-dom'
+import { useCartridgeBatches } from './useCartridgeBatches'
+import { useIsMobile } from '../hooks/useIsMobile'
+import CartridgeKanbanColumn from './CartridgeKanbanColumn'
+import BatchCard from './BatchCard'
+import BatchModal from './BatchModal'
+import KanbanBoardSwitcher from '../orders/KanbanBoardSwitcher'
+import { STATUSES } from './statuses'
+
+const CartridgeKanbanBoard = () => {
+  const { batchesByStatus, loading, updateStatus, refetch } = useCartridgeBatches()
+  const { showNewBatch, setShowNewBatch } = useOutletContext() || {}
+  const [searchParams, setSearchParams] = useSearchParams()
+  const isMobile = useIsMobile()
+
+  // Landed here via the "+Заявка" type-selector's "Картридж" branch
+  // (AdminLayout.jsx navigates to /cartridges?new=1 rather than owning
+  // BatchModal itself, since it's this page — not the header — that
+  // renders it). Strip the param right after so a back-navigation or
+  // refresh doesn't reopen the modal.
+  useEffect(() => {
+    if (searchParams.get('new') === '1' && setShowNewBatch) {
+      setShowNewBatch(true)
+      const next = new URLSearchParams(searchParams)
+      next.delete('new')
+      setSearchParams(next, { replace: true })
+    }
+  }, [searchParams, setSearchParams, setShowNewBatch])
+  const [activeBatch, setActiveBatch] = useState(null)
+  const [selectedBatch, setSelectedBatch] = useState(null)
+  const [localOverrides, setLocalOverrides] = useState({})
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  const findBatchStatus = (batchId) => {
+    if (localOverrides[batchId]) return localOverrides[batchId]
+    for (const status of STATUSES) {
+      if (batchesByStatus[status]?.find((b) => b.id === batchId)) return status
+    }
+    return null
+  }
+
+  const handleDragStart = ({ active }) => {
+    const status = findBatchStatus(active.id)
+    if (status) setActiveBatch(batchesByStatus[status]?.find((b) => b.id === active.id))
+  }
+
+  const handleDragEnd = async ({ active, over }) => {
+    setActiveBatch(null)
+    if (!over) return
+
+    const targetStatus = STATUSES.includes(over.id) ? over.id : findBatchStatus(over.id)
+    const sourceStatus = findBatchStatus(active.id)
+
+    if (targetStatus && sourceStatus !== targetStatus) {
+      setLocalOverrides((prev) => ({ ...prev, [active.id]: targetStatus }))
+      const { error } = await updateStatus(active.id, targetStatus)
+      setLocalOverrides((prev) => {
+        const next = { ...prev }
+        delete next[active.id]
+        return next
+      })
+      if (error) console.error('Status update failed:', error)
+    }
+  }
+
+  const effectiveBatchesByStatus = STATUSES.reduce((acc, status) => {
+    const base = (batchesByStatus[status] || []).filter(
+      (b) => !localOverrides[b.id] || localOverrides[b.id] === status
+    )
+    const overrideBatches = Object.entries(localOverrides)
+      .filter(([, s]) => s === status)
+      .map(([id]) => Object.values(batchesByStatus).flat().find((b) => b.id === id))
+      .filter(Boolean)
+    acc[status] = [...base, ...overrideBatches]
+    return acc
+  }, {})
+
+  if (loading) {
+    return (
+      <>
+        <KanbanBoardSwitcher />
+        <div style={{ textAlign: 'center', padding: '60px', color: 'var(--text-muted)', fontFamily: 'var(--font-heading)' }}>
+          Загрузка партий...
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <KanbanBoardSwitcher />
+      <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+        <div style={{
+          display: 'flex', gap: '14px', alignItems: 'flex-start',
+          overflowX: isMobile ? 'auto' : 'visible',
+          WebkitOverflowScrolling: 'touch',
+          paddingBottom: isMobile ? '12px' : '20px',
+          minWidth: 'min-content',
+        }}>
+          {STATUSES.map((status) => (
+            <CartridgeKanbanColumn
+              key={status}
+              status={status}
+              batches={effectiveBatchesByStatus[status] || []}
+              onCardClick={setSelectedBatch}
+              isMobile={isMobile}
+            />
+          ))}
+        </div>
+        <DragOverlay>
+          {activeBatch && <BatchCard batch={activeBatch} onClick={() => {}} />}
+        </DragOverlay>
+      </DndContext>
+
+      {selectedBatch && (
+        <BatchModal
+          batchId={selectedBatch.id}
+          mode="edit"
+          onClose={() => { setSelectedBatch(null); refetch() }}
+        />
+      )}
+
+      {showNewBatch && (
+        <BatchModal
+          mode="create"
+          onClose={() => setShowNewBatch(false)}
+          onSaved={() => { setShowNewBatch(false); refetch() }}
+        />
+      )}
+    </>
+  )
+}
+
+export default CartridgeKanbanBoard
diff --git a/production/web/src/cartridges/CartridgeKanbanColumn.jsx b/production/web/src/cartridges/CartridgeKanbanColumn.jsx
new file mode 100644
index 0000000..f2d485e
--- /dev/null
+++ b/production/web/src/cartridges/CartridgeKanbanColumn.jsx
@@ -0,0 +1,56 @@
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import BatchCard from './BatchCard'
+import { STATUS_COLORS, STATUS_LABELS } from './statuses'
+
+const CartridgeKanbanColumn = ({ status, batches, onCardClick, isMobile }) => {
+  const { setNodeRef, isOver } = useDroppable({ id: status })
+
+  return (
+    <div style={{
+      flex: isMobile ? '0 0 260px' : '1 1 200px',
+      minWidth: isMobile ? '260px' : '215px',
+      maxWidth: isMobile ? '260px' : '270px',
+      display: 'flex', flexDirection: 'column', gap: '10px',
+    }}>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: '8px',
+        padding: '10px 13px',
+        background: 'var(--color-surface)', borderRadius: '10px',
+        border: '1px solid var(--border-light)',
+        borderTop: `3px solid ${STATUS_COLORS[status]}`,
+      }}>
+        <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 590, fontSize: '0.85rem', flex: 1 }}>
+          {STATUS_LABELS[status]}
+        </span>
+        <span style={{
+          background: STATUS_COLORS[status], color: '#fff',
+          borderRadius: '50px', padding: '1px 8px',
+          fontSize: '0.72rem', fontWeight: 590,
+        }}>
+          {batches.length}
+        </span>
+      </div>
+
+      <div
+        ref={setNodeRef}
+        style={{
+          flex: 1, minHeight: '180px',
+          display: 'flex', flexDirection: 'column', gap: '8px',
+          padding: '6px', borderRadius: '10px',
+          background: isOver ? 'var(--color-accent-soft)' : 'transparent',
+          border: isOver ? '2px dashed var(--accent-blue)' : '2px dashed transparent',
+          transition: 'all 0.15s',
+        }}
+      >
+        <SortableContext items={batches.map((b) => b.id)} strategy={verticalListSortingStrategy}>
+          {batches.map((batch) => (
+            <BatchCard key={batch.id} batch={batch} onClick={() => onCardClick(batch)} />
+          ))}
+        </SortableContext>
+      </div>
+    </div>
+  )
+}
+
+export default CartridgeKanbanColumn
diff --git a/production/web/src/cartridges/CartridgeLabelPrint.jsx b/production/web/src/cartridges/CartridgeLabelPrint.jsx
new file mode 100644
index 0000000..fe6df0c
--- /dev/null
+++ b/production/web/src/cartridges/CartridgeLabelPrint.jsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { X, Printer } from 'lucide-react'
+import * as api from '../lib/api'
+
+// Print-ready label for one physical cartridge — opened after
+// api.cartridges.printLabel resolves an id+code (see ItemEditRow's
+// "Печать этикетки" button in BatchModal.jsx). @media print below hides
+// everything except the label itself, so window.print() from here doesn't
+// also print the whole app chrome behind it — the label's own box is sized
+// for a small thermal/sticker printer, not a full page.
+const CartridgeLabelPrint = ({ recurringItemId, code, model, color, onClose }) => {
+  const [qrUrl, setQrUrl] = useState(null)
+
+  useEffect(() => {
+    let objectUrl
+    let cancelled = false
+    api.cartridges.qrCodeBlobUrl(recurringItemId).then((u) => {
+      if (cancelled) { URL.revokeObjectURL(u); return }
+      objectUrl = u
+      setQrUrl(u)
+    }).catch(() => {})
+    return () => {
+      cancelled = true
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    }
+  }, [recurringItemId])
+
+  return (
+    <div className="modal-overlay label-print-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300 }} onClick={onClose}>
+      <div style={{ background: '#fff', borderRadius: '12px', padding: '20px', width: '280px' }} onClick={(e) => e.stopPropagation()}>
+        <div className="label-print-controls" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+          <button type="button" onClick={() => window.print()} className="btn-primary" style={{ padding: '7px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <Printer size={15} /> Печать
+          </button>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: '#666' }}><X size={20} /></button>
+        </div>
+        <div id="cartridge-label" style={{ textAlign: 'center', color: '#000' }}>
+          {qrUrl ? <img src={qrUrl} alt="QR" style={{ width: '160px', height: '160px' }} /> : <div style={{ width: '160px', height: '160px', margin: '0 auto', background: '#eee' }} />}
+          <p style={{ fontSize: '0.85rem', fontWeight: 600, marginTop: '6px' }}>{model}{color ? ` · ${color}` : ''}</p>
+          <p style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '0.05em', marginTop: '2px' }}>{code}</p>
+        </div>
+      </div>
+      {/* Scoped to this component's own render — @media print rules that
+          hide everything but #cartridge-label. A <style> tag mounted only
+          while this modal is open, so it never affects printing elsewhere
+          in the app. */}
+      <style>{`
+        @media print {
+          body * { visibility: hidden; }
+          #cartridge-label, #cartridge-label * { visibility: visible; }
+          #cartridge-label { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); }
+          .label-print-overlay { background: none !important; }
+          .label-print-controls { display: none !important; }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default CartridgeLabelPrint
diff --git a/production/web/src/cartridges/QrScanField.jsx b/production/web/src/cartridges/QrScanField.jsx
new file mode 100644
index 0000000..9a235a2
--- /dev/null
+++ b/production/web/src/cartridges/QrScanField.jsx
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import { QrCode } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from '../orders/formStyles'
+import ScanField from '../ui/ScanField'
+
+// Cartridge-specific wrapper around the shared ScanField (../ui/ScanField)
+// — owns the scanByCode lookup + not-found/error messaging, ScanField
+// itself just gets a code from a USB scanner, manual typing, or the camera
+// and hands it back.
+const QrScanField = ({ onResolved }) => {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleScan = async (code) => {
+    setBusy(true)
+    setError('')
+    try {
+      const data = await api.cartridges.scanByCode(code)
+      onResolved(code, data)
+    } catch (err) {
+      setError(err.status === 404 ? 'Код не найден — это первый приём этого картриджа' : err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div>
+      <ScanField
+        onScan={handleScan}
+        busy={busy}
+        icon={QrCode}
+        placeholder="Скан QR или код с этикетки..."
+        inputStyle={inputStyle}
+      />
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.78rem', marginTop: '4px' }}>{error}</p>}
+    </div>
+  )
+}
+
+export default QrScanField
diff --git a/production/web/src/cartridges/cartridgeItem.js b/production/web/src/cartridges/cartridgeItem.js
new file mode 100644
index 0000000..e3042a0
--- /dev/null
+++ b/production/web/src/cartridges/cartridgeItem.js
@@ -0,0 +1,14 @@
+// Split out from CartridgeItemRow.jsx — eslint-plugin-react-refresh forbids
+// a component file from also exporting non-component values (same pattern
+// as orders/formStyles.js).
+export const MAX_ITEMS = 50
+
+export const emptyCartridgeItem = () => ({
+  _id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+  model: '', color: '', tag: '', refill_count: '', price: '', note: '',
+  cartridge_brand_id: '', cartridge_model_id: '',
+  // Set by a QR scan resolving to a previously-labeled physical cartridge
+  // (see QrScanField.jsx) — chains this item onto that cartridge's history
+  // instead of starting a fresh one. Empty for a first-time intake.
+  recurring_item_id: '',
+})
diff --git a/production/web/src/cartridges/statuses.js b/production/web/src/cartridges/statuses.js
new file mode 100644
index 0000000..adb2c67
--- /dev/null
+++ b/production/web/src/cartridges/statuses.js
@@ -0,0 +1,40 @@
+// Mirrors the CHECK constraint on cartridge_batches.status in the backend
+// migration — keep these two lists in sync if the enum ever changes. This is
+// a different enum from src/orders/statuses.js — batches and orders don't
+// share a status lifecycle.
+export const STATUSES = ['new', 'in_progress', 'ready', 'completed', 'cancelled']
+
+export const STATUS_LABELS = {
+  new: 'Новая',
+  in_progress: 'В работе',
+  ready: 'Готово',
+  completed: 'Выдано',
+  cancelled: 'Отменено',
+}
+
+export const STATUS_COLORS = {
+  new: '#f59e0b',
+  in_progress: '#8b5cf6',
+  ready: '#22c55e',
+  completed: '#64748b',
+  cancelled: '#ef4444',
+}
+
+// Per-cartridge status — a third, separate enum. Independent of the batch's
+// own status: a batch can be "in_progress" while individual cartridges
+// inside it are still "pending" or already "done".
+export const ITEM_STATUSES = ['pending', 'in_progress', 'done', 'replacement_needed']
+
+export const ITEM_STATUS_LABELS = {
+  pending: 'Ожидает',
+  in_progress: 'В работе',
+  done: 'Готово',
+  replacement_needed: 'Нужна замена',
+}
+
+export const ITEM_STATUS_COLORS = {
+  pending: '#f59e0b',
+  in_progress: '#8b5cf6',
+  done: '#22c55e',
+  replacement_needed: '#ef4444',
+}
diff --git a/production/web/src/cartridges/useCartridgeBatches.js b/production/web/src/cartridges/useCartridgeBatches.js
new file mode 100644
index 0000000..ca5fb9a
--- /dev/null
+++ b/production/web/src/cartridges/useCartridgeBatches.js
@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+import { subscribeRealtime } from '../lib/realtime'
+import { STATUSES } from './statuses'
+
+// Same realtime-push-plus-fallback-poll approach as
+// src/orders/useOrders.js — see its comment. Keep FALLBACK_POLL_MS in sync
+// with useOrders.js if it ever changes.
+const FALLBACK_POLL_MS = 120000
+
+export function useCartridgeBatches() {
+  const [batches, setBatches] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const fetchBatches = useCallback(async () => {
+    try {
+      const data = await api.cartridges.list()
+      setBatches(data || [])
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    // Wrapped in a local async IIFE rather than calling fetchBatches()
+    // directly — react-hooks/set-state-in-effect flags a direct call to a
+    // function it can see synchronously reaches setState, even though the
+    // actual setState here happens after an await.
+    (async () => { await fetchBatches() })()
+
+    const unsubscribe = subscribeRealtime((topic) => {
+      if (topic === 'cartridge_batches') fetchBatches()
+    })
+    const id = setInterval(fetchBatches, FALLBACK_POLL_MS)
+    return () => {
+      unsubscribe()
+      clearInterval(id)
+    }
+  }, [fetchBatches])
+
+  const batchesByStatus = STATUSES.reduce((acc, status) => {
+    acc[status] = batches.filter((b) => b.status === status)
+    return acc
+  }, {})
+
+  const updateStatus = async (batchId, newStatus) => {
+    try {
+      await api.cartridges.updateStatus(batchId, newStatus)
+      await fetchBatches()
+      return { error: null }
+    } catch (err) {
+      return { error: err.message }
+    }
+  }
+
+  const createBatch = async (payload) => {
+    try {
+      const data = await api.cartridges.create(payload)
+      await fetchBatches()
+      return { data, error: null }
+    } catch (err) {
+      return { data: null, error: err.message }
+    }
+  }
+
+  return { batches, batchesByStatus, loading, error, updateStatus, createBatch, refetch: fetchBatches }
+}
diff --git a/production/web/src/cartridges/useCartridgeCatalog.js b/production/web/src/cartridges/useCartridgeCatalog.js
new file mode 100644
index 0000000..5f01d0e
--- /dev/null
+++ b/production/web/src/cartridges/useCartridgeCatalog.js
@@ -0,0 +1,54 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Feeds BatchModal's brand picker, same pattern as orders/useDeviceCatalog.
+// Models are per-brand and fetched on demand (loadModels), not all at once —
+// there's no reason to pull every brand's models before one is picked.
+export function useCartridgeCatalog() {
+  const [brands, setBrands] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    try {
+      setBrands(await api.cartridgeBrands.list())
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await reload() })()
+  }, [reload])
+
+  const addBrand = async (name) => {
+    const b = await api.cartridgeBrands.create({ name })
+    setBrands((prev) => [...prev, b].sort((a, c) => a.name.localeCompare(c.name, 'ru')))
+    return b
+  }
+
+  return { brands, loading, addBrand }
+}
+
+// Separate hook (not merged into useCartridgeCatalog) since each cartridge
+// item in a batch has its own brand selection and needs its own models list.
+export function useCartridgeModels(brandId) {
+  const [models, setModels] = useState([])
+
+  const reload = useCallback(async () => {
+    if (!brandId) { setModels([]); return }
+    setModels(await api.cartridgeModels.list(brandId))
+  }, [brandId])
+
+  useEffect(() => {
+    (async () => { await reload() })()
+  }, [reload])
+
+  const addModel = async (modelCode) => {
+    const m = await api.cartridgeModels.create({ brand_id: brandId, model_code: modelCode })
+    setModels((prev) => [...prev, m].sort((a, c) => a.model_code.localeCompare(c.model_code, 'ru')))
+    return m
+  }
+
+  return { models, addModel }
+}
diff --git a/production/web/src/cash/CashPage.jsx b/production/web/src/cash/CashPage.jsx
new file mode 100644
index 0000000..c109ab9
--- /dev/null
+++ b/production/web/src/cash/CashPage.jsx
@@ -0,0 +1,444 @@
+import { useState, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { Plus, ArrowLeftRight, Archive, ArchiveRestore, ArrowUpFromLine, ArrowDownToLine, Clock3, PackageCheck, Check } from 'lucide-react'
+import * as api from '../lib/api'
+import { useCash } from './useCash'
+import { useRegisters } from './useRegisters'
+import CashTransactionForm from './CashTransactionForm'
+import RegisterTransferForm from './RegisterTransferForm'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import Modal from '../ui/Modal'
+import Tabs, { TabPanel } from '../ui/Tabs'
+import { METHOD_LABELS, METHOD_ACCENTS, ALL_METHODS } from './paymentMethods'
+
+const TYPE_LABELS = { income: 'Доход', expense: 'Расход', payroll: 'Зарплата', transfer: 'Перевод' }
+const TYPE_COLORS = { income: 'var(--color-success)', expense: 'var(--color-danger)', payroll: 'var(--color-warn)', transfer: 'var(--color-accent)' }
+const CASH_TABS = [{ key: 'registers', label: 'Кассы' }, { key: 'transactions', label: 'Транзакции' }]
+
+const selectStyle = { ...inputStyle, width: 'auto', padding: '10px 14px' }
+
+function SummaryTile({ label, value, color, hint }) {
+  return (
+    <div className="glass-panel" style={{ padding: '16px 20px', flex: 1, minWidth: '140px' }}>
+      <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{label}</p>
+      <p style={{ fontSize: '1.3rem', fontWeight: 590, color }}>{Number(value).toLocaleString('ru-RU')} ₽</p>
+      {hint && <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginTop: '2px' }}>{hint}</p>}
+    </div>
+  )
+}
+
+// Owner-facing "how much should still come in" figure — orders sitting in
+// a ready-for-pickup status with a price but (presumably) no payment
+// recorded yet. Plain total, not netted against partial prepayments — see
+// cash.Handler.ExpectedFromReadyOrders' own doc comment.
+function ExpectedReadyTile() {
+  const [data, setData] = useState(null)
+  useEffect(() => { api.cash.expectedReady().then(setData).catch(() => setData(null)) }, [])
+  if (!data || Number(data.amount) === 0) return null
+  return (
+    <div className="glass-panel" style={{ padding: '16px 20px', flex: 1, minWidth: '220px', display: 'flex', alignItems: 'center', gap: '12px' }}>
+      <span style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+        width: '38px', height: '38px', borderRadius: '11px',
+        background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+      }}>
+        <PackageCheck size={18} />
+      </span>
+      <div>
+        <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>Ожидается от готовых заказов</p>
+        <p style={{ fontSize: '1.2rem', fontWeight: 590 }}>
+          {Number(data.amount).toLocaleString('ru-RU')} ₽
+          <span style={{ fontSize: '0.78rem', fontWeight: 400, color: 'var(--text-muted)' }}> · {data.count} {pluralOrders(data.count)}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function pluralOrders(n) {
+  const mod10 = n % 10, mod100 = n % 100
+  if (mod10 === 1 && mod100 !== 11) return 'заявка'
+  if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100)) return 'заявки'
+  return 'заявок'
+}
+
+function TypeCheckboxes({ value, onChange }) {
+  const toggle = (m) => onChange(value.includes(m) ? value.filter((v) => v !== m) : [...value, m])
+  return (
+    <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+      {ALL_METHODS.map((m) => (
+        <label key={m} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.85rem' }}>
+          <input type="checkbox" checked={value.includes(m)} onChange={() => toggle(m)} />
+          {METHOD_LABELS[m]}
+        </label>
+      ))}
+    </div>
+  )
+}
+
+function RegisterCreateForm({ onSaved }) {
+  const [name, setName] = useState('')
+  const [types, setTypes] = useState(['cash'])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (types.length === 0) { setError('Выберите хотя бы один тип денег'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.registers.create({ name, types })
+      setName('')
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div>
+        <label style={labelStyle}>Название</label>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Касса №1" style={inputStyle} required />
+      </div>
+      <div>
+        <label style={labelStyle}>Какие деньги принимает</label>
+        <TypeCheckboxes value={types} onChange={setTypes} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start' }}>
+        {saving ? 'Создаём...' : 'Создать кассу'}
+      </button>
+    </form>
+  )
+}
+
+// livesklad-style register card, extended for multi-type registers: one
+// balance line per accepted type (наличные/карта/безнал can all live in the
+// same physical till), a pending line for income handed over on a method
+// that hasn't actually landed yet (see cash_transactions.is_pending), then
+// the same three quick actions as before — Выдача/Внесение/Перевод write
+// straight into this register without leaving the card.
+function RegisterCard({ register, onToggleArchive, onChanged }) {
+  const [action, setAction] = useState(null) // 'payout' | 'deposit' | 'transfer' | null
+  const total = Number(register.total)
+  const pendingEntries = Object.entries(register.pending || {}).filter(([, v]) => Number(v) !== 0)
+
+  return (
+    <div className="glass-panel" style={{ padding: '20px', opacity: register.is_archived ? 0.55 : 1 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px', marginBottom: '12px' }}>
+        <p style={{ fontSize: '0.95rem', fontWeight: 590 }}>{register.name}</p>
+        <button
+          type="button"
+          onClick={() => onToggleArchive(register)}
+          title={register.is_archived ? 'Восстановить кассу' : 'Архивировать кассу'}
+          style={{ background: 'none', color: 'var(--text-muted)', display: 'flex', padding: '2px' }}
+        >
+          {register.is_archived ? <ArchiveRestore size={15} /> : <Archive size={15} />}
+        </button>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '10px' }}>
+        {register.types.map((t) => (
+          <div key={t} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: '0.85rem' }}>
+            <span style={{ color: METHOD_ACCENTS[t], fontWeight: 510 }}>{METHOD_LABELS[t]}</span>
+            <span style={{ fontVariantNumeric: 'tabular-nums', color: Number(register.balances[t]) < 0 ? 'var(--accent-red)' : 'inherit' }}>
+              {Number(register.balances[t]).toLocaleString('ru-RU')} ₽
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <p style={{
+        fontSize: '1.5rem', fontWeight: 590, fontFamily: 'var(--font-heading)',
+        color: total < 0 ? 'var(--accent-red)' : 'inherit', marginBottom: pendingEntries.length ? '10px' : '16px',
+        paddingTop: '8px', borderTop: '1px solid var(--color-border)',
+      }}>
+        {total.toLocaleString('ru-RU')} ₽
+      </p>
+
+      {pendingEntries.length > 0 && (
+        <div style={{ background: 'var(--color-warn-soft)', borderRadius: '10px', padding: '10px 12px', marginBottom: '16px' }}>
+          <p style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '0.72rem', fontWeight: 590, color: 'var(--color-warn)', marginBottom: '4px' }}>
+            <Clock3 size={12} /> Ожидает оплаты
+          </p>
+          {pendingEntries.map(([t, v]) => (
+            <div key={t} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem' }}>
+              <span>{METHOD_LABELS[t]}</span>
+              <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 510 }}>{Number(v).toLocaleString('ru-RU')} ₽</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: '6px' }}>
+        <button type="button" onClick={() => setAction('payout')} className="btn-outline" style={{ flex: 1, padding: '9px 6px', fontSize: '0.76rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3px' }}>
+          <ArrowUpFromLine size={14} /> Выдача
+        </button>
+        <button type="button" onClick={() => setAction('deposit')} className="btn-outline" style={{ flex: 1, padding: '9px 6px', fontSize: '0.76rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3px' }}>
+          <ArrowDownToLine size={14} /> Внесение
+        </button>
+        <button type="button" onClick={() => setAction('transfer')} className="btn-outline" style={{ flex: 1, padding: '9px 6px', fontSize: '0.76rem', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '3px' }}>
+          <ArrowLeftRight size={14} /> Перевод
+        </button>
+      </div>
+
+      {action === 'payout' && (
+        <Modal title={`Выдача — ${register.name}`} onClose={() => setAction(null)} maxWidth="440px">
+          <CashTransactionForm defaultType="expense" fixedRegisterId={register.id} onSaved={() => { setAction(null); onChanged() }} />
+        </Modal>
+      )}
+      {action === 'deposit' && (
+        <Modal title={`Внесение — ${register.name}`} onClose={() => setAction(null)} maxWidth="440px">
+          <CashTransactionForm defaultType="income" fixedRegisterId={register.id} onSaved={() => { setAction(null); onChanged() }} />
+        </Modal>
+      )}
+      {action === 'transfer' && (
+        <Modal title={`Перевод из «${register.name}»`} onClose={() => setAction(null)} maxWidth="440px">
+          <RegisterTransferForm defaultFromRegisterId={register.id} onSaved={() => { setAction(null); onChanged() }} />
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+function RegistersTab({ scope, refreshKey }) {
+  const [showRegisterCreate, setShowRegisterCreate] = useState(false)
+  const [showArchived, setShowArchived] = useState(false)
+  const { registers, reload: reloadRegisters } = useRegisters()
+  const visibleRegisters = registers.filter((r) => showArchived || !r.is_archived)
+
+  // See CashPage's own doc comment — refreshKey ticks on every tab switch;
+  // guarded to skip the very first mount since useRegisters already fetches
+  // once on its own.
+  useEffect(() => { if (refreshKey > 0) reloadRegisters() }, [refreshKey, reloadRegisters])
+
+  const handleToggleArchive = async (register) => {
+    await api.registers.archive(register.id, !register.is_archived)
+    reloadRegisters()
+  }
+
+  return (
+    <div>
+      {scope === 'shop' && (
+        <p style={{ color: 'var(--color-shop-accent-fg)', fontWeight: 510, fontSize: '0.85rem', marginBottom: '14px' }}>
+          Касса магазина — только продажи (POS)
+        </p>
+      )}
+
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+        <ExpectedReadyTile />
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginBottom: '14px' }}>
+        {registers.some((r) => r.is_archived) && (
+          <button type="button" onClick={() => setShowArchived((v) => !v)} className="btn-outline" style={{ padding: '7px 12px', fontSize: '0.78rem' }}>
+            {showArchived ? 'Скрыть архивные' : 'Показать архивные'}
+          </button>
+        )}
+        <button type="button" onClick={() => setShowRegisterCreate(true)} className="btn-primary" style={{ padding: '7px 14px', fontSize: '0.78rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={14} /> Касса
+        </button>
+      </div>
+
+      {visibleRegisters.length === 0 ? (
+        <p style={{ color: 'var(--text-muted)', padding: '20px', textAlign: 'center' }}>Касс пока нет</p>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: '14px' }}>
+          {visibleRegisters.map((r) => (
+            <RegisterCard key={r.id} register={r} onToggleArchive={handleToggleArchive} onChanged={reloadRegisters} />
+          ))}
+        </div>
+      )}
+
+      {showRegisterCreate && (
+        <Modal title="Новая касса" onClose={() => setShowRegisterCreate(false)} maxWidth="420px">
+          <RegisterCreateForm onSaved={() => { reloadRegisters(); setShowRegisterCreate(false) }} />
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+function TransactionsTab({ scope, refreshKey }) {
+  const [type, setType] = useState('')
+  const [method, setMethod] = useState('')
+  const [registerId, setRegisterId] = useState('')
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const [confirmingId, setConfirmingId] = useState(null)
+  const { transactions, summary, loading, error, refetch } = useCash({ type, from, to, scope, registerId, method, refreshKey })
+  const { registers } = useRegisters()
+  const registerName = (id) => registers.find((r) => r.id === id)?.name
+
+  const net = summary ? Number(summary.income) - Number(summary.expense) - Number(summary.payroll) : 0
+
+  const handleConfirm = async (id) => {
+    setConfirmingId(id)
+    try {
+      await api.cash.confirm(id)
+      refetch()
+    } finally {
+      setConfirmingId(null)
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+        {summary && (
+          <>
+            <SummaryTile label="Доход" value={summary.income} color="var(--accent-green)" hint="без ожидающих оплаты" />
+            <SummaryTile label="Расход" value={summary.expense} color="var(--accent-red)" />
+            <SummaryTile label="Зарплата" value={summary.payroll} color="var(--accent-orange)" />
+            <SummaryTile label="Итого" value={net} color={net < 0 ? 'var(--accent-red)' : 'var(--accent-blue)'} />
+          </>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', gap: '6px', marginBottom: '14px', flexWrap: 'wrap' }}>
+        {ALL_METHODS.map((v) => (
+          <button
+            key={v}
+            type="button"
+            onClick={() => setMethod(method === v ? '' : v)}
+            style={{
+              padding: '7px 14px', borderRadius: '50px', fontSize: '0.8rem', fontWeight: 510,
+              border: `1.5px solid ${METHOD_ACCENTS[v]}`,
+              background: method === v ? METHOD_ACCENTS[v] : 'transparent',
+              color: method === v ? '#fff' : METHOD_ACCENTS[v],
+            }}
+          >
+            {METHOD_LABELS[v]}
+          </button>
+        ))}
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div>
+          <label style={labelStyle}>Тип</label>
+          <select value={type} onChange={(e) => setType(e.target.value)} style={selectStyle}>
+            <option value="">Все</option>
+            {Object.entries(TYPE_LABELS).map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>Касса</label>
+          <select value={registerId} onChange={(e) => setRegisterId(e.target.value)} style={selectStyle}>
+            <option value="">Все</option>
+            {registers.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>С</label>
+          <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={selectStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>По</label>
+          <input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={selectStyle} />
+        </div>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Запись
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : error ? (
+        <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {transactions.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Записей не найдено</p>}
+          {transactions.map((t) => (
+            <div
+              key={t.id}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                padding: '14px 18px 14px 15px', borderBottom: '1px solid var(--border-light)',
+                borderLeft: `3px solid ${TYPE_COLORS[t.type] || 'transparent'}`,
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+                  {TYPE_LABELS[t.type] || t.type}
+                  <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}> · {METHOD_LABELS[t.method] || t.method}</span>
+                  {registerName(t.register_id) && <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}> · {registerName(t.register_id)}</span>}
+                  {t.is_pending && (
+                    <span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.7rem', fontWeight: 590, color: 'var(--color-warn)', background: 'var(--color-warn-soft)', padding: '2px 8px', borderRadius: '50px' }}>
+                      <Clock3 size={10} /> ожидает оплаты
+                    </span>
+                  )}
+                </p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {new Date(t.created_at).toLocaleString('ru-RU')} · {t.staff_name}
+                  {t.note ? ` — ${t.note}` : ''}
+                </p>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexShrink: 0 }}>
+                {t.is_pending && (
+                  <button
+                    type="button" onClick={() => handleConfirm(t.id)} disabled={confirmingId === t.id}
+                    className="btn-outline" style={{ padding: '5px 10px', fontSize: '0.74rem', display: 'flex', alignItems: 'center', gap: '4px' }}
+                  >
+                    <Check size={12} /> {confirmingId === t.id ? '...' : 'Оплачено'}
+                  </button>
+                )}
+                <span style={{ fontSize: '0.98rem', fontWeight: 590, color: Number(t.amount) < 0 ? 'var(--accent-red)' : 'inherit' }}>
+                  {Number(t.amount) > 0 ? '+' : ''}{Number(t.amount).toLocaleString('ru-RU')} ₽
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <Modal title="Новая запись" onClose={() => setShowCreate(false)}>
+          <CashTransactionForm onSaved={() => { refetch(); setShowCreate(false) }} />
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+const CashPage = () => {
+  const [searchParams] = useSearchParams()
+  const scope = searchParams.get('scope') === 'shop' ? 'shop' : ''
+  const [activeTab, setActiveTab] = useState('registers')
+  // Both tab panels stay mounted (see Tabs.jsx's own doc comment) so
+  // switching tabs doesn't refetch by itself — a Кассы quick action
+  // (Выдача/Внесение/Перевод) changes what Транзакции should show, and a
+  // Транзакции action (Оплачено, confirming a pending row) changes what
+  // Кассы' own balances should show, but each tab only ever fetched once on
+  // mount. Bumping this counter on every switch and having both tabs
+  // reload off of it is cheap (one extra fetch, only when a staff member
+  // actually looks at that tab) and always correct, unlike trying to track
+  // exactly which action should invalidate which tab.
+  const [refreshKey, setRefreshKey] = useState(0)
+
+  const handleTabChange = (key) => {
+    setActiveTab(key)
+    setRefreshKey((k) => k + 1)
+  }
+
+  return (
+    <div>
+      <Tabs tabs={CASH_TABS} activeTab={activeTab} onChange={handleTabChange} />
+      <div style={{ paddingTop: '18px' }}>
+        <TabPanel tabKey="registers" activeTab={activeTab}>
+          <RegistersTab scope={scope} refreshKey={refreshKey} />
+        </TabPanel>
+        <TabPanel tabKey="transactions" activeTab={activeTab}>
+          <TransactionsTab scope={scope} refreshKey={refreshKey} />
+        </TabPanel>
+      </div>
+    </div>
+  )
+}
+
+export default CashPage
diff --git a/production/web/src/cash/CashSection.jsx b/production/web/src/cash/CashSection.jsx
new file mode 100644
index 0000000..2f6a4db
--- /dev/null
+++ b/production/web/src/cash/CashSection.jsx
@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+import CashTransactionForm from './CashTransactionForm'
+
+const TYPE_LABELS = { income: 'Доход', expense: 'Расход', payroll: 'Зарплата' }
+const METHOD_LABELS = { cash: 'наличные', card: 'карта', invoice: 'безнал' }
+
+// Embedded in OrderModal/BatchModal, mirroring PartsUsedSection's shape —
+// listFn closes over the order/cartridge-batch id so this component stays
+// ignorant of which parent it's attached to. `id` is kept as an explicit
+// prop purely to key the load effect (see PartsUsedSection.jsx for why).
+const CashSection = ({ id, listFn, orderId, cartridgeBatchId }) => {
+  const [transactions, setTransactions] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      setTransactions(await listFn())
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
+
+  return (
+    <div>
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '8px' }}>Касса</h3>
+      <CashTransactionForm orderId={orderId} cartridgeBatchId={cartridgeBatchId} onSaved={load} />
+
+      <div style={{ marginTop: '12px' }}>
+        {loading ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+        ) : transactions.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Записей пока нет</p>
+        ) : (
+          transactions.map((t) => (
+            <div key={t.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.82rem', padding: '8px 0', borderBottom: '1px solid var(--border-light)' }}>
+              <div>
+                <span style={{ fontWeight: 510 }}>{TYPE_LABELS[t.type] || t.type}</span>
+                <span style={{ color: 'var(--text-muted)' }}>
+                  {' '}· {METHOD_LABELS[t.method] || t.method} · {t.staff_name}
+                  {t.note ? ` — ${t.note}` : ''}
+                </span>
+              </div>
+              <span style={{ fontWeight: 590, color: Number(t.amount) < 0 ? 'var(--accent-red)' : 'inherit', flexShrink: 0 }}>
+                {Number(t.amount) > 0 ? '+' : ''}{Number(t.amount).toLocaleString('ru-RU')} ₽
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default CashSection
diff --git a/production/web/src/cash/CashTransactionForm.jsx b/production/web/src/cash/CashTransactionForm.jsx
new file mode 100644
index 0000000..5258de2
--- /dev/null
+++ b/production/web/src/cash/CashTransactionForm.jsx
@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useRegisters } from './useRegisters'
+import { useExpenseCategories } from './useExpenseCategories'
+import { METHOD_LABELS, ALL_METHODS } from './paymentMethods'
+
+const TYPE_LABELS = { income: 'Доход', expense: 'Расход', payroll: 'Зарплата' }
+
+// Shared by CashPage's standalone "record transaction" form and CashSection's
+// embedded widget on order/cartridge cards — orderId/cartridgeBatchId are
+// undefined for the standalone case (a plain expense/payroll entry with no
+// linked order), and the caller passes exactly one of them for the embedded
+// case. Amount stays a signed text input rather than min="0" — negative
+// values are legitimate correction entries (see migrations/006_cash.sql).
+//
+// A register can now hold several types at once (see registers.go), so
+// picking one no longer forces a single method — it narrows the Способ
+// select to just that register's own accepted types (auto-picked and
+// disabled only when there's exactly one). fixedRegisterId locks the
+// register select itself — CashPage's per-card Выдача/Внесение quick
+// actions (see RegisterCard) always mean *this* register.
+const CashTransactionForm = ({ orderId, cartridgeBatchId, defaultType = 'income', fixedRegisterId = '', onSaved }) => {
+  const [type, setType] = useState(defaultType)
+  const [method, setMethod] = useState('cash')
+  const [registerId, setRegisterId] = useState(fixedRegisterId)
+  const [categoryId, setCategoryId] = useState('')
+  const [amount, setAmount] = useState('')
+  const [note, setNote] = useState('')
+  const [isPending, setIsPending] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { registers } = useRegisters()
+  const { categories } = useExpenseCategories()
+  const activeRegisters = registers.filter((r) => !r.is_archived)
+
+  const allowedMethods = registerId
+    ? (registers.find((r) => r.id === registerId)?.types || ALL_METHODS)
+    : ALL_METHODS
+  const effectiveMethod = allowedMethods.includes(method) ? method : allowedMethods[0]
+
+  const reset = () => {
+    setAmount('')
+    setNote('')
+    setCategoryId('')
+    setIsPending(false)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.cash.create({
+        type,
+        method: effectiveMethod,
+        amount,
+        order_id: orderId,
+        cartridge_batch_id: cartridgeBatchId,
+        register_id: registerId,
+        category_id: type === 'expense' ? categoryId : '',
+        note,
+        is_pending: type === 'income' ? isPending : false,
+      })
+      reset()
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '110px' }}>
+          <label style={labelStyle}>Тип</label>
+          <select value={type} onChange={(e) => setType(e.target.value)} style={inputStyle}>
+            {Object.entries(TYPE_LABELS).map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+          </select>
+        </div>
+        <div style={{ flex: 1, minWidth: '130px' }}>
+          <label style={labelStyle}>Способ</label>
+          <select value={effectiveMethod} onChange={(e) => setMethod(e.target.value)} style={inputStyle} disabled={allowedMethods.length === 1}>
+            {allowedMethods.map((v) => <option key={v} value={v}>{METHOD_LABELS[v]}</option>)}
+          </select>
+        </div>
+        <div style={{ width: '130px' }}>
+          <label style={labelStyle}>Сумма, ₽</label>
+          <input value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0.00" style={inputStyle} required />
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Касса</label>
+          <select value={registerId} onChange={(e) => setRegisterId(e.target.value)} style={inputStyle} disabled={!!fixedRegisterId}>
+            <option value="">— без кассы —</option>
+            {activeRegisters.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+        {type === 'expense' && categories.length > 0 && (
+          <div style={{ flex: 1, minWidth: '160px' }}>
+            <label style={labelStyle}>Категория расхода</label>
+            <select value={categoryId} onChange={(e) => setCategoryId(e.target.value)} style={inputStyle}>
+              <option value="">— не указана —</option>
+              {categories.map((cat) => <option key={cat.id} value={cat.id}>{cat.name}</option>)}
+            </select>
+          </div>
+        )}
+      </div>
+      <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', margin: 0 }}>
+        Сумму указывайте положительной. Отрицательная — только чтобы исправить свою же ошибочную запись того же типа.
+      </p>
+      {type === 'income' && (
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+          <input type="checkbox" checked={isPending} onChange={(e) => setIsPending(e.target.checked)} />
+          Ожидает оплаты (выдано клиенту, деньги ещё не пришли)
+        </label>
+      )}
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start' }}>
+        {saving ? 'Сохраняем...' : 'Записать'}
+      </button>
+    </form>
+  )
+}
+
+export default CashTransactionForm
diff --git a/production/web/src/cash/RegisterTransferForm.jsx b/production/web/src/cash/RegisterTransferForm.jsx
new file mode 100644
index 0000000..078ce50
--- /dev/null
+++ b/production/web/src/cash/RegisterTransferForm.jsx
@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useRegisters } from './useRegisters'
+import { METHOD_LABELS, ALL_METHODS } from './paymentMethods'
+
+// One transfer = two linked ledger rows server-side (see
+// cash.Handler.Transfer) — this form just picks source/destination/method/
+// amount, the split into two rows and their signs are entirely a backend
+// concern. Method must be accepted by both registers (a register can hold
+// several types at once — see registers.go), so "Куда" only offers
+// registers that share at least one type with "Откуда", and the method
+// select narrows to the intersection of the two once both are picked.
+const RegisterTransferForm = ({ onSaved, defaultFromRegisterId = '' }) => {
+  const { registers } = useRegisters()
+  const activeRegisters = registers.filter((r) => !r.is_archived)
+  const [fromRegisterId, setFromRegisterId] = useState(defaultFromRegisterId)
+  const [toRegisterId, setToRegisterId] = useState('')
+  const [method, setMethod] = useState('')
+  const [amount, setAmount] = useState('')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const fromRegister = activeRegisters.find((r) => r.id === fromRegisterId)
+  const toRegister = activeRegisters.find((r) => r.id === toRegisterId)
+  const compatibleDestinations = fromRegister
+    ? activeRegisters.filter((r) => r.id !== fromRegisterId && r.types.some((t) => fromRegister.types.includes(t)))
+    : activeRegisters.filter((r) => r.id !== fromRegisterId)
+  const allowedMethods = fromRegister
+    ? fromRegister.types.filter((t) => !toRegister || toRegister.types.includes(t))
+    : ALL_METHODS
+  const effectiveMethod = allowedMethods.includes(method) ? method : (allowedMethods[0] || '')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.cash.transfer({ from_register_id: fromRegisterId, to_register_id: toRegisterId, method: effectiveMethod, amount, note })
+      setAmount('')
+      setNote('')
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Откуда</label>
+          <select value={fromRegisterId} onChange={(e) => { setFromRegisterId(e.target.value); setToRegisterId('') }} style={inputStyle} required>
+            <option value="">— выберите кассу —</option>
+            {activeRegisters.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Куда</label>
+          <select value={toRegisterId} onChange={(e) => setToRegisterId(e.target.value)} style={inputStyle} required>
+            <option value="">— выберите кассу —</option>
+            {compatibleDestinations.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '140px' }}>
+          <label style={labelStyle}>Тип денег</label>
+          <select value={effectiveMethod} onChange={(e) => setMethod(e.target.value)} style={inputStyle} disabled={allowedMethods.length <= 1} required>
+            {allowedMethods.length === 0 && <option value="">— нет общего типа —</option>}
+            {allowedMethods.map((v) => <option key={v} value={v}>{METHOD_LABELS[v]}</option>)}
+          </select>
+        </div>
+        <div style={{ width: '160px' }}>
+          <label style={labelStyle}>Сумма, ₽</label>
+          <input value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0.00" style={inputStyle} required />
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Например: на закупку запчастей" style={inputStyle} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving || !effectiveMethod} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start' }}>
+        {saving ? 'Переводим...' : 'Перевести'}
+      </button>
+    </form>
+  )
+}
+
+export default RegisterTransferForm
diff --git a/production/web/src/cash/paymentMethods.js b/production/web/src/cash/paymentMethods.js
new file mode 100644
index 0000000..84578c2
--- /dev/null
+++ b/production/web/src/cash/paymentMethods.js
@@ -0,0 +1,13 @@
+// Shared cash/card/invoice labels + accents — used by CashPage, register
+// creation, the payroll payout modal, and purchase-order receiving now that
+// a register can accept more than one type at once and several call sites
+// need to render "which type" pickers.
+export const METHOD_LABELS = { cash: 'Наличные', card: 'Карта', invoice: 'Безнал' }
+
+// Distinct accents per payment type, independent of the app's own accent
+// setting (Настройки → Интерфейс) — these need to stay visually
+// distinguishable from each other regardless of what the owner picked
+// there, so they're hardcoded rather than reaching for --color-accent.
+export const METHOD_ACCENTS = { cash: '#22c55e', card: '#0ea5e9', invoice: '#a855f7' }
+
+export const ALL_METHODS = Object.keys(METHOD_LABELS)
diff --git a/production/web/src/cash/useCash.js b/production/web/src/cash/useCash.js
new file mode 100644
index 0000000..546550f
--- /dev/null
+++ b/production/web/src/cash/useCash.js
@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import * as api from '../lib/api'
+
+export function useCash(filters) {
+  const [transactions, setTransactions] = useState([])
+  const [summary, setSummary] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  // This is the money screen — an older in-flight request resolving after a
+  // newer one (e.g. rapid filter clicks) must not clobber fresher results
+  // with stale totals. requestId tags each call; only the most recent one is
+  // allowed to commit its result to state.
+  const requestId = useRef(0)
+
+  const fetchAll = useCallback(async () => {
+    const thisRequest = ++requestId.current
+    setLoading(true)
+    try {
+      const dateFilters = { from: filters.from, to: filters.to, scope: filters.scope || '' }
+      const [list, sum] = await Promise.all([
+        api.cash.list({
+          type: filters.type, from: filters.from, to: filters.to, scope: filters.scope || '',
+          register_id: filters.registerId || '', method: filters.method || '',
+        }),
+        api.cash.summary(dateFilters),
+      ])
+      if (thisRequest !== requestId.current) return
+      setTransactions(list)
+      setSummary(sum)
+      setError(null)
+    } catch (err) {
+      if (thisRequest !== requestId.current) return
+      setError(err.message)
+    } finally {
+      if (thisRequest === requestId.current) setLoading(false)
+    }
+    // filters.refreshKey is a cache-busting counter, never read inside the
+    // callback — bumping it (see CashPage's own doc comment) is the only
+    // way to force a refetch when the ledger changed from a sibling tab
+    // that stayed mounted, not a value this callback's logic depends on.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters.type, filters.from, filters.to, filters.scope, filters.registerId, filters.method, filters.refreshKey])
+
+  useEffect(() => {
+    (async () => { await fetchAll() })()
+  }, [fetchAll])
+
+  return { transactions, summary, loading, error, refetch: fetchAll }
+}
diff --git a/production/web/src/cash/useExpenseCategories.js b/production/web/src/cash/useExpenseCategories.js
new file mode 100644
index 0000000..3f2f8b0
--- /dev/null
+++ b/production/web/src/cash/useExpenseCategories.js
@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Seeded by migrations/038_cash_registers.sql — owner renames/adds entries
+// via Настройки → Справочники like any other gencatalog type, no special
+// UI needed here beyond finding it by name and listing its entries.
+const CATEGORY_TYPE_NAME = 'Категории расходов'
+
+async function fetchExpenseCategories() {
+  const types = (await api.catalogTypes.list()) || []
+  const type = types.find((t) => t.name === CATEGORY_TYPE_NAME)
+  if (!type) return []
+  return (await api.catalogEntries.list(type.id)) || []
+}
+
+export function useExpenseCategories() {
+  const [categories, setCategories] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(() => fetchExpenseCategories().then(setCategories), [])
+
+  useEffect(() => {
+    reload().finally(() => setLoading(false))
+  }, [reload])
+
+  return { categories, loading, reload }
+}
diff --git a/production/web/src/cash/useRegisters.js b/production/web/src/cash/useRegisters.js
new file mode 100644
index 0000000..467373c
--- /dev/null
+++ b/production/web/src/cash/useRegisters.js
@@ -0,0 +1,22 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+async function fetchRegisters() {
+  return (await api.registers.list()) || []
+}
+
+// Named tills (internal/cash's registers.go) — each row carries its own
+// live-computed balance, so no separate summary call like useCash's
+// income/expense/payroll tiles.
+export function useRegisters() {
+  const [registers, setRegisters] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(() => fetchRegisters().then(setRegisters), [])
+
+  useEffect(() => {
+    reload().finally(() => setLoading(false))
+  }, [reload])
+
+  return { registers, loading, reload }
+}
diff --git a/production/web/src/catalogs/CatalogsPage.jsx b/production/web/src/catalogs/CatalogsPage.jsx
new file mode 100644
index 0000000..e7c03b3
--- /dev/null
+++ b/production/web/src/catalogs/CatalogsPage.jsx
@@ -0,0 +1,222 @@
+import { useState } from 'react'
+import { Plus, Trash2, Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { useDeviceGroups, useDeviceBrands } from './useDeviceGroups'
+import GenCatalogsTab from './GenCatalogsTab'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Owner-only (see App.jsx/Sidebar.jsx) — the two small reference tables
+// staff pick from when creating an order (see OrderModal.jsx's
+// CreateForm). Groups carry an explicit order-number prefix (see
+// internal/ordernum's package doc), so mutating them is gated here;
+// brands are just labels and can also be added inline from the order
+// form by any staff (see useDeviceCatalog.js).
+
+function GroupRow({ group, onSaved, onDeleted }) {
+  const [form, setForm] = useState({ name: group.name, prefix: group.prefix, sort_order: group.sort_order })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = form.name !== group.name || form.prefix !== group.prefix || form.sort_order !== group.sort_order
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.deviceGroups.update(group.id, form)
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async () => {
+    setError('')
+    try {
+      await api.deviceGroups.delete(group.id)
+      onDeleted()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, flex: 2 }} />
+      <input value={form.prefix} onChange={(e) => setForm((f) => ({ ...f, prefix: e.target.value }))} style={{ ...inputStyle, width: '70px' }} title="Префикс номера заказа" />
+      <input type="number" value={form.sort_order} onChange={(e) => setForm((f) => ({ ...f, sort_order: Number(e.target.value) }))} style={{ ...inputStyle, width: '70px' }} title="Порядок" />
+      {dirty && (
+        <button type="button" onClick={save} disabled={saving} className="btn-outline" style={{ padding: '6px 10px' }} title="Сохранить">
+          <Save size={14} />
+        </button>
+      )}
+      <button type="button" onClick={remove} style={{ background: 'none', color: 'var(--accent-red)', padding: '6px' }} title="Удалить">
+        <Trash2 size={14} />
+      </button>
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--accent-red)' }}>{error}</span>}
+    </div>
+  )
+}
+
+function AddGroupForm({ onAdded }) {
+  const [form, setForm] = useState({ name: '', prefix: '', sort_order: 0 })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!form.name.trim() || !form.prefix.trim()) { setError('Укажите название и префикс'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.deviceGroups.create(form)
+      setForm({ name: '', prefix: '', sort_order: 0 })
+      onAdded()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', marginBottom: '16px' }}>
+      <div style={{ flex: 2 }}>
+        <label style={labelStyle}>Название</label>
+        <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Ноутбуки" style={inputStyle} />
+      </div>
+      <div>
+        <label style={labelStyle}>Префикс</label>
+        <input value={form.prefix} onChange={(e) => setForm((f) => ({ ...f, prefix: e.target.value }))} placeholder="Н" style={{ ...inputStyle, width: '70px' }} />
+      </div>
+      <div>
+        <label style={labelStyle}>Порядок</label>
+        <input type="number" value={form.sort_order} onChange={(e) => setForm((f) => ({ ...f, sort_order: Number(e.target.value) }))} style={{ ...inputStyle, width: '70px' }} />
+      </div>
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить
+      </button>
+      {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+    </form>
+  )
+}
+
+function GroupsTab() {
+  const { groups, loading, reload } = useDeviceGroups()
+  return (
+    <div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
+        Группы устройств — префикс используется в номере заказа (например «Н00001» для ноутбуков). Показываются в форме создания заявки.
+      </p>
+      <AddGroupForm onAdded={reload} />
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ padding: '4px 18px' }}>
+          {groups.length === 0 && <p style={{ padding: '16px 0', color: 'var(--text-muted)' }}>Групп пока нет</p>}
+          {groups.map((g) => <GroupRow key={g.id} group={g} onSaved={reload} onDeleted={reload} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function BrandsTab() {
+  const { brands, loading, reload } = useDeviceBrands()
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setSaving(true)
+    setError('')
+    try {
+      await api.deviceBrands.create({ name })
+      setName('')
+      reload()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async (id) => {
+    setError('')
+    try {
+      await api.deviceBrands.delete(id)
+      reload()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
+        Бренды — любой сотрудник может добавить новый прямо из формы создания заявки. Здесь удобно почистить дубли/опечатки.
+      </p>
+      <form onSubmit={submit} style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Новый бренд" style={{ ...inputStyle, maxWidth: '260px' }} />
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Добавить
+        </button>
+        {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+      </form>
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          {brands.map((b) => (
+            <span key={b.id} style={{
+              display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 10px 6px 12px',
+              background: 'var(--color-surface)', color: 'var(--text-main)', border: '1.5px solid var(--border-light)', borderRadius: '20px', fontSize: '0.82rem',
+            }}>
+              {b.name}
+              <button type="button" onClick={() => remove(b.id)} style={{ background: 'none', color: 'var(--text-muted)', padding: '2px', display: 'flex' }} title="Удалить">
+                <Trash2 size={12} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const CatalogsPage = () => {
+  const [tab, setTab] = useState('groups')
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '18px' }}>
+        <button
+          onClick={() => setTab('groups')}
+          className={tab === 'groups' ? 'btn-primary' : 'btn-outline'}
+          style={{ padding: '8px 16px', fontSize: '0.85rem' }}
+        >
+          Группы устройств
+        </button>
+        <button
+          onClick={() => setTab('brands')}
+          className={tab === 'brands' ? 'btn-primary' : 'btn-outline'}
+          style={{ padding: '8px 16px', fontSize: '0.85rem' }}
+        >
+          Бренды
+        </button>
+        <button
+          onClick={() => setTab('custom')}
+          className={tab === 'custom' ? 'btn-primary' : 'btn-outline'}
+          style={{ padding: '8px 16px', fontSize: '0.85rem' }}
+        >
+          Свои справочники
+        </button>
+      </div>
+      {tab === 'groups' ? <GroupsTab /> : tab === 'brands' ? <BrandsTab /> : <GenCatalogsTab />}
+    </div>
+  )
+}
+
+export default CatalogsPage
diff --git a/production/web/src/catalogs/GenCatalogsTab.jsx b/production/web/src/catalogs/GenCatalogsTab.jsx
new file mode 100644
index 0000000..27917fa
--- /dev/null
+++ b/production/web/src/catalogs/GenCatalogsTab.jsx
@@ -0,0 +1,189 @@
+import { useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { useCatalogTypes, useCatalogEntries } from './useGenCatalogs'
+import { inputStyle } from '../orders/formStyles'
+
+// Owner-defined arbitrary reference lists ("Способ оплаты", "Источник
+// заявки"...) — separate from device groups/brands above. A type is picked
+// from the left list, its entries manage on the right, same two-panel
+// shape as most master-detail admin screens in this app.
+
+function AddTypeForm({ onAdded }) {
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setSaving(true)
+    setError('')
+    try {
+      const created = await api.catalogTypes.create({ name })
+      setName('')
+      onAdded(created)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '6px', marginBottom: '12px' }}>
+      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Новый справочник" style={{ ...inputStyle, fontSize: '0.85rem' }} />
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '0 12px' }} aria-label="Создать справочник">
+        <Plus size={15} />
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.76rem', width: '100%' }}>{error}</p>}
+    </form>
+  )
+}
+
+function AddEntryForm({ catalogTypeId, onAdded }) {
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setSaving(true)
+    setError('')
+    try {
+      await api.catalogEntries.create({ catalog_type_id: catalogTypeId, name })
+      setName('')
+      onAdded()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Новое значение" style={{ ...inputStyle, maxWidth: '260px' }} />
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить
+      </button>
+      {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+    </form>
+  )
+}
+
+const GenCatalogsTab = () => {
+  const { types, loading: typesLoading, reload: reloadTypes } = useCatalogTypes()
+  const [selectedId, setSelectedId] = useState(null)
+  const [typeError, setTypeError] = useState('')
+
+  // Derived during render rather than synced via effect: whatever was
+  // explicitly picked (click, or just-created) if it still exists in the
+  // current list, otherwise the first type — no extra state, no
+  // set-state-in-effect lint issue.
+  const effectiveSelectedId = types.some((t) => t.id === selectedId) ? selectedId : (types[0]?.id ?? null)
+
+  const { entries, loading: entriesLoading, reload: reloadEntries } = useCatalogEntries(effectiveSelectedId)
+
+  const handleAddedType = (created) => {
+    reloadTypes()
+    setSelectedId(created.id)
+  }
+
+  const removeType = async (id) => {
+    if (!window.confirm('Удалить справочник целиком? Все его значения тоже будут удалены.')) return
+    setTypeError('')
+    try {
+      await api.catalogTypes.delete(id)
+      reloadTypes()
+    } catch (err) {
+      setTypeError(err.message)
+    }
+  }
+
+  const removeEntry = async (id) => {
+    try {
+      await api.catalogEntries.delete(id)
+      reloadEntries()
+    } catch (err) {
+      setTypeError(err.message)
+    }
+  }
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', marginBottom: '14px' }}>
+        Свои справочники — растущие списки значений для кастомных полей приёма заявки
+        (например «Способ оплаты», «Источник заявки»). Настроить связь поля со справочником — на вкладке «Поля приёмки».
+      </p>
+      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: '20px' }}>
+        <div>
+          <AddTypeForm onAdded={handleAddedType} />
+          {typesLoading ? (
+            <p style={{ color: 'var(--color-text-muted)' }}>Загрузка...</p>
+          ) : types.length === 0 ? (
+            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.82rem' }}>Справочников пока нет</p>
+          ) : (
+            <div className="glass-panel" style={{ padding: '4px' }}>
+              {types.map((t) => (
+                <div
+                  key={t.id}
+                  onClick={() => setSelectedId(t.id)}
+                  style={{
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                    padding: '9px 10px', borderRadius: '8px', cursor: 'pointer',
+                    background: effectiveSelectedId === t.id ? 'var(--color-accent)' : 'transparent',
+                    color: effectiveSelectedId === t.id ? 'var(--color-text-inverse)' : 'var(--color-text-main)',
+                  }}
+                >
+                  <span style={{ fontSize: '0.86rem', fontWeight: 510 }}>{t.name}</span>
+                  <button
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); removeType(t.id) }}
+                    style={{ background: 'none', color: 'inherit', opacity: 0.7, padding: '2px', display: 'flex' }}
+                    title="Удалить справочник"
+                  >
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          {typeError && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', marginTop: '8px' }}>{typeError}</p>}
+        </div>
+
+        <div>
+          {!effectiveSelectedId ? (
+            <p style={{ color: 'var(--color-text-muted)' }}>Выберите или создайте справочник слева</p>
+          ) : (
+            <>
+              <AddEntryForm catalogTypeId={effectiveSelectedId} onAdded={reloadEntries} />
+              {entriesLoading ? (
+                <p style={{ color: 'var(--color-text-muted)' }}>Загрузка...</p>
+              ) : entries.length === 0 ? (
+                <p style={{ color: 'var(--color-text-muted)', fontSize: '0.82rem' }}>Значений пока нет</p>
+              ) : (
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                  {entries.map((entry) => (
+                    <span key={entry.id} style={{
+                      display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 10px 6px 12px',
+                      background: 'var(--color-surface)', color: 'var(--text-main)', border: '1.5px solid var(--border-light)', borderRadius: '20px', fontSize: '0.82rem',
+                    }}>
+                      {entry.name}
+                      <button type="button" onClick={() => removeEntry(entry.id)} style={{ background: 'none', color: 'var(--text-muted)', padding: '2px', display: 'flex' }} title="Удалить">
+                        <Trash2 size={12} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GenCatalogsTab
diff --git a/production/web/src/catalogs/useDeviceGroups.js b/production/web/src/catalogs/useDeviceGroups.js
new file mode 100644
index 0000000..8aea1b1
--- /dev/null
+++ b/production/web/src/catalogs/useDeviceGroups.js
@@ -0,0 +1,38 @@
+import { useState, useCallback, useEffect } from 'react'
+import * as api from '../lib/api'
+
+export function useDeviceGroups() {
+  const [groups, setGroups] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setGroups(await api.deviceGroups.list())
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { (async () => { await load() })() }, [load])
+
+  return { groups, loading, reload: load }
+}
+
+export function useDeviceBrands() {
+  const [brands, setBrands] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setBrands(await api.deviceBrands.list())
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { (async () => { await load() })() }, [load])
+
+  return { brands, loading, reload: load }
+}
diff --git a/production/web/src/catalogs/useGenCatalogs.js b/production/web/src/catalogs/useGenCatalogs.js
new file mode 100644
index 0000000..3d5878e
--- /dev/null
+++ b/production/web/src/catalogs/useGenCatalogs.js
@@ -0,0 +1,42 @@
+import { useState, useCallback, useEffect } from 'react'
+import * as api from '../lib/api'
+
+export function useCatalogTypes() {
+  const [types, setTypes] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setTypes(await api.catalogTypes.list())
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { (async () => { await load() })() }, [load])
+
+  return { types, loading, reload: load }
+}
+
+// entries reload whenever catalogTypeId changes (switching which catalog is
+// selected in the management UI) — null/undefined catalogTypeId means
+// nothing selected yet, no fetch.
+export function useCatalogEntries(catalogTypeId) {
+  const [entries, setEntries] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  const load = useCallback(async () => {
+    if (!catalogTypeId) { setEntries([]); return }
+    setLoading(true)
+    try {
+      setEntries(await api.catalogEntries.list(catalogTypeId))
+    } finally {
+      setLoading(false)
+    }
+  }, [catalogTypeId])
+
+  useEffect(() => { (async () => { await load() })() }, [load])
+
+  return { entries, loading, reload: load }
+}
diff --git a/production/web/src/clients/ClientLoyaltySection.jsx b/production/web/src/clients/ClientLoyaltySection.jsx
new file mode 100644
index 0000000..10f900d
--- /dev/null
+++ b/production/web/src/clients/ClientLoyaltySection.jsx
@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import * as api from '../lib/api'
+import { useAuth } from '../auth/AuthContext'
+import { useClientLoyalty } from './useClientLoyalty'
+import { inputStyle } from '../orders/formStyles'
+
+const TYPE_LABELS = { accrual: 'Начисление', redemption: 'Списание', adjustment: 'Корректировка' }
+const TYPE_COLORS = { accrual: 'var(--accent-green)', redemption: 'var(--accent-red)', adjustment: 'var(--text-muted)' }
+
+function RedeemForm({ clientId, balance, onDone }) {
+  const [points, setPoints] = useState('')
+  const [note, setNote] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async () => {
+    const n = Number(points)
+    if (!n || n <= 0) { setError('Укажите количество баллов'); return }
+    setBusy(true)
+    setError('')
+    try {
+      await api.loyalty.redeem(clientId, { points: n, note })
+      setPoints('')
+      setNote('')
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '6px' }}>
+      <input type="number" min="1" max={balance} value={points} onChange={(e) => setPoints(e.target.value)} placeholder="Баллов" style={{ ...inputStyle, width: '90px', padding: '6px 8px' }} />
+      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Заметка (необязательно)" style={{ ...inputStyle, flex: 1, minWidth: '140px', padding: '6px 8px' }} />
+      <button type="button" onClick={submit} disabled={busy} className="btn-outline" style={{ padding: '6px 12px', fontSize: '0.78rem' }}>Списать</button>
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--accent-red)', width: '100%' }}>{error}</span>}
+    </div>
+  )
+}
+
+function AdjustForm({ clientId, onDone }) {
+  const [points, setPoints] = useState('')
+  const [note, setNote] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async () => {
+    const n = Number(points)
+    if (!n) { setError('Укажите количество баллов (можно отрицательное)'); return }
+    if (!note.trim()) { setError('Заметка обязательна для корректировки'); return }
+    setBusy(true)
+    setError('')
+    try {
+      await api.loyalty.adjust(clientId, { points: n, note })
+      setPoints('')
+      setNote('')
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '10px' }}>
+      <input type="number" value={points} onChange={(e) => setPoints(e.target.value)} placeholder="±Баллов" style={{ ...inputStyle, width: '90px', padding: '6px 8px' }} />
+      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Причина (обязательно)" style={{ ...inputStyle, flex: 1, minWidth: '140px', padding: '6px 8px' }} />
+      <button type="button" onClick={submit} disabled={busy} className="btn-outline" style={{ padding: '6px 12px', fontSize: '0.78rem' }}>Скорректировать</button>
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--accent-red)', width: '100%' }}>{error}</span>}
+    </div>
+  )
+}
+
+// Embedded in ClientsPage's ClientDetail modal, right after
+// ClientNotificationsSection — balance, manual redeem/adjust (owner/manager
+// only, matching the backend's cashOnly gate), and the ledger history.
+const ClientLoyaltySection = ({ clientId }) => {
+  const { staff } = useAuth()
+  const canManage = staff.role === 'owner' || staff.role === 'manager'
+  const { balance, history, loading, reload } = useClientLoyalty(clientId)
+
+  return (
+    <div style={{ marginTop: '18px', paddingTop: '18px', borderTop: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '10px' }}>
+        <h3 style={{ fontSize: '0.9rem' }}>Бонусные баллы</h3>
+        <span style={{ fontSize: '1.1rem', fontWeight: 590, color: 'var(--accent-orange)' }}>{balance}</span>
+      </div>
+
+      {canManage && (
+        <>
+          <RedeemForm clientId={clientId} balance={balance} onDone={reload} />
+          <AdjustForm clientId={clientId} onDone={reload} />
+        </>
+      )}
+
+      <h4 style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '6px' }}>История</h4>
+      {loading ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : history.length === 0 ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Пока нет операций</p>
+      ) : (
+        history.map((t) => (
+          <div key={t.id} style={{ padding: '6px 0', borderBottom: '1px solid var(--border-light)', fontSize: '0.78rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>{TYPE_LABELS[t.type] || t.type}{t.note ? ` — ${t.note}` : ''}</span>
+              <span style={{ fontWeight: 590, color: TYPE_COLORS[t.type], flexShrink: 0 }}>
+                {t.points > 0 ? '+' : ''}{t.points}
+              </span>
+            </div>
+            <p style={{ color: 'var(--text-muted)', marginTop: '2px' }}>
+              {new Date(t.created_at).toLocaleString('ru-RU')} · {t.staff_name}
+            </p>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+
+export default ClientLoyaltySection
diff --git a/production/web/src/clients/ClientNotificationsSection.jsx b/production/web/src/clients/ClientNotificationsSection.jsx
new file mode 100644
index 0000000..87abee7
--- /dev/null
+++ b/production/web/src/clients/ClientNotificationsSection.jsx
@@ -0,0 +1,173 @@
+import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+import * as api from '../lib/api'
+import { useClientNotifications } from './useClientNotifications'
+
+const TRIGGER_LABELS = {
+  created: 'Заявка создана',
+  status_changed: 'Смена статуса',
+  ready: 'Готово к выдаче',
+  warranty_expiring: 'Гарантия истекает',
+  loyalty_accrued: 'Начислены баллы',
+  manual: 'Вручную',
+}
+const STATUS_LABELS = { pending: 'в очереди', sent: 'отправлено', failed: 'ошибка', skipped: 'пропущено' }
+const STATUS_COLORS = { sent: 'var(--accent-green)', failed: 'var(--accent-red)', pending: 'var(--text-muted)', skipped: 'var(--text-muted)' }
+
+// Embedded in ClientsPage's ClientDetail modal — channel toggles, a
+// one-time linking link (client opens it in Telegram to attach their
+// chat_id), a manual test send, and the outbox history for this client.
+const ClientNotificationsSection = ({ client, onClientUpdated }) => {
+  const { history, loading, reload } = useClientNotifications(client.id)
+  const [link, setLink] = useState(null)
+  const [linkError, setLinkError] = useState('')
+  const [copied, setCopied] = useState(null)
+  const [testResult, setTestResult] = useState(null)
+  const [busy, setBusy] = useState(false)
+
+  const togglePref = async (field, value) => {
+    setBusy(true)
+    try {
+      await api.clientNotify.updatePrefs(client.id, { [field]: value })
+      onClientUpdated()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleCreateLink = async () => {
+    setLinkError('')
+    setBusy(true)
+    try {
+      const data = await api.clientNotify.createLink(client.id)
+      setLink(data)
+    } catch (err) {
+      setLinkError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const copyLink = (url) => {
+    navigator.clipboard.writeText(url)
+    setCopied(url)
+    setTimeout(() => setCopied(null), 1500)
+  }
+
+  const handleTest = async () => {
+    setTestResult(null)
+    setBusy(true)
+    try {
+      const data = await api.clientNotify.test(client.id)
+      setTestResult({ ok: true, channel: data.channel })
+    } catch (err) {
+      setTestResult({ ok: false, error: err.message })
+    } finally {
+      setBusy(false)
+      reload()
+    }
+  }
+
+  return (
+    <div style={{ marginTop: '18px', paddingTop: '18px', borderTop: '1px solid var(--border-light)' }}>
+      <h3 style={{ fontSize: '0.9rem', marginBottom: '8px' }}>Уведомления</h3>
+
+      <div style={{ display: 'flex', gap: '14px', marginBottom: '10px', fontSize: '0.82rem' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <input type="checkbox" checked={client.notify_telegram} disabled={busy} onChange={(e) => togglePref('notify_telegram', e.target.checked)} />
+          Telegram
+        </label>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <input type="checkbox" checked={client.notify_max} disabled={busy} onChange={(e) => togglePref('notify_max', e.target.checked)} />
+          MAX
+        </label>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <input type="checkbox" checked={client.notify_vk} disabled={busy} onChange={(e) => togglePref('notify_vk', e.target.checked)} />
+          VK
+        </label>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <input type="checkbox" checked={client.notify_sms} disabled={busy} onChange={(e) => togglePref('notify_sms', e.target.checked)} />
+          SMS
+        </label>
+      </div>
+
+      <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>
+        Telegram: {client.tg_linked ? <span style={{ color: 'var(--accent-green)' }}>подключён</span> : <span>не подключён</span>}
+        {' · '}
+        MAX: {client.max_linked ? <span style={{ color: 'var(--accent-green)' }}>подключён</span> : <span>не подключён</span>}
+        {' · '}
+        VK: {client.vk_linked ? <span style={{ color: 'var(--accent-green)' }}>подключён</span> : <span>не подключён</span>}
+      </p>
+      {!(client.tg_linked && client.max_linked && client.vk_linked) && (
+        <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', marginBottom: '8px' }}>
+          Клиент может подключиться сам в любом из ботов: написать телефон и номер заказа одним сообщением (не обязательно ждать ссылку).
+        </p>
+      )}
+
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '10px' }}>
+        <button type="button" onClick={handleCreateLink} disabled={busy} className="btn-outline" style={{ padding: '7px 14px', fontSize: '0.8rem' }}>
+          {client.tg_linked || client.max_linked || client.vk_linked ? 'Новая ссылка для привязки' : 'Получить ссылки для Telegram/MAX/VK'}
+        </button>
+        <button type="button" onClick={handleTest} disabled={busy} className="btn-outline" style={{ padding: '7px 14px', fontSize: '0.8rem' }}>
+          Тестовое уведомление
+        </button>
+      </div>
+
+      {linkError && <p style={{ fontSize: '0.78rem', color: 'var(--accent-red)', marginBottom: '8px' }}>{linkError}</p>}
+      {link && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '10px', fontSize: '0.8rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', wordBreak: 'break-all' }}>
+            <span>Telegram: {link.url || 'укажите username бота в настройках'}</span>
+            {link.url && (
+              <button type="button" onClick={() => copyLink(link.url)} style={{ background: 'none', color: 'var(--color-accent-fg)', flexShrink: 0 }}>
+                {copied === link.url ? <Check size={14} /> : <Copy size={14} />}
+              </button>
+            )}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', wordBreak: 'break-all' }}>
+            <span>MAX: {link.max_url || 'укажите username бота в настройках'}</span>
+            {link.max_url && (
+              <button type="button" onClick={() => copyLink(link.max_url)} style={{ background: 'none', color: 'var(--color-accent-fg)', flexShrink: 0 }}>
+                {copied === link.max_url ? <Check size={14} /> : <Copy size={14} />}
+              </button>
+            )}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', wordBreak: 'break-all' }}>
+            <span>VK: {link.vk_url || 'укажите сообщество в настройках'}</span>
+            {link.vk_url && (
+              <button type="button" onClick={() => copyLink(link.vk_url)} style={{ background: 'none', color: 'var(--color-accent-fg)', flexShrink: 0 }}>
+                {copied === link.vk_url ? <Check size={14} /> : <Copy size={14} />}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+      {testResult && (
+        <p style={{ fontSize: '0.78rem', color: testResult.ok ? 'var(--accent-green)' : 'var(--accent-red)', marginBottom: '10px' }}>
+          {testResult.ok ? `Отправлено (${{ telegram: 'Telegram', max: 'MAX', vk: 'VK', sms: 'SMS' }[testResult.channel] || testResult.channel})` : testResult.error}
+        </p>
+      )}
+
+      <h4 style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '6px' }}>История</h4>
+      {loading ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : history.length === 0 ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Уведомлений пока не было</p>
+      ) : (
+        history.map((n) => (
+          <div key={n.id} style={{ padding: '6px 0', borderBottom: '1px solid var(--border-light)', fontSize: '0.78rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>{TRIGGER_LABELS[n.trigger] || n.trigger} · {{ telegram: 'Telegram', max: 'MAX', vk: 'VK', sms: 'SMS' }[n.channel] || n.channel}</span>
+              <span style={{ color: STATUS_COLORS[n.status] }}>{STATUS_LABELS[n.status] || n.status}</span>
+            </div>
+            <p style={{ color: 'var(--text-muted)', marginTop: '2px' }}>
+              {new Date(n.created_at).toLocaleString('ru-RU')}{n.error ? ` — ${n.error}` : ''}
+            </p>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+
+export default ClientNotificationsSection
diff --git a/production/web/src/clients/ClientPrizesSection.jsx b/production/web/src/clients/ClientPrizesSection.jsx
new file mode 100644
index 0000000..dd902a3
--- /dev/null
+++ b/production/web/src/clients/ClientPrizesSection.jsx
@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { Gift } from 'lucide-react'
+import * as api from '../lib/api'
+import { useClientPrizes } from './useClientPrizes'
+import { inputStyle } from '../orders/formStyles'
+
+function AddPrizeForm({ clientId, onDone }) {
+  const [description, setDescription] = useState('')
+  const [note, setNote] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async () => {
+    if (!description.trim()) { setError('Укажите приз'); return }
+    setBusy(true)
+    setError('')
+    try {
+      await api.prizes.add(clientId, { description, note })
+      setDescription('')
+      setNote('')
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '10px' }}>
+      <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Что выиграл (напр. поклейка плёнки)" style={{ ...inputStyle, flex: 2, minWidth: '160px', padding: '6px 8px' }} />
+      <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Заметка (необязательно)" style={{ ...inputStyle, flex: 1, minWidth: '140px', padding: '6px 8px' }} />
+      <button type="button" onClick={submit} disabled={busy} className="btn-outline" style={{ padding: '6px 12px', fontSize: '0.78rem' }}>Записать выигрыш</button>
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--accent-red)', width: '100%' }}>{error}</span>}
+    </div>
+  )
+}
+
+// Embedded in ClientsPage's ClientDetail modal, right after
+// ClientLoyaltySection — a manual "client won X" log, separate from the
+// points ledger since prizes don't move points (see backend's
+// internal/loyalty/prize.go doc comment). Open to any staff role.
+const ClientPrizesSection = ({ clientId }) => {
+  const { prizes, loading, reload } = useClientPrizes(clientId)
+
+  return (
+    <div style={{ marginTop: '18px', paddingTop: '18px', borderTop: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '10px' }}>
+        <Gift size={15} color="var(--accent-orange)" />
+        <h3 style={{ fontSize: '0.9rem' }}>Призы</h3>
+      </div>
+
+      <AddPrizeForm clientId={clientId} onDone={reload} />
+
+      {loading ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : prizes.length === 0 ? (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Пока нет выигрышей</p>
+      ) : (
+        prizes.map((p) => (
+          <div key={p.id} style={{ padding: '6px 0', borderBottom: '1px solid var(--border-light)', fontSize: '0.78rem' }}>
+            <span style={{ fontWeight: 510 }}>{p.description}</span>
+            {p.note && <span style={{ color: 'var(--text-muted)' }}> — {p.note}</span>}
+            <p style={{ color: 'var(--text-muted)', marginTop: '2px' }}>
+              {new Date(p.created_at).toLocaleString('ru-RU')} · {p.staff_name}
+            </p>
+          </div>
+        ))
+      )}
+    </div>
+  )
+}
+
+export default ClientPrizesSection
diff --git a/production/web/src/clients/ClientsPage.jsx b/production/web/src/clients/ClientsPage.jsx
new file mode 100644
index 0000000..bf6a2a4
--- /dev/null
+++ b/production/web/src/clients/ClientsPage.jsx
@@ -0,0 +1,233 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Search, X, Plus } from 'lucide-react'
+import * as api from '../lib/api'
+import { useClients } from './useClients'
+import { useOrderStatuses } from '../orders/statuses'
+import ClientNotificationsSection from './ClientNotificationsSection'
+import ClientLoyaltySection from './ClientLoyaltySection'
+import ClientPrizesSection from './ClientPrizesSection'
+import WarrantyBadge from '../orders/WarrantyBadge'
+import MessengerButtons from '../ui/MessengerButtons'
+
+const inputStyle = {
+  padding: '10px 14px', border: '1.5px solid var(--border-light)', borderRadius: '8px',
+  fontSize: '0.9rem', fontFamily: 'var(--font-body)', outline: 'none', boxSizing: 'border-box',
+}
+const labelStyle = { display: 'block', marginBottom: '5px', fontSize: '0.78rem', fontWeight: 510, color: 'var(--text-muted)' }
+
+function CreateClientForm({ onClose, onCreated }) {
+  const [form, setForm] = useState({ type: 'individual', name: '', phone: '', email: '', inn: '', kpp: '', company_address: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (form.type === 'company' && !form.inn) { setError('Для юрлица нужен ИНН'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.clients.create(form)
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <form onClick={(e) => e.stopPropagation()} onSubmit={handleSubmit} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Новый клиент</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button type="button" onClick={() => setForm((f) => ({ ...f, type: 'individual' }))} className={form.type === 'individual' ? 'btn-primary' : 'btn-outline'} style={{ flex: 1, padding: '7px', fontSize: '0.82rem' }}>Физлицо</button>
+          <button type="button" onClick={() => setForm((f) => ({ ...f, type: 'company' }))} className={form.type === 'company' ? 'btn-primary' : 'btn-outline'} style={{ flex: 1, padding: '7px', fontSize: '0.82rem' }}>Юрлицо</button>
+        </div>
+        <div>
+          <label style={labelStyle}>{form.type === 'company' ? 'Название организации' : 'ФИО'} *</label>
+          <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Телефон *</label>
+          <input value={form.phone} onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Email</label>
+          <input value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} style={{ ...inputStyle, width: '100%' }} />
+        </div>
+        {form.type === 'company' && (
+          <>
+            <div>
+              <label style={labelStyle}>ИНН *</label>
+              <input value={form.inn} onChange={(e) => setForm((f) => ({ ...f, inn: e.target.value }))} style={{ ...inputStyle, width: '100%' }} />
+            </div>
+            <div>
+              <label style={labelStyle}>КПП</label>
+              <input value={form.kpp} onChange={(e) => setForm((f) => ({ ...f, kpp: e.target.value }))} style={{ ...inputStyle, width: '100%' }} />
+            </div>
+          </>
+        )}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Создаём...' : 'Создать'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function ClientDetail({ clientId, onClose }) {
+  const { labels: STATUS_LABELS } = useOrderStatuses()
+  const [data, setData] = useState(null)
+
+  const reload = useCallback(() => {
+    api.clients.get(clientId).then(setData)
+  }, [clientId])
+
+  useEffect(() => { reload() }, [reload])
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <div onClick={(e) => e.stopPropagation()} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '480px', maxHeight: '80vh', overflowY: 'auto' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>{data?.client?.name || 'Загрузка...'}</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        {data && (
+          <>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+              <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{data.client.phone}</p>
+              <MessengerButtons phone={data.client.phone} />
+            </div>
+            {data.client.email && <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{data.client.email}</p>}
+            {data.client.inn && <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '4px' }}>ИНН {data.client.inn}</p>}
+
+            <h3 style={{ fontSize: '0.9rem', margin: '18px 0 8px' }}>Заказы ({(data.orders || []).length})</h3>
+            {(data.orders || []).length === 0 && <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>Пока не было заказов</p>}
+            {(data.orders || []).map((o) => {
+              // Warranty only makes sense once the device is actually back
+              // with the client — same gate as OrderTrackingPage.jsx.
+              const warrantyUntil = o.status === 'completed' ? o.warranty_until : null
+              return (
+                <div key={o.id} style={{ padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+                  <p style={{ fontSize: '0.88rem', fontWeight: 510 }}>{o.device_type}</p>
+                  <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                    {STATUS_LABELS[o.status] || o.status} · {new Date(o.created_at).toLocaleDateString('ru-RU')}
+                  </p>
+                  {warrantyUntil && (
+                    <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', marginTop: '2px' }}>
+                      Гарантия: <WarrantyBadge warrantyUntil={warrantyUntil} />
+                    </p>
+                  )}
+                </div>
+              )
+            })}
+
+            <ClientNotificationsSection client={data.client} onClientUpdated={reload} />
+            <ClientLoyaltySection clientId={data.client.id} />
+            <ClientPrizesSection clientId={data.client.id} />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const ClientsPage = () => {
+  const [query, setQuery] = useState('')
+  const [type, setType] = useState('')
+  const [dateFrom, setDateFrom] = useState('')
+  const [dateTo, setDateTo] = useState('')
+  const { clients, loading, refetch } = useClients(query, { type, date_from: dateFrom, date_to: dateTo })
+  const [showCreate, setShowCreate] = useState(false)
+  const [selectedId, setSelectedId] = useState(null)
+  const hasFilters = type || dateFrom || dateTo
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div style={{ position: 'relative', flex: 1, minWidth: '220px', maxWidth: '360px' }}>
+          <label style={labelStyle}>Поиск</label>
+          <Search size={16} style={{ position: 'absolute', left: '12px', bottom: '11px', color: 'var(--text-muted)' }} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Поиск по имени или телефону..."
+            style={{ ...inputStyle, width: '100%', paddingLeft: '36px' }}
+          />
+        </div>
+        <div>
+          <label style={labelStyle}>Тип</label>
+          <select value={type} onChange={(e) => setType(e.target.value)} style={{ ...inputStyle, minWidth: '140px' }}>
+            <option value="">Физ. и юр. лица</option>
+            <option value="individual">Физлицо</option>
+            <option value="company">Юрлицо</option>
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>С даты</label>
+          <input type="date" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>По дату</label>
+          <input type="date" value={dateTo} onChange={(e) => setDateTo(e.target.value)} style={inputStyle} />
+        </div>
+        {hasFilters && (
+          <button
+            type="button"
+            className="btn-outline"
+            style={{ padding: '9px 14px', fontSize: '0.82rem' }}
+            onClick={() => { setType(''); setDateFrom(''); setDateTo('') }}
+          >
+            Сбросить
+          </button>
+        )}
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px', marginLeft: 'auto' }}>
+          <Plus size={15} /> Клиент
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {clients.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Клиенты не найдены</p>}
+          {clients.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => setSelectedId(c.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{c.name}</p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{c.phone}</p>
+              </div>
+              <span style={{
+                fontSize: '0.72rem', color: 'var(--text-muted)',
+                background: 'var(--color-surface-sunken)', padding: '2px 8px', borderRadius: '50px',
+              }}>
+                {c.type === 'company' ? 'Юрлицо' : 'Физлицо'}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <CreateClientForm onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); refetch() }} />
+      )}
+      {selectedId && <ClientDetail clientId={selectedId} onClose={() => setSelectedId(null)} />}
+    </div>
+  )
+}
+
+export default ClientsPage
diff --git a/production/web/src/clients/useClientLoyalty.js b/production/web/src/clients/useClientLoyalty.js
new file mode 100644
index 0000000..715b17e
--- /dev/null
+++ b/production/web/src/clients/useClientLoyalty.js
@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Same shape as useClientNotifications.js — clientId is the load key,
+// reloads whenever the parent switches to a different client.
+export function useClientLoyalty(clientId) {
+  const [balance, setBalance] = useState(0)
+  const [history, setHistory] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await api.loyalty.get(clientId)
+      setBalance(data.balance)
+      setHistory(data.history)
+    } finally {
+      setLoading(false)
+    }
+  }, [clientId])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientId])
+
+  return { balance, history, loading, reload: load }
+}
diff --git a/production/web/src/clients/useClientNotifications.js b/production/web/src/clients/useClientNotifications.js
new file mode 100644
index 0000000..af93f2a
--- /dev/null
+++ b/production/web/src/clients/useClientNotifications.js
@@ -0,0 +1,26 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Mirrors useClients.js's shape. clientId is the load key (same convention
+// as CashSection/PartsUsedSection's `id` prop) — history reloads whenever
+// the parent switches to a different client.
+export function useClientNotifications(clientId) {
+  const [history, setHistory] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setHistory(await api.clientNotify.history(clientId))
+    } finally {
+      setLoading(false)
+    }
+  }, [clientId])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientId])
+
+  return { history, loading, reload: load }
+}
diff --git a/production/web/src/clients/useClientPrizes.js b/production/web/src/clients/useClientPrizes.js
new file mode 100644
index 0000000..c8ea4d3
--- /dev/null
+++ b/production/web/src/clients/useClientPrizes.js
@@ -0,0 +1,25 @@
+import { useState, useCallback, useEffect } from 'react'
+import * as api from '../lib/api'
+
+// Same shape as useClientLoyalty.js — clientId is the load key, reloads
+// whenever the parent switches to a different client.
+export function useClientPrizes(clientId) {
+  const [prizes, setPrizes] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setPrizes(await api.prizes.list(clientId))
+    } finally {
+      setLoading(false)
+    }
+  }, [clientId])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientId])
+
+  return { prizes, loading, reload: load }
+}
diff --git a/production/web/src/clients/useClients.js b/production/web/src/clients/useClients.js
new file mode 100644
index 0000000..f226b04
--- /dev/null
+++ b/production/web/src/clients/useClients.js
@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useClients(query, filters = {}) {
+  const [clients, setClients] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const { type = '', date_from = '', date_to = '' } = filters
+
+  const fetchClients = useCallback(async () => {
+    setLoading(true)
+    try {
+      setClients((await api.clients.list({ q: query, type, date_from, date_to })) || [])
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [query, type, date_from, date_to])
+
+  useEffect(() => {
+    const id = setTimeout(fetchClients, 250)
+    return () => clearTimeout(id)
+  }, [fetchClients])
+
+  return { clients, loading, error, refetch: fetchClients }
+}
diff --git a/production/web/src/delivery/CourierDeliveryQueue.jsx b/production/web/src/delivery/CourierDeliveryQueue.jsx
new file mode 100644
index 0000000..4210f73
--- /dev/null
+++ b/production/web/src/delivery/CourierDeliveryQueue.jsx
@@ -0,0 +1,56 @@
+import { MapPin } from 'lucide-react'
+import { DeliveryStatusBadge, DeliveryStatusActions } from './DeliveryStatusControl'
+import SignatureThumb from './SignatureThumb'
+
+// Touch-first queue for a master working deliveries from a phone (the
+// installed PWA — see vite-plugin-pwa in vite.config.js) — big cards, big
+// status buttons, one tap to open the address in Yandex Maps. The dense
+// filterable table (DeliveriesPage's own render) stays what owner/manager
+// see; this is only for staff.role === 'master'.
+const CourierDeliveryQueue = ({ deliveries, loading, onChanged }) => {
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (deliveries.length === 0) {
+    return <p style={{ padding: '20px', color: 'var(--text-muted)', textAlign: 'center' }}>На сегодня доставок нет</p>
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {deliveries.map((d) => (
+        <div
+          key={d.id}
+          className="glass-panel"
+          style={{ padding: '16px', borderLeft: '4px solid var(--color-shop-accent)' }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '10px', marginBottom: '8px' }}>
+            <p style={{ fontWeight: 590, fontSize: '1rem' }}>
+              {d.order_number ? `№ ${d.order_number} · ` : ''}{d.device_type}
+            </p>
+            <DeliveryStatusBadge status={d.status} />
+          </div>
+          <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '10px' }}>{d.client_name}</p>
+
+          <a
+            href={`https://yandex.ru/maps/?text=${encodeURIComponent(d.address)}`}
+            target="_blank" rel="noopener noreferrer"
+            style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem', fontWeight: 510, marginBottom: '10px', color: 'var(--color-text)' }}
+          >
+            <MapPin size={18} style={{ flexShrink: 0, color: 'var(--color-shop-accent-fg)' }} />
+            {d.address}
+          </a>
+
+          {d.scheduled_at && (
+            <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '6px' }}>
+              {new Date(d.scheduled_at).toLocaleString('ru-RU')}
+            </p>
+          )}
+          {d.note && <p style={{ fontSize: '0.82rem', marginBottom: '10px' }}>{d.note}</p>}
+
+          <DeliveryStatusActions delivery={d} onChanged={onChanged} size="lg" />
+          {d.signature_key && <SignatureThumb fileKey={d.signature_key} />}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default CourierDeliveryQueue
diff --git a/production/web/src/delivery/DeliveriesPage.jsx b/production/web/src/delivery/DeliveriesPage.jsx
new file mode 100644
index 0000000..e5da1b4
--- /dev/null
+++ b/production/web/src/delivery/DeliveriesPage.jsx
@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { MapPin } from 'lucide-react'
+import { useDeliveries } from './useDeliveries'
+import { useAssignableStaff } from '../orders/useAssignableStaff'
+import { useAuth } from '../auth/AuthContext'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { DeliveryStatusBadge, DeliveryStatusActions } from './DeliveryStatusControl'
+import CourierDeliveryQueue from './CourierDeliveryQueue'
+import DeliveryMap from './DeliveryMap'
+import SignatureThumb from './SignatureThumb'
+import { STATUS_LABELS } from './statuses'
+
+const selectStyle = { ...inputStyle, width: 'auto', padding: '10px 14px' }
+
+// Courier queue — every delivery across every order, filterable by status/
+// courier, with the same one-click transition buttons DeliverySection uses
+// (see DeliveryStatusControl.jsx) so a courier can work the whole day's
+// route from this one page without opening each order individually.
+//
+// Masters get a different render entirely (CourierDeliveryQueue) — a
+// master IS the courier here (no separate courier role in this app), so
+// defaulting the filter to "my deliveries" and swapping the dense table for
+// big touch cards matches how they actually use this page: on a phone,
+// mid-route, one delivery at a time. Owner/manager keep the full
+// filterable table — they're triaging the whole queue, not one route.
+const DeliveriesPage = () => {
+  const { staff } = useAuth()
+  const isCourierView = staff?.role === 'master'
+  const [status, setStatus] = useState('')
+  const [courierStaffId, setCourierStaffId] = useState(() => (isCourierView ? staff.id : ''))
+  // Map preview is click-to-reveal, one row at a time — this list can hold
+  // a lot of rows, and eagerly mounting a live Yandex map per row would
+  // mean dozens of concurrent geocode requests + map instances for no
+  // reason most of the time.
+  const [mapOpenId, setMapOpenId] = useState(null)
+  const assignableStaff = useAssignableStaff()
+  const { deliveries, loading, reload } = useDeliveries({ status, courier_staff_id: courierStaffId })
+
+  if (isCourierView) {
+    return (
+      <div>
+        <div style={{ display: 'flex', gap: '8px', marginBottom: '14px' }}>
+          <button
+            type="button"
+            onClick={() => setCourierStaffId(courierStaffId ? '' : staff.id)}
+            className={courierStaffId ? 'btn-primary' : 'btn-outline'}
+            style={{ padding: '8px 14px', fontSize: '0.82rem' }}
+          >
+            {courierStaffId ? 'Мои доставки' : 'Все доставки'}
+          </button>
+        </div>
+        <CourierDeliveryQueue deliveries={deliveries} loading={loading} onChanged={reload} />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div>
+          <label style={labelStyle}>Статус</label>
+          <select value={status} onChange={(e) => setStatus(e.target.value)} style={selectStyle}>
+            <option value="">Все</option>
+            {Object.entries(STATUS_LABELS).map(([v, label]) => <option key={v} value={v}>{label}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>Курьер</label>
+          <select value={courierStaffId} onChange={(e) => setCourierStaffId(e.target.value)} style={selectStyle}>
+            <option value="">Все</option>
+            {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+        <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginLeft: 'auto' }}>
+          {loading ? 'Загрузка...' : `Найдено: ${deliveries.length}`}
+        </span>
+      </div>
+
+      <div className="glass-panel" style={{ overflow: 'hidden' }}>
+        {!loading && deliveries.length === 0 && (
+          <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Доставок не найдено</p>
+        )}
+        {deliveries.map((d) => (
+          <div key={d.id} className="list-row" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px' }}>
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>
+                  {d.order_number ? `№ ${d.order_number}` : ''} {d.device_type} · {d.client_name}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setMapOpenId(mapOpenId === d.id ? null : d.id)}
+                  style={{
+                    display: 'inline-flex', alignItems: 'center', gap: '4px', background: 'none',
+                    fontSize: '0.82rem', marginTop: '2px', color: mapOpenId === d.id ? 'var(--color-accent-fg)' : 'var(--color-text)',
+                    padding: 0, textAlign: 'left',
+                  }}
+                >
+                  <MapPin size={13} style={{ flexShrink: 0 }} /> {d.address}
+                </button>
+                <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', marginTop: '2px' }}>
+                  {d.courier_staff_name ? `Курьер: ${d.courier_staff_name}` : 'Курьер не назначен'}
+                  {d.scheduled_at ? ` · ${new Date(d.scheduled_at).toLocaleString('ru-RU')}` : ''}
+                  {d.note ? ` — ${d.note}` : ''}
+                </p>
+              </div>
+              <DeliveryStatusBadge status={d.status} />
+            </div>
+            <div style={{ marginTop: '8px' }}>
+              <DeliveryStatusActions delivery={d} onChanged={reload} />
+            </div>
+            {d.signature_key && <SignatureThumb fileKey={d.signature_key} />}
+            {mapOpenId === d.id && (
+              <div style={{ marginTop: '10px' }}>
+                <DeliveryMap address={d.address} />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default DeliveriesPage
diff --git a/production/web/src/delivery/DeliveryMap.jsx b/production/web/src/delivery/DeliveryMap.jsx
new file mode 100644
index 0000000..25128fa
--- /dev/null
+++ b/production/web/src/delivery/DeliveryMap.jsx
@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react'
+import L from 'leaflet'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+
+// Leaflet's default marker icon references image paths that only resolve
+// correctly when served from leaflet's own directory layout — under a
+// bundler (Vite here) those paths 404 silently and the marker renders as a
+// blank square. Re-pointing at the Vite-processed asset URLs (imported
+// above, so they get hashed/copied into the build like any other asset)
+// is the standard fix for this well-known Leaflet+bundler issue.
+const markerIconInstance = L.icon({
+  iconUrl: markerIcon,
+  iconRetinaUrl: markerIcon2x,
+  shadowUrl: markerShadow,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+})
+
+// Nominatim (OpenStreetMap's free public geocoder) — no API key, but its
+// usage policy expects reasonable, non-bulk traffic and a way to identify
+// the caller; the browser's own Referer header (sent automatically) covers
+// that for this on-demand, one-lookup-per-click usage pattern. Never called
+// in a loop or on keystroke — only when `address` changes, same cadence the
+// old Yandex-backed version used.
+async function geocode(address) {
+  const url = `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`
+  const res = await fetch(url)
+  if (!res.ok) throw new Error('geocoding request failed')
+  const results = await res.json()
+  if (!results.length) return null
+  return { lat: parseFloat(results[0].lat), lng: parseFloat(results[0].lon) }
+}
+
+const boxStyle = {
+  width: '100%', height: '220px', borderRadius: '12px',
+  border: '1px solid var(--color-border)', background: 'var(--color-surface)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  overflow: 'hidden', position: 'relative',
+}
+
+const mutedText = { fontSize: '0.82rem', color: 'var(--color-text-muted)', textAlign: 'center', padding: '0 16px' }
+
+function Placeholder({ children }) {
+  return (
+    <div style={{ ...boxStyle, borderStyle: 'dashed' }}>
+      <p style={mutedText}>{children}</p>
+    </div>
+  )
+}
+
+// Shows a delivery address on a map — geocodes client-side via Nominatim
+// (OpenStreetMap's free geocoder, no API key) and renders a Leaflet map
+// with OSM tiles, no backend involvement (this app stores address as free
+// text, no lat/lng columns). Was Yandex Maps; switched to a free stack
+// after two different Yandex API keys were both rejected by Yandex's own
+// Geocoder endpoint.
+//
+// Every non-happy-path state (loading, geocode miss, request failure)
+// renders an intentional placeholder rather than a blank box or a thrown
+// error.
+const DeliveryMap = ({ address }) => {
+  const containerRef = useRef(null)
+  const mapRef = useRef(null)
+  const [status, setStatus] = useState('loading')
+
+  useEffect(() => {
+    if (!address) return
+    let cancelled = false
+    setStatus('loading')
+
+    geocode(address)
+      .then((coords) => {
+        if (cancelled) return
+        if (!coords) {
+          setStatus('not-found')
+          return
+        }
+        if (mapRef.current) {
+          mapRef.current.remove()
+          mapRef.current = null
+        }
+        if (!containerRef.current) return
+        const map = L.map(containerRef.current, { zoomControl: true }).setView([coords.lat, coords.lng], 16)
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+          maxZoom: 19,
+        }).addTo(map)
+        L.marker([coords.lat, coords.lng], { icon: markerIconInstance }).addTo(map)
+        mapRef.current = map
+        setStatus('ready')
+      })
+      .catch(() => {
+        if (!cancelled) setStatus('error')
+      })
+
+    return () => {
+      cancelled = true
+      if (mapRef.current) {
+        mapRef.current.remove()
+        mapRef.current = null
+      }
+    }
+  }, [address])
+
+  if (!address) {
+    return <Placeholder>Укажите адрес, чтобы увидеть его на карте</Placeholder>
+  }
+  if (status === 'not-found') {
+    return (
+      <Placeholder>
+        Не удалось найти на карте: {address}
+      </Placeholder>
+    )
+  }
+  if (status === 'error') {
+    return <Placeholder>Не удалось загрузить карту</Placeholder>
+  }
+
+  return (
+    <div style={boxStyle}>
+      {status === 'loading' && (
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--color-surface)', zIndex: 1000 }}>
+          <div style={{
+            width: '22px', height: '22px', borderRadius: '50%',
+            border: '2.5px solid var(--color-border)', borderTopColor: 'var(--color-accent)',
+            animation: 'spin 0.7s linear infinite',
+          }} />
+        </div>
+      )}
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+    </div>
+  )
+}
+
+export default DeliveryMap
diff --git a/production/web/src/delivery/DeliverySection.jsx b/production/web/src/delivery/DeliverySection.jsx
new file mode 100644
index 0000000..a016843
--- /dev/null
+++ b/production/web/src/delivery/DeliverySection.jsx
@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { Truck } from 'lucide-react'
+import * as api from '../lib/api'
+import { useDeliveries } from './useDeliveries'
+import { useAssignableStaff } from '../orders/useAssignableStaff'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { DeliveryStatusBadge, DeliveryStatusActions } from './DeliveryStatusControl'
+import DeliveryMap from './DeliveryMap'
+import SignatureThumb from './SignatureThumb'
+
+export function CreateDeliveryForm({ orderId, onCreated }) {
+  const assignableStaff = useAssignableStaff()
+  const [address, setAddress] = useState('')
+  const [courierId, setCourierId] = useState('')
+  const [scheduledAt, setScheduledAt] = useState('')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      const courier = assignableStaff.find((s) => s.id === courierId)
+      await api.deliveries.create({
+        order_id: orderId,
+        address,
+        courier_staff_id: courierId,
+        courier_staff_name: courier?.name || '',
+        scheduled_at: scheduledAt ? new Date(scheduledAt).toISOString() : '',
+        note,
+      })
+      setAddress('')
+      setCourierId('')
+      setScheduledAt('')
+      setNote('')
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div>
+        <label style={labelStyle}>Адрес доставки</label>
+        <input value={address} onChange={(e) => setAddress(e.target.value)} style={inputStyle} required />
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Курьер (необязательно)</label>
+          <select value={courierId} onChange={(e) => setCourierId(e.target.value)} style={inputStyle}>
+            <option value="">— не назначен —</option>
+            {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Когда</label>
+          <input type="datetime-local" value={scheduledAt} onChange={(e) => setScheduledAt(e.target.value)} style={inputStyle} />
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start' }}>
+        {saving ? 'Создаём...' : 'Создать доставку'}
+      </button>
+    </form>
+  )
+}
+
+function DeliveryRow({ delivery, onChanged }) {
+  return (
+    <div style={{ padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px' }}>
+        <div>
+          <p style={{ fontSize: '0.85rem' }}>{delivery.address}</p>
+          <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>
+            {delivery.courier_staff_name ? `Курьер: ${delivery.courier_staff_name}` : 'Курьер не назначен'}
+            {delivery.scheduled_at ? ` · ${new Date(delivery.scheduled_at).toLocaleString('ru-RU')}` : ''}
+            {delivery.note ? ` — ${delivery.note}` : ''}
+          </p>
+        </div>
+        <DeliveryStatusBadge status={delivery.status} />
+      </div>
+      <div style={{ marginTop: '8px' }}>
+        <DeliveryStatusActions delivery={delivery} onChanged={onChanged} />
+      </div>
+      {delivery.signature_key && <SignatureThumb fileKey={delivery.signature_key} />}
+      <div style={{ marginTop: '10px' }}>
+        <DeliveryMap address={delivery.address} />
+      </div>
+    </div>
+  )
+}
+
+// Embedded in OrderModal's "Доставка" tab — same shape as CashSection: a
+// create form plus the list of deliveries this order has had (more than
+// one if an earlier attempt failed and a fresh row was created for retry,
+// see internal/delivery's own doc comment for why that's a new row rather
+// than reusing the failed one).
+const DeliverySection = ({ orderId }) => {
+  const { deliveries, loading, reload } = useDeliveries({ order_id: orderId })
+
+  return (
+    <div>
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Truck size={16} /> Доставка
+      </h3>
+      <CreateDeliveryForm orderId={orderId} onCreated={reload} />
+      <div style={{ marginTop: '12px' }}>
+        {loading ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+        ) : deliveries.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Доставок пока нет</p>
+        ) : (
+          deliveries.map((d) => <DeliveryRow key={d.id} delivery={d} onChanged={reload} />)
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DeliverySection
diff --git a/production/web/src/delivery/DeliveryStatusControl.jsx b/production/web/src/delivery/DeliveryStatusControl.jsx
new file mode 100644
index 0000000..830d46b
--- /dev/null
+++ b/production/web/src/delivery/DeliveryStatusControl.jsx
@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import * as api from '../lib/api'
+import { STATUS_LABELS, STATUS_COLORS, NEXT_STATUSES } from './statuses'
+import SignaturePadModal from './SignaturePad'
+
+export function DeliveryStatusBadge({ status }) {
+  return (
+    <span style={{
+      fontSize: '0.72rem', fontWeight: 590, padding: '3px 9px', borderRadius: '50px', whiteSpace: 'nowrap',
+      background: `${STATUS_COLORS[status]}1a`, color: STATUS_COLORS[status],
+    }}>
+      {STATUS_LABELS[status] || status}
+    </span>
+  )
+}
+
+// One-click transition buttons for whatever the current status legally
+// allows next (see internal/delivery/validate.go's canTransition) — shared
+// by DeliverySection (embedded in OrderModal) and DeliveriesPage (the
+// courier queue) so the two never drift on what's clickable when.
+// size="lg" is CourierDeliveryQueue's touch-target variant — same buttons,
+// bigger hit area, no other behavior difference.
+export function DeliveryStatusActions({ delivery, onChanged, size = 'sm' }) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  // "delivered" needs the client's signature first (see internal/delivery's
+  // UpdateStatus, which rejects the transition server-side without one
+  // already on file) — clicking that option opens the capture modal
+  // instead of calling the API directly; the modal's own onSigned callback
+  // is what actually fires setStatus, once the upload succeeds.
+  const [signing, setSigning] = useState(false)
+  const nextOptions = NEXT_STATUSES[delivery.status] || []
+  const large = size === 'lg'
+
+  const setStatus = async (status) => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.deliveries.updateStatus(delivery.id, status)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleClick = (status) => {
+    if (status === 'delivered') { setSigning(true); return }
+    setStatus(status)
+  }
+
+  if (nextOptions.length === 0 && !error) return null
+
+  return (
+    <>
+      {nextOptions.length > 0 && (
+        <div style={{ display: 'flex', gap: large ? '8px' : '6px', flexWrap: 'wrap' }}>
+          {nextOptions.map((s) => (
+            <button
+              key={s} type="button" disabled={busy} onClick={() => handleClick(s)}
+              className="btn-outline"
+              style={large
+                ? { padding: '14px 18px', fontSize: '0.92rem', fontWeight: 590, borderRadius: '12px', flex: '1 1 auto', minWidth: '120px' }
+                : { padding: '5px 10px', fontSize: '0.76rem' }}
+            >
+              {STATUS_LABELS[s]}
+            </button>
+          ))}
+        </div>
+      )}
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', marginTop: '4px' }}>{error}</p>}
+      {signing && (
+        <SignaturePadModal
+          deliveryId={delivery.id}
+          clientName={delivery.client_name}
+          onClose={() => setSigning(false)}
+          onSigned={() => { setSigning(false); setStatus('delivered') }}
+        />
+      )}
+    </>
+  )
+}
diff --git a/production/web/src/delivery/QuickAddDeliveryButton.jsx b/production/web/src/delivery/QuickAddDeliveryButton.jsx
new file mode 100644
index 0000000..66a84ae
--- /dev/null
+++ b/production/web/src/delivery/QuickAddDeliveryButton.jsx
@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Route } from 'lucide-react'
+import Modal from '../ui/Modal'
+import { CreateDeliveryForm } from './DeliverySection'
+
+// One-click "В доставку" from the Kanban card / orders list row — the
+// alternative was opening the full OrderModal and hunting for the
+// «Доставка» tab just to fill in an address, which is what staff were
+// actually complaining was missing. Reuses DeliverySection's own create
+// form so the two entry points never drift apart.
+const QuickAddDeliveryButton = ({ orderId, size = 13 }) => {
+  const [open, setOpen] = useState(false)
+  const [justAdded, setJustAdded] = useState(false)
+
+  if (justAdded) {
+    return (
+      <span style={{ fontSize: '0.72rem', fontWeight: 510, color: 'var(--color-shop-accent-fg)' }}>
+        В доставке
+      </span>
+    )
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); setOpen(true) }}
+        title="Добавить в доставку"
+        style={{
+          display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 9px',
+          borderRadius: '50px', fontSize: '0.72rem', fontWeight: 510,
+          background: 'var(--color-shop-accent-soft)', color: 'var(--color-shop-accent-fg)',
+          border: 'none', flexShrink: 0,
+        }}
+      >
+        <Route size={size} /> В доставку
+      </button>
+      {open && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <Modal title="Новая доставка" onClose={() => setOpen(false)} maxWidth="440px">
+            <CreateDeliveryForm orderId={orderId} onCreated={() => { setOpen(false); setJustAdded(true) }} />
+          </Modal>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default QuickAddDeliveryButton
diff --git a/production/web/src/delivery/SignaturePad.jsx b/production/web/src/delivery/SignaturePad.jsx
new file mode 100644
index 0000000..750001d
--- /dev/null
+++ b/production/web/src/delivery/SignaturePad.jsx
@@ -0,0 +1,119 @@
+import { useRef, useState } from 'react'
+import Modal from '../ui/Modal'
+import * as api from '../lib/api'
+
+// Sets up the canvas's actual pixel buffer at devicePixelRatio and the
+// stroke style once, called from a ref callback so it runs exactly when
+// the <canvas> element mounts (after the modal's own entrance animation
+// has laid it out, so getBoundingClientRect below reads the final size).
+function initCanvas(canvas) {
+  if (!canvas) return
+  const rect = canvas.getBoundingClientRect()
+  const ratio = window.devicePixelRatio || 1
+  canvas.width = rect.width * ratio
+  canvas.height = rect.height * ratio
+  const ctx = canvas.getContext('2d')
+  ctx.scale(ratio, ratio)
+  ctx.lineWidth = 2.4
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  ctx.strokeStyle = '#111'
+}
+
+// Captures the client's signature at handoff and uploads it, then reports
+// success — see DeliveryStatusControl.jsx, which opens this in place of an
+// immediate "delivered" status call and only fires that call once onSigned
+// resolves. clientName is shown so whoever's driving the phone can double
+// check they're on the right delivery before drawing anything.
+//
+// No signature_pad-style library — a finger/stylus tracing a <canvas> path
+// is the whole feature, not worth a dependency. Pointer events (not touch/
+// mouse separately) so the same handlers work for a stylus, a finger, and
+// a mouse in desktop testing.
+const SignaturePadModal = ({ deliveryId, clientName, onSigned, onClose }) => {
+  const canvasRef = useRef(null)
+  const drawing = useRef(false)
+  const last = useRef(null)
+  const [hasDrawn, setHasDrawn] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const pos = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect()
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top }
+  }
+  const start = (e) => {
+    e.preventDefault()
+    canvasRef.current.setPointerCapture(e.pointerId)
+    drawing.current = true
+    last.current = pos(e)
+  }
+  const move = (e) => {
+    if (!drawing.current) return
+    e.preventDefault()
+    const ctx = canvasRef.current.getContext('2d')
+    const p = pos(e)
+    ctx.beginPath()
+    ctx.moveTo(last.current.x, last.current.y)
+    ctx.lineTo(p.x, p.y)
+    ctx.stroke()
+    last.current = p
+    setHasDrawn(true)
+  }
+  const end = () => { drawing.current = false }
+
+  const clear = () => {
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    setHasDrawn(false)
+  }
+
+  const confirm = () => {
+    setBusy(true)
+    setError('')
+    canvasRef.current.toBlob(async (blob) => {
+      try {
+        await api.deliveries.uploadSignature(deliveryId, blob)
+        onSigned()
+      } catch (err) {
+        setError(err.message)
+        setBusy(false)
+      }
+    }, 'image/png')
+  }
+
+  return (
+    <Modal title="Подпись клиента" onClose={onClose}>
+      <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginBottom: '10px' }}>
+        {clientName ? `Клиент: ${clientName}. ` : ''}
+        Попросите клиента расписаться пальцем или стилусом в подтверждение получения устройства.
+      </p>
+      <canvas
+        ref={(el) => { canvasRef.current = el; initCanvas(el) }}
+        onPointerDown={start}
+        onPointerMove={move}
+        onPointerUp={end}
+        onPointerLeave={end}
+        style={{
+          width: '100%', height: '220px', touchAction: 'none', borderRadius: '10px',
+          border: '1px solid var(--color-border)', background: '#fff', cursor: 'crosshair',
+        }}
+      />
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginTop: '8px' }}>{error}</p>}
+      <div style={{ display: 'flex', gap: '8px', marginTop: '14px' }}>
+        <button type="button" className="btn-outline" onClick={clear} disabled={busy} style={{ padding: '10px 16px' }}>
+          Очистить
+        </button>
+        <button
+          type="button" className="btn-primary" onClick={confirm} disabled={busy || !hasDrawn}
+          style={{ padding: '10px 16px', marginLeft: 'auto', flex: '1 1 auto' }}
+        >
+          {busy ? 'Сохранение...' : 'Подтвердить и выдать'}
+        </button>
+      </div>
+    </Modal>
+  )
+}
+
+export default SignaturePadModal
diff --git a/production/web/src/delivery/SignatureThumb.jsx b/production/web/src/delivery/SignatureThumb.jsx
new file mode 100644
index 0000000..19564bb
--- /dev/null
+++ b/production/web/src/delivery/SignatureThumb.jsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react'
+import { fetchFileBlobUrl } from '../lib/api'
+
+// Same auth-header-can't-go-on-<img>-src fetch as orders/PhotoThumb.jsx —
+// shown next to a delivered row so the client's signature (see
+// SignaturePad.jsx) is right there in the registry, not a click away.
+const SignatureThumb = ({ fileKey }) => {
+  const [url, setUrl] = useState(null)
+
+  useEffect(() => {
+    let objectUrl
+    let cancelled = false
+    fetchFileBlobUrl(fileKey).then((u) => {
+      if (cancelled) { URL.revokeObjectURL(u); return }
+      objectUrl = u
+      setUrl(u)
+    }).catch(() => {})
+    return () => {
+      cancelled = true
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    }
+  }, [fileKey])
+
+  if (!url) return null
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
+      <img
+        src={url}
+        alt="Подпись клиента"
+        style={{ height: '36px', maxWidth: '110px', objectFit: 'contain', borderRadius: '6px', border: '1px solid var(--color-border)', background: '#fff' }}
+      />
+      <span style={{ fontSize: '0.76rem', color: 'var(--color-text-muted)' }}>Подпись клиента</span>
+    </a>
+  )
+}
+
+export default SignatureThumb
diff --git a/production/web/src/delivery/statuses.js b/production/web/src/delivery/statuses.js
new file mode 100644
index 0000000..98c176d
--- /dev/null
+++ b/production/web/src/delivery/statuses.js
@@ -0,0 +1,6 @@
+// Mirrors internal/delivery/validate.go's canTransition — kept in sync
+// manually (no owner-facing rename need here, unlike orders/statuses.js
+// post-Фаза 19, so this stays a plain static module).
+export const STATUS_LABELS = { pending: 'Ожидает', in_transit: 'В пути', delivered: 'Доставлено', failed: 'Не удалось', cancelled: 'Отменено' }
+export const STATUS_COLORS = { pending: '#f59e0b', in_transit: '#0ea5e9', delivered: '#22c55e', failed: '#ef4444', cancelled: '#64748b' }
+export const NEXT_STATUSES = { pending: ['in_transit', 'cancelled'], in_transit: ['delivered', 'failed', 'cancelled'], failed: ['pending', 'cancelled'] }
diff --git a/production/web/src/delivery/useDeliveries.js b/production/web/src/delivery/useDeliveries.js
new file mode 100644
index 0000000..a01ebce
--- /dev/null
+++ b/production/web/src/delivery/useDeliveries.js
@@ -0,0 +1,29 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// filters: { status, courier_staff_id, order_id } — same shape as
+// api.deliveries.list's own query params, passed straight through.
+export function useDeliveries(filters = {}) {
+  const [deliveries, setDeliveries] = useState([])
+  const [loading, setLoading] = useState(true)
+  const key = JSON.stringify(filters)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setDeliveries((await api.deliveries.list(filters)) || [])
+    } finally {
+      setLoading(false)
+    }
+    // filters is a fresh object literal on every caller render — depending
+    // on `key` (its stable JSON string) instead is what keeps this from
+    // refetching in a loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  return { deliveries, loading, reload: load }
+}
diff --git a/production/web/src/doctemplates/DocumentTemplatesPage.jsx b/production/web/src/doctemplates/DocumentTemplatesPage.jsx
new file mode 100644
index 0000000..23ea9f4
--- /dev/null
+++ b/production/web/src/doctemplates/DocumentTemplatesPage.jsx
@@ -0,0 +1,203 @@
+import { useState, useEffect } from 'react'
+import { Plus, Trash2, ArrowUp, ArrowDown, Eye, EyeOff } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from '../orders/formStyles'
+
+// Owner-only page (gated by Sidebar's roles; the backend enforces the same
+// restriction independently via ownerOnly on every /api/document-templates
+// route). Every non-text block is structural — fixed for its document kind,
+// reorderable and hideable but never addable/removable (see
+// internal/pdfgen/blocks.go's InvoiceBlockTypes/ActBlockTypes) — only
+// BlockText entries are the owner's own content, freely added/edited/removed.
+const TYPE_LABELS = {
+  business_info: 'Реквизиты бизнеса',
+  client_info: 'Реквизиты клиента',
+  items_table: 'Таблица товаров/услуг',
+  sum_words: 'Сумма прописью',
+  signature: 'Подпись и печать',
+  intro_line: 'Вступительная фраза',
+  work_summary: 'Описание выполненных работ',
+  warranty_line: 'Строка гарантии',
+  cost_line: 'Строка стоимости',
+  signature_performer: 'Подпись исполнителя',
+  signature_client: 'Подпись заказчика',
+  device_info: 'Устройство и неисправность',
+  intake_meta: 'Дата приёма и мастер',
+  custom_fields: 'Кастомные поля приёмки',
+  inspection_checklist: 'Осмотр при приёмке',
+  text: 'Свой текст',
+}
+
+const TABS = [
+  { kind: 'invoice', label: 'Счёт' },
+  { kind: 'act', label: 'Акт' },
+  { kind: 'receipt', label: 'Квитанция о приёме' },
+]
+
+function BlockRow({ block, isFirst, isLast, onSwap, onToggleVisible, onTextChange, onRemove }) {
+  const isText = block.type === 'text'
+  return (
+    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', gap: '12px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '2px' }}>
+        <button type="button" onClick={() => onSwap(-1)} disabled={isFirst} className="btn-outline" style={{ padding: '2px', opacity: isFirst ? 0.3 : 1 }} aria-label="Выше">
+          <ArrowUp size={13} />
+        </button>
+        <button type="button" onClick={() => onSwap(1)} disabled={isLast} className="btn-outline" style={{ padding: '2px', marginTop: '2px', opacity: isLast ? 0.3 : 1 }} aria-label="Ниже">
+          <ArrowDown size={13} />
+        </button>
+      </div>
+      <div style={{ flex: '1 1 260px', minWidth: '220px' }}>
+        <p style={{ fontWeight: 510, fontSize: '0.88rem', marginBottom: isText ? '6px' : 0 }}>
+          {TYPE_LABELS[block.type] || block.type}
+          {!block.visible && <span style={{ color: 'var(--text-muted)', fontWeight: 400, fontSize: '0.78rem' }}> · скрыт</span>}
+        </p>
+        {isText && (
+          <textarea
+            value={block.text || ''}
+            onChange={(e) => onTextChange(e.target.value)}
+            rows={3}
+            style={{ ...inputStyle, width: '100%', resize: 'vertical' }}
+          />
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={onToggleVisible}
+        className="btn-outline"
+        style={{ padding: '7px', display: 'flex', alignItems: 'center' }}
+        aria-label={block.visible ? 'Скрыть блок' : 'Показать блок'}
+        title={block.visible ? 'Скрыть блок' : 'Показать блок'}
+      >
+        {block.visible ? <Eye size={14} /> : <EyeOff size={14} />}
+      </button>
+      {isText && (
+        <button type="button" onClick={onRemove} className="btn-outline" style={{ padding: '7px' }} aria-label="Удалить блок" title="Удалить блок">
+          <Trash2 size={14} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+const DocumentTemplatesPage = () => {
+  const [kind, setKind] = useState('invoice')
+  const [blocks, setBlocks] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [saved, setSaved] = useState(false)
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true)
+      setError('')
+      setSaved(false)
+      try {
+        setBlocks(await api.documentTemplates.get(kind))
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [kind])
+
+  const updateBlock = (index, patch) => {
+    setBlocks((list) => list.map((b, i) => (i === index ? { ...b, ...patch } : b)))
+    setSaved(false)
+  }
+
+  const swap = (index, direction) => {
+    setBlocks((list) => {
+      const next = [...list]
+      const other = index + direction
+      if (other < 0 || other >= next.length) return list
+      ;[next[index], next[other]] = [next[other], next[index]]
+      return next
+    })
+    setSaved(false)
+  }
+
+  const addTextBlock = () => {
+    setBlocks((list) => [...list, { id: '', type: 'text', visible: true, text: '' }])
+    setSaved(false)
+  }
+
+  const removeBlock = (index) => {
+    setBlocks((list) => list.filter((_, i) => i !== index))
+    setSaved(false)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      const savedBlocks = await api.documentTemplates.update(kind, blocks)
+      setBlocks(savedBlocks)
+      setSaved(true)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Шаблоны документов</h1>
+      </div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
+        Порядок и видимость блоков Счёта, Акта и Квитанции о приёме — плюс свой текст (например, формулировка в акте или примечание к счёту). Структура таблицы и шрифты не редактируются здесь.
+      </p>
+
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+        {TABS.map((t) => (
+          <button
+            key={t.kind}
+            type="button"
+            onClick={() => setKind(t.kind)}
+            className={kind === t.kind ? 'btn-primary' : 'btn-outline'}
+            style={{ padding: '8px 18px', fontSize: '0.85rem' }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {loading && <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>}
+      {error && !loading && <p style={{ color: 'var(--accent-red)', marginBottom: '10px' }}>{error}</p>}
+
+      {!loading && blocks && (
+        <>
+          <div className="glass-panel" style={{ overflow: 'hidden', marginBottom: '14px' }}>
+            {blocks.map((b, i) => (
+              <BlockRow
+                key={b.id || `new-${i}`}
+                block={b}
+                isFirst={i === 0}
+                isLast={i === blocks.length - 1}
+                onSwap={(direction) => swap(i, direction)}
+                onToggleVisible={() => updateBlock(i, { visible: !b.visible })}
+                onTextChange={(text) => updateBlock(i, { text })}
+                onRemove={() => removeBlock(i)}
+              />
+            ))}
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
+            <button type="button" onClick={addTextBlock} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <Plus size={15} /> Свой текст
+            </button>
+            <button type="button" onClick={handleSave} disabled={saving} className="btn-primary" style={{ padding: '9px 20px', fontSize: '0.85rem' }}>
+              {saving ? 'Сохраняем...' : 'Сохранить'}
+            </button>
+            {saved && <span style={{ fontSize: '0.82rem', color: 'var(--accent-green)' }}>Сохранено</span>}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default DocumentTemplatesPage
diff --git a/production/web/src/hooks/useAccentColor.js b/production/web/src/hooks/useAccentColor.js
new file mode 100644
index 0000000..5116a2b
--- /dev/null
+++ b/production/web/src/hooks/useAccentColor.js
@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { useLocalStorageState } from './useLocalStorageState'
+import { useTheme } from './useTheme'
+import { accentForegroundOn, readableTextOn } from '../lib/color'
+
+const STORAGE_KEY = 'accentColor'
+const HEX_RE = /^#[0-9a-fA-F]{6}$/
+const DEFAULT_ACCENT = '#e4f222' // --color-acid-lime, index.css's own default
+
+// A curated set rather than an open palette. Contrast against whatever
+// surface each preset ends up drawn on (button background, tab-label text,
+// …) is no longer a manual pre-check — --color-accent-fg/--color-accent-btn-text
+// below compute it per-theme from the actual hex, so any preset (or a
+// custom color picked via the swatch input) stays legible automatically.
+export const ACCENT_PRESETS = [
+  { value: null, label: 'По умолчанию', swatch: '#e4f222' },
+  { value: '#7c3aed', label: 'Фиолетовый' },
+  { value: '#0891b2', label: 'Бирюзовый' },
+  { value: '#059669', label: 'Изумрудный' },
+  { value: '#db2777', label: 'Малиновый' },
+  { value: '#ca8a04', label: 'Янтарный' },
+  { value: '#dc2626', label: 'Красный' },
+]
+
+// accentColor is a #rrggbb hex or null (null = the theme's own default blue,
+// same "unset = follow the built-in value" convention as useTheme's null).
+// Only ever touches --color-accent/--color-accent-soft on <html> — shop
+// mode's own [data-shop-mode='true'] override (see index.css) still wins
+// inside the Магазин div regardless, since an element's own matching rule
+// always beats an inherited custom property, so this never fights that
+// distinct branding.
+export function useAccentColor() {
+  const { resolvedTheme } = useTheme()
+  const [accentColor, setAccentColor] = useLocalStorageState(
+    STORAGE_KEY,
+    (raw) => (raw && HEX_RE.test(raw) ? raw : null),
+    (next) => (next && HEX_RE.test(next) ? next : null)
+  )
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (accentColor) {
+      root.style.setProperty('--color-accent', accentColor)
+      root.style.setProperty('--color-accent-soft', `${accentColor}14`)
+    } else {
+      root.style.removeProperty('--color-accent')
+      root.style.removeProperty('--color-accent-soft')
+    }
+    // Computed even for the default (accentColor === null) case — the
+    // acid-lime default reads fine as text in dark mode but is unreadable
+    // on light mode's white surface, same bug as any other bright preset.
+    const base = accentColor || DEFAULT_ACCENT
+    root.style.setProperty('--color-accent-fg', accentForegroundOn(base, resolvedTheme))
+    root.style.setProperty('--color-accent-btn-text', readableTextOn(base))
+  }, [accentColor, resolvedTheme])
+
+  return [accentColor, setAccentColor]
+}
diff --git a/production/web/src/hooks/useExpandedGroups.js b/production/web/src/hooks/useExpandedGroups.js
new file mode 100644
index 0000000..05abb5f
--- /dev/null
+++ b/production/web/src/hooks/useExpandedGroups.js
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+
+const STORAGE_KEY = 'sidebar_groups'
+
+function load() {
+  if (typeof window === 'undefined') return {}
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : {}
+  } catch {
+    return {}
+  }
+}
+
+// Per-group expand/collapse, same localStorage pattern as
+// useSidebarCompact/useShopMode. Sidebar.jsx additionally force-opens
+// whichever group contains the active route on top of this persisted
+// state (without collapsing the others) — that override lives in the
+// component since it depends on location, not here.
+export function useExpandedGroups() {
+  const [expanded, setExpanded] = useState(load)
+
+  const toggle = (key) => {
+    setExpanded((prev) => {
+      const next = { ...prev, [key]: !prev[key] }
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+      return next
+    })
+  }
+
+  return [expanded, toggle]
+}
diff --git a/production/web/src/hooks/useFeatureModules.js b/production/web/src/hooks/useFeatureModules.js
new file mode 100644
index 0000000..71bc9eb
--- /dev/null
+++ b/production/web/src/hooks/useFeatureModules.js
@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback, useSyncExternalStore } from 'react'
+import * as api from '../lib/api'
+
+// { online_shop: true, catalogs: true, cartridges: true } while loading —
+// defaulting every key to enabled means nav/routes render their normal,
+// pre-this-feature shape during the first fetch instead of flashing empty,
+// and matches what a fresh install's DB row actually holds (see
+// migrations/030_feature_modules.sql's seed).
+const DEFAULT_MODULES = { online_shop: true, catalogs: true, cartridges: true, delivery: true }
+
+// Module-scoped cache + listener set, same shape as
+// hooks/useLocalStorageState.js's sync fix — AdminLayout, SettingsLayout,
+// SectionsTab and OrderModal all mount their own useFeatureModules() call,
+// and an owner flipping a toggle in SectionsTab needs every other one of
+// those to see it immediately (nav hiding, form fallback), not after a
+// reload. A plain per-instance useState+useEffect fetch (this codebase's
+// usual pattern, e.g. useDeviceCatalog) doesn't give you that — only the
+// instance that called the mutation would ever learn about it.
+let cachedModules = DEFAULT_MODULES
+let hasFetched = false
+const listeners = new Set()
+
+function setCache(next) {
+  cachedModules = next
+  listeners.forEach((callback) => callback())
+}
+
+function subscribe(callback) {
+  listeners.add(callback)
+  return () => listeners.delete(callback)
+}
+
+function getSnapshot() {
+  return cachedModules
+}
+
+async function fetchModules() {
+  const rows = await api.featureModules.list()
+  setCache(Object.fromEntries(rows.map((r) => [r.key, r.enabled])))
+  hasFetched = true
+}
+
+export function useFeatureModules() {
+  const modules = useSyncExternalStore(subscribe, getSnapshot)
+  // Lazy initializer reads hasFetched at mount time — the effect below
+  // only ever needs to flip loading false from inside the fetch's own
+  // .then/.finally, never synchronously in the effect body itself.
+  const [loading, setLoading] = useState(() => !hasFetched)
+
+  useEffect(() => {
+    if (hasFetched) return
+    fetchModules().finally(() => setLoading(false))
+  }, [])
+
+  const setModule = useCallback(async (key, enabled) => {
+    await api.featureModules.set(key, enabled)
+    await fetchModules()
+  }, [])
+
+  return { modules, loading, setModule, reload: fetchModules }
+}
diff --git a/production/web/src/hooks/useFilterPresets.js b/production/web/src/hooks/useFilterPresets.js
new file mode 100644
index 0000000..a57c583
--- /dev/null
+++ b/production/web/src/hooks/useFilterPresets.js
@@ -0,0 +1,37 @@
+import { useState } from 'react'
+
+const STORAGE_KEY = 'order_filter_presets'
+
+function load() {
+  if (typeof window === 'undefined') return []
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+// Same localStorage-array pattern as useShopMode/useSidebarCompact —
+// pinned combinations of the "Все заявки" filter bar, named by the user.
+export function useFilterPresets() {
+  const [presets, setPresets] = useState(load)
+
+  const save = (name, filters) => {
+    setPresets((prev) => {
+      const next = [...prev, { id: `${Date.now()}-${Math.random()}`, name, ...filters }]
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+      return next
+    })
+  }
+
+  const remove = (id) => {
+    setPresets((prev) => {
+      const next = prev.filter((p) => p.id !== id)
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+      return next
+    })
+  }
+
+  return { presets, save, remove }
+}
diff --git a/production/web/src/hooks/useIsMobile.js b/production/web/src/hooks/useIsMobile.js
new file mode 100644
index 0000000..0fe22e4
--- /dev/null
+++ b/production/web/src/hooks/useIsMobile.js
@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react'
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== 'undefined' ? window.innerWidth < 768 : false
+  )
+
+  useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth < 768)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return isMobile
+}
diff --git a/production/web/src/hooks/useLocalStorageState.js b/production/web/src/hooks/useLocalStorageState.js
new file mode 100644
index 0000000..75efb91
--- /dev/null
+++ b/production/web/src/hooks/useLocalStorageState.js
@@ -0,0 +1,48 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+// Backs useTheme/useSidebarPosition/useOrdersView — all three can now be set
+// from two places at once (AdminLayout's own header controls, and Settings'
+// Интерфейс tab), and a plain useState+localStorage per instance only
+// updates the instance that called setState, leaving the other stale until
+// a full reload. useSyncExternalStore + a per-key listener set makes every
+// mounted instance of the same key re-render the moment any of them writes.
+const listenersByKey = new Map()
+
+function getListeners(key) {
+  let set = listenersByKey.get(key)
+  if (!set) {
+    set = new Set()
+    listenersByKey.set(key, set)
+  }
+  return set
+}
+
+function notify(key) {
+  getListeners(key).forEach((callback) => callback())
+}
+
+export function useLocalStorageState(key, decode, encode) {
+  const subscribe = useCallback(
+    (callback) => {
+      const set = getListeners(key)
+      set.add(callback)
+      return () => set.delete(callback)
+    },
+    [key]
+  )
+  const getSnapshot = useCallback(() => window.localStorage.getItem(key), [key])
+  const raw = useSyncExternalStore(subscribe, getSnapshot, () => null)
+  const value = decode(raw)
+
+  const setValue = useCallback(
+    (next) => {
+      const encoded = encode(next)
+      if (encoded === null) window.localStorage.removeItem(key)
+      else window.localStorage.setItem(key, encoded)
+      notify(key)
+    },
+    [key, encode]
+  )
+
+  return [value, setValue]
+}
diff --git a/production/web/src/hooks/useNotifications.js b/production/web/src/hooks/useNotifications.js
new file mode 100644
index 0000000..39ae765
--- /dev/null
+++ b/production/web/src/hooks/useNotifications.js
@@ -0,0 +1,52 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import * as api from '../lib/api'
+import { subscribeRealtime } from '../lib/realtime'
+
+// Polls once on mount, then stays fresh via the shared realtime SSE channel
+// (notification.Create broadcasts topic "notifications" — see
+// internal/notification/notification.go) instead of its own polling loop.
+// loadedOnce guards setLoading(true) the same way useFeatureModules.js does —
+// without it, every realtime push would flip loading back to true and
+// unmount whatever's rendering the list (see that file's comment for the
+// bug this caused twice already this session).
+export function useNotifications() {
+  const [items, setItems] = useState([])
+  const loadedOnce = useRef(false)
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(async () => {
+    if (!loadedOnce.current) setLoading(true)
+    try {
+      setItems(await api.notifications.list())
+    } finally {
+      loadedOnce.current = true
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    reload()
+    return subscribeRealtime((topic) => {
+      if (topic === 'notifications') reload()
+    })
+  }, [reload])
+
+  const markRead = useCallback(async (id) => {
+    await api.notifications.markRead(id)
+    await reload()
+  }, [reload])
+
+  const runAction = useCallback(async (id) => {
+    await api.notifications.action(id)
+    await reload()
+  }, [reload])
+
+  const dismiss = useCallback(async (id) => {
+    await api.notifications.dismiss(id)
+    await reload()
+  }, [reload])
+
+  const unreadCount = items.filter((n) => !n.read_at).length
+
+  return { items, loading, unreadCount, reload, markRead, runAction, dismiss }
+}
diff --git a/production/web/src/hooks/useOrdersView.js b/production/web/src/hooks/useOrdersView.js
new file mode 100644
index 0000000..fde1399
--- /dev/null
+++ b/production/web/src/hooks/useOrdersView.js
@@ -0,0 +1,16 @@
+import { useLocalStorageState } from './useLocalStorageState'
+
+const STORAGE_KEY = 'orders_view'
+
+// 'kanban' | 'list' — which surface /kanban and /orders render by default.
+// Same localStorage pattern as useSidebarPosition/useTheme: read once at
+// mount, persist on every change. Settings' Интерфейс tab writes the same
+// key, so useLocalStorageState's cross-instance sync keeps App.jsx's root
+// redirect and this tab's own control in agreement without a reload.
+export function useOrdersView() {
+  return useLocalStorageState(
+    STORAGE_KEY,
+    (raw) => (raw === 'list' ? 'list' : 'kanban'),
+    (next) => next
+  )
+}
diff --git a/production/web/src/hooks/useShopAccentColor.js b/production/web/src/hooks/useShopAccentColor.js
new file mode 100644
index 0000000..041de0c
--- /dev/null
+++ b/production/web/src/hooks/useShopAccentColor.js
@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import { useLocalStorageState } from './useLocalStorageState'
+import { useTheme } from './useTheme'
+import { accentForegroundOn, readableTextOn } from '../lib/color'
+
+const STORAGE_KEY = 'shopAccentColor'
+const HEX_RE = /^#[0-9a-fA-F]{6}$/
+const DEFAULT_SHOP_ACCENT = '#0592a3' // --color-signal-teal, index.css's own default
+
+// Same shape as useAccentColor, targeting --color-shop-accent instead of
+// --color-accent — [data-shop-mode='true'] (see index.css) only ever reads
+// --color-shop-accent, never --color-accent directly, so overriding this
+// custom property on <html> is enough to recolor shop mode without
+// touching the Сервис-mode accent at all.
+export function useShopAccentColor() {
+  const { resolvedTheme } = useTheme()
+  const [shopAccentColor, setShopAccentColor] = useLocalStorageState(
+    STORAGE_KEY,
+    (raw) => (raw && HEX_RE.test(raw) ? raw : null),
+    (next) => (next && HEX_RE.test(next) ? next : null)
+  )
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (shopAccentColor) {
+      root.style.setProperty('--color-shop-accent', shopAccentColor)
+      root.style.setProperty('--color-shop-accent-soft', `${shopAccentColor}14`)
+    } else {
+      root.style.removeProperty('--color-shop-accent')
+      root.style.removeProperty('--color-shop-accent-soft')
+    }
+    // Same contrast fix as useAccentColor — see color.js. index.css's
+    // [data-shop-mode='true'] block re-points --color-accent-fg/
+    // --color-accent-btn-text at these while in shop mode.
+    const base = shopAccentColor || DEFAULT_SHOP_ACCENT
+    root.style.setProperty('--color-shop-accent-fg', accentForegroundOn(base, resolvedTheme))
+    root.style.setProperty('--color-shop-accent-btn-text', readableTextOn(base))
+  }, [shopAccentColor, resolvedTheme])
+
+  return [shopAccentColor, setShopAccentColor]
+}
diff --git a/production/web/src/hooks/useShopMode.js b/production/web/src/hooks/useShopMode.js
new file mode 100644
index 0000000..f48926c
--- /dev/null
+++ b/production/web/src/hooks/useShopMode.js
@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+const STORAGE_KEY = 'shop_mode'
+
+export function useShopMode() {
+  const [shopMode, setShopModeState] = useState(() =>
+    typeof window !== 'undefined' && window.localStorage.getItem(STORAGE_KEY) === '1'
+  )
+
+  const setShopMode = (next) => {
+    setShopModeState(next)
+    window.localStorage.setItem(STORAGE_KEY, next ? '1' : '0')
+  }
+
+  return [shopMode, setShopMode]
+}
diff --git a/production/web/src/hooks/useSidebarCompact.js b/production/web/src/hooks/useSidebarCompact.js
new file mode 100644
index 0000000..5499e59
--- /dev/null
+++ b/production/web/src/hooks/useSidebarCompact.js
@@ -0,0 +1,19 @@
+import { useState } from 'react'
+
+const STORAGE_KEY = 'sidebar_compact'
+
+export function useSidebarCompact() {
+  const [compact, setCompact] = useState(() =>
+    typeof window !== 'undefined' && window.localStorage.getItem(STORAGE_KEY) === '1'
+  )
+
+  const toggle = () => {
+    setCompact((prev) => {
+      const next = !prev
+      window.localStorage.setItem(STORAGE_KEY, next ? '1' : '0')
+      return next
+    })
+  }
+
+  return [compact, toggle]
+}
diff --git a/production/web/src/hooks/useSidebarPosition.js b/production/web/src/hooks/useSidebarPosition.js
new file mode 100644
index 0000000..2e64bfd
--- /dev/null
+++ b/production/web/src/hooks/useSidebarPosition.js
@@ -0,0 +1,17 @@
+import { useLocalStorageState } from './useLocalStorageState'
+
+const STORAGE_KEY = 'sidebar_position'
+
+// 'side' | 'top' — desktop-only layout choice (see AdminLayout.jsx: mobile
+// always uses the Sidebar drawer regardless of this setting). Settable from
+// both AdminLayout's own header icon and Settings' Интерфейс tab, so this
+// needs useLocalStorageState's cross-instance sync — a plain useState here
+// left AdminLayout's copy stale until reload whenever the other instance
+// changed it.
+export function useSidebarPosition() {
+  return useLocalStorageState(
+    STORAGE_KEY,
+    (raw) => (raw === 'top' ? 'top' : 'side'),
+    (next) => next
+  )
+}
diff --git a/production/web/src/hooks/useTheme.js b/production/web/src/hooks/useTheme.js
new file mode 100644
index 0000000..dd364f4
--- /dev/null
+++ b/production/web/src/hooks/useTheme.js
@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { useLocalStorageState } from './useLocalStorageState'
+
+const STORAGE_KEY = 'theme'
+
+function systemPrefersDark() {
+  return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+// theme is 'light' | 'dark' | null (null = follow system preference, the
+// default until the user explicitly picks a side via the toggle). Settable
+// from both AdminLayout's own header icon and Settings' Интерфейс tab —
+// useLocalStorageState keeps every mounted instance (including App.jsx's
+// top-level call that applies data-theme to <html>) in sync without a
+// reload.
+export function useTheme() {
+  const [theme, setTheme] = useLocalStorageState(
+    STORAGE_KEY,
+    (raw) => (raw === 'light' || raw === 'dark' ? raw : null),
+    (next) => next || null
+  )
+
+  useEffect(() => {
+    if (theme) document.documentElement.setAttribute('data-theme', theme)
+    else document.documentElement.removeAttribute('data-theme')
+  }, [theme])
+
+  const resolvedTheme = theme || (systemPrefersDark() ? 'dark' : 'light')
+  const toggleTheme = () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+
+  return { resolvedTheme, toggleTheme }
+}
diff --git a/production/web/src/index.css b/production/web/src/index.css
new file mode 100644
index 0000000..db99b58
--- /dev/null
+++ b/production/web/src/index.css
@@ -0,0 +1,493 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import 'leaflet/dist/leaflet.css';
+
+:root {
+  /* Linear — "midnight precision instrument" (see /root/.claude/DESIGN.md).
+     DESIGN.md only documents Linear's dark reference; the light values below
+     are this app's own faithful extension (Linear's real product does ship
+     a light mode) rather than a literal spec transcription — same semantic
+     token names, same one-accent/hairline-border philosophy, inverted
+     surface direction. Defaults to light here (bare :root); dark is the
+     override, applied via prefers-color-scheme and/or the explicit
+     data-theme toggle (see useTheme.js) exactly like this app's tokens
+     worked before the Linear redesign.
+
+     Semantic tokens map onto Linear's named palette one level down
+     (Void/Carbon/Obsidian/Graphite/Ash/Fog/Mist/Paper/Acid Lime/...) so any
+     component reaching for --color-bg/--color-accent/etc. keeps working
+     unchanged across both themes — only the values move. */
+  --color-void: #fbfbfc;
+  --color-carbon: #ffffff;
+  --color-obsidian: #f4f5f6;
+  --color-graphite: #e3e5e8;
+  --color-smoke: #d3d6db;
+  --color-ash: #9a9fa6;
+  --color-fog: #6b7078;
+  --color-mist: #40454c;
+  --color-bone: #f0f1f3;
+  --color-paper: #14151a;
+  --color-acid-lime: #e4f222;
+  --color-pulse-green: #1a8c3b;
+  --color-coral-red: #d64545;
+  --color-signal-teal: #0592a3;
+  --color-iris-violet: #5457d6;
+  --color-lavender: #7c4fd8;
+
+  --color-bg: var(--color-void);
+  --color-surface: var(--color-carbon);
+  --color-surface-sunken: var(--color-obsidian);
+  --color-border: var(--color-graphite);
+
+  /* Split heading vs. body per DESIGN.md's Don't list ("no chromatic text
+     colors for body copy — all body text sits in the mist/fog/ash grey
+     scale"): --color-text is what headings and high-emphasis UI reach for
+     (Paper), --color-text-muted is body/secondary copy (Fog). */
+  --color-text: var(--color-paper);
+  --color-text-muted: var(--color-fog);
+  /* Always dark — this is specifically "text sitting on the acid-lime CTA",
+     per DESIGN.md's Primary Action Button spec (#08090a text on #e4f222),
+     not "the opposite of the page background". The two happen to be the
+     same value in dark mode (both near-black) but must NOT derive from
+     --color-void, which flips to near-white in light mode while the lime
+     button still needs dark text on top of it either way. */
+  --color-text-inverse: #08090a;
+
+  --color-accent: var(--color-acid-lime);
+  --color-accent-soft: rgba(196, 209, 20, 0.14);
+  /* Text-safe variant of --color-accent, and the readable text color for
+     content sitting ON a --color-accent background (.btn-primary) — see
+     lib/color.js's accentForegroundOn/readableTextOn, which compute and
+     override both at runtime from the actual chosen hex (useAccentColor.js).
+     These two static fallbacks only apply before that JS ever runs (first
+     paint) or if it's ever unmounted; darkened-lime text + near-black
+     button text is the correct default-lime-on-light-surface pairing. */
+  --color-accent-fg: #6b7309;
+  --color-accent-btn-text: var(--color-text-inverse);
+  --color-warn: #a8672c;
+  --color-warn-soft: rgba(168, 103, 44, 0.12);
+  --color-success: var(--color-pulse-green);
+  --color-success-soft: rgba(26, 140, 59, 0.12);
+  --color-danger: var(--color-coral-red);
+  --color-danger-soft: rgba(214, 69, 69, 0.12);
+
+  /* Shop mode's own accent (see the [data-shop-mode] block below) —
+     Signal Teal instead of another warm/bright hue, so it still reads as
+     "a different mode" without competing with the one real CTA color. */
+  --color-shop-accent: var(--color-signal-teal);
+  --color-shop-accent-soft: rgba(5, 146, 163, 0.12);
+  /* Static first-paint fallback, same reasoning as --color-accent-fg above —
+     useShopAccentColor.js overrides both immediately on mount. */
+  --color-shop-accent-fg: var(--color-signal-teal);
+  --color-shop-accent-btn-text: #ffffff;
+
+  /* Linear's elevation is hairline borders + a subtle shadow, not the
+     shadow+inset-highlight stack the old luxury theme used. Lighter shadow
+     opacity than dark mode's — a black shadow at dark-mode strength reads
+     as heavy/muddy on a white canvas. */
+  --shadow-card: 0 0 0 1px var(--color-graphite) inset, 0 1px 3px rgba(20, 21, 26, 0.06);
+  --shadow-elevated: 0 12px 32px rgba(20, 21, 26, 0.12);
+
+  color-scheme: light;
+
+  /* Legacy aliases — ~50 existing call sites still read these instead of
+     --color-*; keep them pointed at the same values rather than touching
+     every call site. */
+  --bg-light: var(--color-bg);
+  --bg-lighter: var(--color-surface);
+  --accent-blue: var(--color-accent);
+  --accent-orange: var(--color-warn);
+  --accent-green: var(--color-success);
+  --accent-red: var(--color-danger);
+  --text-main: var(--color-text);
+  --text-muted: var(--color-text-muted);
+  --border-light: var(--color-border);
+
+  /* One typeface for everything — Linear doesn't use a serif/display face
+     at all. --font-heading kept as a distinct token (rather than deleting
+     it and touching ~40 call sites) but resolves to the same Inter stack;
+     --font-mono is for order numbers / IDs / technical metadata (DESIGN.md's
+     Berkeley Mono role — substituted with JetBrains Mono, the documented
+     fallback, since Berkeley Mono is a paid font). */
+  --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --color-void: #08090a;
+    --color-carbon: #0f1011;
+    --color-obsidian: #161718;
+    --color-graphite: #23252a;
+    --color-smoke: #383b3f;
+    --color-ash: #62666d;
+    --color-fog: #8a8f98;
+    --color-mist: #d0d6e0;
+    --color-bone: #e5e5e6;
+    --color-paper: #ffffff;
+    --color-pulse-green: #27a644;
+    --color-coral-red: #eb5757;
+    --color-signal-teal: #02b8cc;
+    --color-iris-violet: #6366f1;
+    --color-lavender: #8b5cf6;
+
+    --color-accent-soft: rgba(228, 242, 34, 0.12);
+    /* Acid-lime reads fine as text directly on near-black — no darkening
+       needed here, unlike the light-theme default above. */
+    --color-accent-fg: var(--color-acid-lime);
+    --color-warn: #c98a3f;
+    --color-warn-soft: rgba(201, 138, 63, 0.14);
+    --color-success-soft: rgba(39, 166, 68, 0.14);
+    --color-danger-soft: rgba(235, 87, 87, 0.14);
+    --color-shop-accent-soft: rgba(2, 184, 204, 0.14);
+    --color-shop-accent-fg: var(--color-signal-teal);
+    --color-shop-accent-btn-text: #08090a;
+
+    --shadow-card: 0 0 0 1px var(--color-graphite) inset, 0 2px 4px rgba(0, 0, 0, 0.4);
+    --shadow-elevated: 0 4px 32px rgba(0, 0, 0, 0.6);
+
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme='dark'] {
+  --color-void: #08090a;
+  --color-carbon: #0f1011;
+  --color-obsidian: #161718;
+  --color-graphite: #23252a;
+  --color-smoke: #383b3f;
+  --color-ash: #62666d;
+  --color-fog: #8a8f98;
+  --color-mist: #d0d6e0;
+  --color-bone: #e5e5e6;
+  --color-paper: #ffffff;
+  --color-pulse-green: #27a644;
+  --color-coral-red: #eb5757;
+  --color-signal-teal: #02b8cc;
+  --color-iris-violet: #6366f1;
+  --color-lavender: #8b5cf6;
+
+  --color-accent-soft: rgba(228, 242, 34, 0.12);
+  --color-accent-fg: var(--color-acid-lime);
+  --color-warn: #c98a3f;
+  --color-warn-soft: rgba(201, 138, 63, 0.14);
+  --color-success-soft: rgba(39, 166, 68, 0.14);
+  --color-danger-soft: rgba(235, 87, 87, 0.14);
+  --color-shop-accent-soft: rgba(2, 184, 204, 0.14);
+
+  --shadow-card: 0 0 0 1px var(--color-graphite) inset, 0 2px 4px rgba(0, 0, 0, 0.4);
+  --shadow-elevated: 0 4px 32px rgba(0, 0, 0, 0.6);
+
+  color-scheme: dark;
+}
+
+/* Shop mode (Phase 9) — AdminLayout stamps data-shop-mode="true" on its root
+   div when the sidebar toggle is set to "Магазин". Re-pointing --color-accent
+   at the warmer --color-shop-accent here (rather than overriding every
+   button/link individually) is enough: --accent-blue and everything styled
+   through it resolve the swap automatically since custom properties are
+   read at use-time, not at definition-time. Scoped to the div, not :root, so
+   the login/tracking pages outside AdminLayout are never affected. */
+[data-shop-mode='true'] {
+  --color-accent: var(--color-shop-accent);
+  --color-accent-soft: var(--color-shop-accent-soft);
+  --color-accent-fg: var(--color-shop-accent-fg, var(--color-accent-fg));
+  --color-accent-btn-text: var(--color-shop-accent-btn-text, var(--color-accent-btn-text));
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-bg);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  font-feature-settings: 'cv01' on, 'ss03' on, 'zero' on;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: 510;
+  letter-spacing: -0.012em;
+  color: var(--color-text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-weight: 510;
+  border: none;
+  outline: none;
+}
+
+/* Primary Action Button (Acid Lime) — DESIGN.md's one chromatic element.
+   Radius/padding/type match the spec exactly; no glow/lift theatrics on
+   hover, just a brightness nudge, since Linear's own CTA barely moves. */
+.btn-primary {
+  background: var(--color-accent);
+  color: var(--color-accent-btn-text);
+  border-radius: 6px;
+  padding: 10px 16px;
+  font-size: 0.875rem;
+  font-weight: 510;
+  letter-spacing: -0.011em;
+  transition: filter 0.15s ease;
+}
+.btn-primary:hover {
+  filter: brightness(1.08);
+}
+.btn-primary:active {
+  filter: brightness(0.96);
+}
+.btn-primary:disabled,
+.btn-outline:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  filter: none;
+}
+
+/* Ghost / Outline Button — every secondary action. Hover brightens the
+   hairline border and text to Mist, never to the accent color (Linear
+   reserves acid-lime for the one real CTA, not for hover feedback). */
+.btn-outline {
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 9px 15px;
+  font-size: 0.875rem;
+  font-weight: 400;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.btn-outline:hover {
+  border-color: var(--color-smoke);
+  color: var(--color-mist);
+}
+
+.list-row {
+  transition: background-color 0.15s ease;
+}
+.list-row:hover {
+  background: var(--color-surface-sunken);
+}
+
+/* Tabs.jsx — inactive tab gets a hover surface so the row reads as
+   interactive before a click; the active tab's own accent background
+   (set inline, per-tab) already covers that state, so this only ever
+   applies to :not([aria-selected="true"]). */
+.tab-trigger:not([aria-selected='true']):hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-main);
+}
+
+/* StatusPicker.jsx — same not-the-active-row hover as .tab-trigger above. */
+.status-picker-option:not([aria-selected='true']):hover {
+  background: var(--color-surface-sunken);
+}
+
+/* SettingsLayout.jsx — persistent settings nav rail + content pane.
+   Rail is a fixed-width column so it reads as a standing menu (like the
+   app's own Sidebar) rather than a row of buttons; content pane takes the
+   remaining width. Stacks on narrow viewports since the rail's fixed
+   width would otherwise crowd out the content on a phone-sized screen. */
+.settings-shell {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+.settings-rail {
+  flex: 0 0 220px;
+  padding: 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: sticky;
+  top: 20px;
+}
+.settings-rail-group + .settings-rail-group {
+  margin-top: 14px;
+}
+.settings-rail-group-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 4px 10px 6px;
+}
+/* Same active-row idiom as Sidebar.jsx's own nav items (accent-soft fill +
+   inset accent edge) so the settings rail reads as this app's menu
+   language, not a second one invented just for this page. NavLink sets
+   aria-current="page" on the active link (react-router), not a boolean
+   attribute value, so [aria-current] is the correct "is active" selector
+   here — mirrors .settings-tab-pill's :not([aria-current]) convention
+   this rule set replaces. */
+.settings-rail-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 8px;
+  font-family: var(--font-heading);
+  font-weight: 510;
+  font-size: 0.87rem;
+  color: var(--color-text-muted);
+  background: transparent;
+  box-shadow: none;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+.settings-rail-item:not([aria-current]):hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-main);
+}
+.settings-rail-item[aria-current] {
+  color: var(--color-accent-fg);
+  background: var(--color-accent-soft);
+  box-shadow: inset 2px 0 0 var(--color-accent);
+}
+.settings-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+@media (max-width: 860px) {
+  .settings-shell {
+    flex-direction: column;
+  }
+  .settings-rail {
+    flex: 1 1 auto;
+    width: 100%;
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .settings-rail-group {
+    display: contents;
+  }
+  .settings-rail-group-label {
+    display: none;
+  }
+}
+
+input, select, textarea {
+  font-family: var(--font-body);
+}
+input:focus-visible, select:focus-visible, textarea:focus-visible,
+input:focus, select:focus, textarea:focus {
+  border-color: var(--color-mist);
+  box-shadow: none;
+}
+
+/* Card — hairline inset border, no outer drop shadow/glow. */
+.glass-panel {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  box-shadow: none;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Shared entrance animations — Modal (every quick-action dialog in the app),
+   AdminLayout's route-change fade, and NotificationBell's dropdown all key
+   off these instead of each hand-rolling their own, so the "weight" of a
+   panel appearing reads the same everywhere. Compositor-friendly properties
+   only (opacity/transform), per this app's own performance rules. */
+@keyframes overlayIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes panelIn {
+  from { opacity: 0; transform: translateY(16px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes dropdownIn {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes pageIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes bellRing {
+  0%, 100% { transform: rotate(0); }
+  15% { transform: rotate(14deg); }
+  30% { transform: rotate(-12deg); }
+  45% { transform: rotate(8deg); }
+  60% { transform: rotate(-6deg); }
+  75% { transform: rotate(3deg); }
+}
+@keyframes badgePop {
+  0% { transform: scale(0.4); opacity: 0; }
+  60% { transform: scale(1.15); opacity: 1; }
+  100% { transform: scale(1); }
+}
+
+.modal-overlay { animation: overlayIn 0.18s ease-out; }
+.modal-panel { animation: panelIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
+.dropdown-panel { animation: dropdownIn 0.16s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top right; }
+.page-enter { animation: pageIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
+.bell-ring { animation: bellRing 0.5s ease-in-out; }
+.badge-pop { animation: badgePop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
+
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(22px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes shake {
+  10%, 90% { transform: translateX(-1px); }
+  20%, 80% { transform: translateX(2px); }
+  30%, 50%, 70% { transform: translateX(-4px); }
+  40%, 60% { transform: translateX(4px); }
+}
+.card-in { animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
+.shake-once { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
+
+/* Status dot on OrdersListPage's summary bar — a slow ambient pulse (not a
+   one-shot like badge-pop above) since it's marking "this status has live
+   items right now", not a transient event. */
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+  50% { opacity: 0.55; box-shadow: 0 0 0 3px transparent; }
+}
+.status-dot-pulse { animation: statusPulse 1.8s ease-in-out infinite; }
+
+/* prefers-reduced-motion — every animation/transition above and elsewhere
+   in this stylesheet collapses to effectively instant, rather than being
+   individually disabled call-site by call-site. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* PcConfiguratorPage's "Распечатать конфигурацию" — .pc-config-print-area
+   is a screen-hidden summary block rendered alongside the interactive
+   picker; on print, everything else in the app shell (sidebar, topbar, the
+   picker's own selects/buttons) is hidden and only that block is shown,
+   pulled to the page origin since its siblings still reserve their normal
+   layout space while hidden. */
+.pc-config-print-area { display: none; }
+@media print {
+  body.pc-config-printing * { visibility: hidden; }
+  body.pc-config-printing .pc-config-print-area,
+  body.pc-config-printing .pc-config-print-area * { visibility: visible; }
+  body.pc-config-printing .pc-config-print-area {
+    display: block;
+    position: absolute; top: 0; left: 0; width: 100%;
+    color: #111; background: #fff;
+  }
+}
diff --git a/production/web/src/inventory/CategoryTree.jsx b/production/web/src/inventory/CategoryTree.jsx
new file mode 100644
index 0000000..661ac1c
--- /dev/null
+++ b/production/web/src/inventory/CategoryTree.jsx
@@ -0,0 +1,205 @@
+import { useState } from 'react'
+import { Plus, Pencil, Trash2, Check, X, FolderTree } from 'lucide-react'
+
+const smallInputStyle = {
+  padding: '5px 8px', border: '1.5px solid var(--color-border)', borderRadius: '6px',
+  fontSize: '0.82rem', fontFamily: 'var(--font-body)', outline: 'none', boxSizing: 'border-box',
+  background: 'var(--color-surface)', color: 'var(--color-text)', width: '100%',
+}
+
+const iconBtnStyle = {
+  display: 'flex', alignItems: 'center', justifyContent: 'center', width: '22px', height: '22px',
+  borderRadius: '5px', color: 'var(--text-muted)', flexShrink: 0,
+}
+
+// Inline text field used for both "add subcategory" and "rename" — same
+// commit-on-Enter/blur, cancel-on-Escape shape as CommonFaultsPicker's
+// inline add form, just parameterized over what happens on commit.
+function InlineField({ initial, onCommit, onCancel, placeholder }) {
+  const [value, setValue] = useState(initial)
+  const commit = () => {
+    const trimmed = value.trim()
+    if (trimmed) onCommit(trimmed)
+    else onCancel()
+  }
+  return (
+    <div style={{ display: 'flex', gap: '4px', alignItems: 'center', flex: 1 }} onClick={(e) => e.stopPropagation()}>
+      <input
+        autoFocus
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commit()
+          if (e.key === 'Escape') onCancel()
+        }}
+        style={smallInputStyle}
+      />
+      <button type="button" onClick={commit} style={{ ...iconBtnStyle, color: 'var(--color-success, #16a34a)' }}><Check size={14} /></button>
+      <button type="button" onClick={onCancel} style={{ ...iconBtnStyle, color: 'var(--accent-red)' }}><X size={14} /></button>
+    </div>
+  )
+}
+
+function CategoryRow({ node, depth, selectedId, onSelect, onAdd, onRename, onDelete, mode }) {
+  const [editing, setEditing] = useState(false)
+  const [adding, setAdding] = useState(false)
+  const [hovered, setHovered] = useState(false)
+  const isSelected = selectedId === node.id
+
+  return (
+    <div>
+      <div
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 8px', paddingLeft: `${8 + depth * 16}px`,
+          borderRadius: '7px', cursor: editing ? 'default' : 'pointer',
+          background: isSelected ? 'var(--color-accent-soft)' : hovered ? 'var(--color-surface-sunken)' : 'transparent',
+        }}
+        onClick={() => !editing && onSelect(node.id)}
+      >
+        {editing ? (
+          <InlineField
+            initial={node.name}
+            placeholder="Название"
+            onCommit={(name) => { onRename(node.id, name, node.parent_id); setEditing(false) }}
+            onCancel={() => setEditing(false)}
+          />
+        ) : (
+          <>
+            <span
+              style={{
+                flex: 1, fontSize: '0.86rem', color: isSelected ? 'var(--color-accent-fg)' : 'var(--color-text)',
+                fontWeight: isSelected ? 560 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+              }}
+            >
+              {node.name}
+            </span>
+            {hovered && (
+              <div style={{ display: 'flex', gap: '2px' }}>
+                {depth === 0 && (
+                  <button type="button" title="Добавить подкатегорию" onClick={(e) => { e.stopPropagation(); setAdding(true) }} style={iconBtnStyle}>
+                    <Plus size={13} />
+                  </button>
+                )}
+                <button type="button" title="Переименовать" onClick={(e) => { e.stopPropagation(); setEditing(true) }} style={iconBtnStyle}>
+                  <Pencil size={12} />
+                </button>
+                <button
+                  type="button"
+                  title="Удалить"
+                  onClick={(e) => { e.stopPropagation(); onDelete(node.id, node.name) }}
+                  style={{ ...iconBtnStyle, color: 'var(--accent-red)' }}
+                >
+                  <Trash2 size={12} />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {adding && (
+        <div style={{ padding: '4px 8px', paddingLeft: `${8 + (depth + 1) * 16}px` }}>
+          <InlineField
+            initial=""
+            placeholder="Новая подкатегория"
+            onCommit={(name) => { onAdd(name, node.id); setAdding(false) }}
+            onCancel={() => setAdding(false)}
+          />
+        </div>
+      )}
+
+      {node.children?.map((child) => (
+        <CategoryRow
+          key={child.id}
+          node={child}
+          depth={depth + 1}
+          selectedId={selectedId}
+          onSelect={onSelect}
+          onAdd={onAdd}
+          onRename={onRename}
+          onDelete={onDelete}
+          mode={mode}
+        />
+      ))}
+    </div>
+  )
+}
+
+// Left-rail category browser shared shape for Склад (PartsPage) and Витрина
+// (SalesPage) — click a node to filter, hover to reveal rename/delete, "+"
+// on a root node adds a subcategory, the bottom button adds a new root
+// category. Structural changes (rename/delete) go through the caller's
+// usePartCategories mutations, which already reload the flat list backing
+// both this tree and any other place category names are shown.
+function CategoryTree({ tree, selectedId, onSelect, onAdd, onRename, onDelete, allLabel = 'Все категории' }) {
+  const [addingRoot, setAddingRoot] = useState(false)
+
+  const handleDelete = async (id, name) => {
+    if (!window.confirm(`Удалить категорию «${name}»?`)) return
+    try {
+      await onDelete(id)
+      if (selectedId === id) onSelect('')
+    } catch (err) {
+      window.alert(err.message)
+    }
+  }
+
+  return (
+    <div className="glass-panel" style={{ padding: '10px', width: '230px', flexShrink: 0, alignSelf: 'flex-start' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 8px 10px', color: 'var(--text-muted)' }}>
+        <FolderTree size={14} />
+        <span style={{ fontSize: '0.76rem', fontWeight: 590, textTransform: 'uppercase', letterSpacing: '0.03em' }}>Каталог</span>
+      </div>
+
+      <div
+        onClick={() => onSelect('')}
+        style={{
+          padding: '6px 8px', borderRadius: '7px', cursor: 'pointer', fontSize: '0.86rem', marginBottom: '4px',
+          background: selectedId === '' ? 'var(--color-accent-soft)' : 'transparent',
+          color: selectedId === '' ? 'var(--color-accent-fg)' : 'var(--color-text)',
+          fontWeight: selectedId === '' ? 560 : 400,
+        }}
+      >
+        {allLabel}
+      </div>
+
+      {tree.map((node) => (
+        <CategoryRow
+          key={node.id}
+          node={node}
+          depth={0}
+          selectedId={selectedId}
+          onSelect={onSelect}
+          onAdd={onAdd}
+          onRename={onRename}
+          onDelete={handleDelete}
+        />
+      ))}
+
+      {addingRoot ? (
+        <div style={{ padding: '4px 8px' }}>
+          <InlineField
+            initial=""
+            placeholder="Новая категория"
+            onCommit={(name) => { onAdd(name, null); setAddingRoot(false) }}
+            onCancel={() => setAddingRoot(false)}
+          />
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setAddingRoot(true)}
+          className="btn-outline"
+          style={{ marginTop: '8px', width: '100%', padding: '7px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px' }}
+        >
+          <Plus size={13} /> Категория
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default CategoryTree
diff --git a/production/web/src/inventory/ImportCsvModal.jsx b/production/web/src/inventory/ImportCsvModal.jsx
new file mode 100644
index 0000000..da7e494
--- /dev/null
+++ b/production/web/src/inventory/ImportCsvModal.jsx
@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { X, Upload } from 'lucide-react'
+import * as api from '../lib/api'
+import { labelStyle } from '../orders/formStyles'
+
+// Bulk-create parts from a supplier CSV price list — see
+// internal/inventory.ImportCSV's own doc comment for the "creates only,
+// never overwrites an existing sku" contract. No preview step: the import
+// is safe to re-run (idempotent on sku), so a mis-mapped column just shows
+// up as "0 создано" in the result instead of needing a dry-run first.
+function ImportCsvModal({ onClose, onImported }) {
+  const [file, setFile] = useState(null)
+  const [importing, setImporting] = useState(false)
+  const [result, setResult] = useState(null)
+  const [error, setError] = useState('')
+
+  const handleImport = async () => {
+    if (!file) return
+    setImporting(true)
+    setError('')
+    try {
+      const res = await api.parts.importCsv(file)
+      setResult(res)
+      if (res.created > 0) onImported()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <div onClick={(e) => e.stopPropagation()} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '440px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Импорт прайса CSV</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
+          Колонки: <code>артикул</code> / <code>sku</code> и <code>название</code> / <code>name</code> обязательны;{' '}
+          <code>категория</code> и <code>цена</code> — по желанию. Существующие артикулы пропускаются, файл можно
+          загружать повторно. Количество на складе через импорт не проставляется — заведённые позиции оприходуйте
+          обычным «Приходом».
+        </p>
+        <div>
+          <label style={labelStyle}>Файл CSV</label>
+          <input type="file" accept=".csv,text/csv" onChange={(e) => { setFile(e.target.files?.[0] || null); setResult(null) }} />
+        </div>
+        {result && (
+          <p style={{ fontSize: '0.85rem' }}>
+            Создано: <strong>{result.created}</strong>{result.skipped_existing > 0 && `, пропущено (уже есть): ${result.skipped_existing}`}
+            {result.skipped_invalid > 0 && `, пропущено (некорректных строк): ${result.skipped_invalid}`}
+          </p>
+        )}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="button" onClick={handleImport} disabled={!file || importing} className="btn-primary" style={{ padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}>
+          <Upload size={15} /> {importing ? 'Загружаем...' : 'Импортировать'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default ImportCsvModal
diff --git a/production/web/src/inventory/PartModal.jsx b/production/web/src/inventory/PartModal.jsx
new file mode 100644
index 0000000..14ff118
--- /dev/null
+++ b/production/web/src/inventory/PartModal.jsx
@@ -0,0 +1,601 @@
+import { useState, useEffect } from 'react'
+import { X, Plus } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useSuppliers } from '../suppliers/useSuppliers'
+import { usePartCategories, flattenTree } from './usePartCategories'
+import { PC_TYPE_LABELS, PC_ALL_TYPES, PC_SPEC_FIELDS_BY_TYPE, specToFormValues, formValuesToSpec } from '../pcbuilder/specFields'
+
+function PcComponentFields({ componentType, onComponentTypeChange, specValues, onSpecChange }) {
+  const fields = PC_SPEC_FIELDS_BY_TYPE[componentType] || []
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', padding: '12px', border: '1px dashed var(--border-light)', borderRadius: '10px' }}>
+      <div>
+        <label style={labelStyle}>Компонент ПК (для конструктора)</label>
+        <select value={componentType} onChange={(e) => onComponentTypeChange(e.target.value)} style={inputStyle}>
+          <option value="">— не компонент ПК —</option>
+          {PC_ALL_TYPES.map((t) => <option key={t} value={t}>{PC_TYPE_LABELS[t]}</option>)}
+        </select>
+      </div>
+      {componentType && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '10px' }}>
+          {fields.map((f) => (
+            <div key={f.key}>
+              <label style={labelStyle}>{f.label}</label>
+              <input
+                type={f.number ? 'number' : 'text'}
+                value={specValues[f.key] ?? ''}
+                placeholder={f.placeholder}
+                onChange={(e) => onSpecChange(f.key, e.target.value)}
+                style={inputStyle}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '640px',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+}
+
+function CreateForm({ onClose, onSaved }) {
+  const [form, setForm] = useState({
+    sku: '', name: '', unit: 'pcs', is_serialized: false, min_stock: 0, is_retail: false, sale_price: '',
+    barcode: '', location: '', condition: 'new',
+  })
+  const [categoryId, setCategoryId] = useState('')
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [newCategoryParentId, setNewCategoryParentId] = useState('')
+  const [addingCategory, setAddingCategory] = useState(false)
+  const { tree, addCategory } = usePartCategories()
+  const flatCategories = flattenTree(tree)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [pcComponentType, setPcComponentType] = useState('')
+  const [pcSpecValues, setPcSpecValues] = useState({})
+  const [locations, setLocations] = useState([])
+  useEffect(() => { api.parts.locations().then(setLocations).catch(() => {}) }, [])
+
+  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }))
+
+  const handleSelectCategory = (e) => {
+    const id = e.target.value
+    if (id === '__add__') { setAddingCategory(true); return }
+    setCategoryId(id)
+  }
+  const handleAddCategory = async () => {
+    if (!newCategoryName.trim()) return
+    try {
+      const cat = await addCategory(newCategoryName.trim(), newCategoryParentId)
+      setCategoryId(cat.id)
+      setNewCategoryName('')
+      setNewCategoryParentId('')
+      setAddingCategory(false)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.sku || !form.name) { setError('Заполните артикул и название'); return }
+    if (form.is_retail && !form.sale_price) { setError('Укажите цену продажи для товара на витрину'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.parts.create({
+        ...form,
+        category_id: categoryId || undefined,
+        min_stock: Number(form.min_stock) || 0,
+        sale_price: form.sale_price || undefined,
+        pc_component_type: form.is_retail ? (pcComponentType || undefined) : undefined,
+        pc_spec: form.is_retail && pcComponentType ? formValuesToSpec(pcComponentType, pcSpecValues) : undefined,
+      })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Новая запчасть</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Артикул (SKU) *</label>
+          <input value={form.sku} onChange={set('sku')} style={inputStyle} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Единица</label>
+          <input value={form.unit} onChange={set('unit')} placeholder="pcs" style={inputStyle} />
+        </div>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Название *</label>
+        <input value={form.name} onChange={set('name')} style={inputStyle} required />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Категория</label>
+          {addingCategory ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+              <input value={newCategoryName} onChange={(e) => setNewCategoryName(e.target.value)} placeholder="Новая категория" style={inputStyle} autoFocus />
+              <select value={newCategoryParentId} onChange={(e) => setNewCategoryParentId(e.target.value)} style={inputStyle}>
+                <option value="">— верхний уровень —</option>
+                {flatCategories.filter((c) => c.depth === 0).map((c) => <option key={c.id} value={c.id}>Подкатегория: {c.name}</option>)}
+              </select>
+              <div style={{ display: 'flex', gap: '6px' }}>
+                <button type="button" onClick={handleAddCategory} className="btn-outline" style={{ padding: '6px 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>Ок</button>
+                <button type="button" onClick={() => { setAddingCategory(false); setNewCategoryName(''); setNewCategoryParentId('') }} style={{ background: 'none', color: 'var(--color-text-muted)', padding: '0 4px' }}>✕</button>
+              </div>
+            </div>
+          ) : (
+            <select value={categoryId} onChange={handleSelectCategory} style={inputStyle}>
+              <option value="">— без категории —</option>
+              {flatCategories.map((c) => <option key={c.id} value={c.id}>{' '.repeat(c.depth)}{c.depth > 0 ? '— ' : ''}{c.name}</option>)}
+              <option value="__add__">+ Добавить категорию...</option>
+            </select>
+          )}
+        </div>
+        <div>
+          <label style={labelStyle}>Мин. остаток</label>
+          <input type="number" min="0" value={form.min_stock} onChange={set('min_stock')} style={inputStyle} />
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Штрихкод</label>
+          <input value={form.barcode} onChange={set('barcode')} placeholder="Сканируйте или введите" style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Место хранения</label>
+          <input list="location-options" value={form.location} onChange={set('location')} placeholder="стеллаж 2, полка 3" style={inputStyle} />
+          <datalist id="location-options">
+            {locations.map((l) => <option key={l} value={l} />)}
+          </datalist>
+        </div>
+        <div>
+          <label style={labelStyle}>Состояние</label>
+          <select value={form.condition} onChange={set('condition')} style={inputStyle}>
+            <option value="new">Новая</option>
+            <option value="used">Б/У</option>
+            <option value="refurbished">Восстановленная</option>
+          </select>
+        </div>
+      </div>
+
+      <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+        <input type="checkbox" checked={form.is_serialized} onChange={(e) => setForm((f) => ({ ...f, is_serialized: e.target.checked }))} />
+        Серийный учёт (экраны, аккумуляторы — списывается по конкретному серийнику, не по количеству)
+      </label>
+
+      <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+        <input type="checkbox" checked={form.is_retail} onChange={(e) => setForm((f) => ({ ...f, is_retail: e.target.checked }))} />
+        Товар для витрины (появится во вкладке «Продажи»)
+      </label>
+
+      {form.is_retail && (
+        <div>
+          <label style={labelStyle}>Цена продажи, ₽ *</label>
+          <input type="number" value={form.sale_price} onChange={set('sale_price')} style={inputStyle} />
+        </div>
+      )}
+
+      {form.is_retail && (
+        <PcComponentFields
+          componentType={pcComponentType}
+          onComponentTypeChange={(t) => { setPcComponentType(t); setPcSpecValues({}) }}
+          specValues={pcSpecValues}
+          onSpecChange={(key, value) => setPcSpecValues((v) => ({ ...v, [key]: value }))}
+        />
+      )}
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px', opacity: saving ? 0.7 : 1 }}>
+        {saving ? 'Создаём...' : 'Создать запчасть'}
+      </button>
+    </form>
+  )
+}
+
+function ReceiveForm({ part, onDone }) {
+  const [form, setForm] = useState({ batch_no: '', purchase_price: '', qty: 1, note: '', supplier_id: '' })
+  const [serials, setSerials] = useState([''])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { suppliers } = useSuppliers('')
+
+  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }))
+
+  const handleQtyChange = (e) => {
+    const qty = Math.max(1, Number(e.target.value) || 1)
+    setForm((f) => ({ ...f, qty }))
+    if (part.is_serialized) {
+      setSerials((prev) => {
+        const next = prev.slice(0, qty)
+        while (next.length < qty) next.push('')
+        return next
+      })
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.parts.receive(part.id, {
+        batch_no: form.batch_no,
+        purchase_price: form.purchase_price,
+        qty: Number(form.qty),
+        note: form.note,
+        supplier_id: form.supplier_id,
+        serial_numbers: part.is_serialized ? serials : undefined,
+      })
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Кол-во *</label>
+          <input type="number" min="1" value={form.qty} onChange={handleQtyChange} style={inputStyle} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Себестоимость за ед., ₽ *</label>
+          <input value={form.purchase_price} onChange={set('purchase_price')} placeholder="0.00" style={inputStyle} required />
+        </div>
+        <div>
+          <label style={labelStyle}>№ партии поставщика</label>
+          <input value={form.batch_no} onChange={set('batch_no')} style={inputStyle} />
+        </div>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Заметка</label>
+          <input value={form.note} onChange={set('note')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Поставщик</label>
+          <select value={form.supplier_id} onChange={set('supplier_id')} style={inputStyle}>
+            <option value="">— не указан —</option>
+            {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+      </div>
+
+      {part.is_serialized && (
+        <div>
+          <label style={labelStyle}>Серийные номера ({serials.length})</label>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', maxHeight: '160px', overflowY: 'auto' }}>
+            {serials.map((sn, i) => (
+              <input
+                key={i}
+                value={sn}
+                onChange={(e) => setSerials((prev) => prev.map((v, idx) => (idx === i ? e.target.value : v)))}
+                placeholder={`Серийный №${i + 1}`}
+                style={inputStyle}
+                required
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px', fontSize: '0.85rem' }}>
+        {saving ? 'Приходуем...' : 'Оприходовать'}
+      </button>
+    </form>
+  )
+}
+
+function AdjustForm({ part, batches, onDone }) {
+  const [form, setForm] = useState({ batch_id: batches[0]?.id || '', delta: '', note: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.parts.adjust(part.id, { batch_id: form.batch_id, delta: Number(form.delta), note: form.note })
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (batches.length === 0) return <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Сначала оприходуйте партию.</p>
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Партия</label>
+          <select value={form.batch_id} onChange={(e) => setForm((f) => ({ ...f, batch_id: e.target.value }))} style={inputStyle}>
+            {batches.map((b) => (
+              <option key={b.id} value={b.id}>{b.batch_no || b.id.slice(0, 8)} — остаток {b.qty_remaining}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>Δ (+/-)</label>
+          <input type="number" value={form.delta} onChange={(e) => setForm((f) => ({ ...f, delta: e.target.value }))} style={inputStyle} required />
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Причина *</label>
+        <input value={form.note} onChange={(e) => setForm((f) => ({ ...f, note: e.target.value }))} placeholder="пересчёт склада, брак..." style={inputStyle} required />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-outline" style={{ padding: '10px', fontSize: '0.85rem' }}>
+        {saving ? 'Сохраняем...' : 'Скорректировать'}
+      </button>
+    </form>
+  )
+}
+
+function PartSettingsForm({ part, onDone }) {
+  const [minStock, setMinStock] = useState(part.min_stock)
+  const [supplierId, setSupplierId] = useState(part.default_supplier_id || '')
+  const [categoryId, setCategoryId] = useState(part.category_id || '')
+  const [isRetail, setIsRetail] = useState(part.is_retail)
+  const [salePrice, setSalePrice] = useState(part.sale_price || '')
+  const [pinnedForSale, setPinnedForSale] = useState(part.pinned_for_sale)
+  const [pcComponentType, setPcComponentType] = useState(part.pc_component_type || '')
+  const [pcSpecValues, setPcSpecValues] = useState(() => specToFormValues(part.pc_spec))
+  const [barcode, setBarcode] = useState(part.barcode || '')
+  const [location, setLocation] = useState(part.location || '')
+  const [condition, setCondition] = useState(part.condition || 'new')
+  const [generatingBarcode, setGeneratingBarcode] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const { suppliers } = useSuppliers('')
+  const { tree } = usePartCategories()
+  const flatCategories = flattenTree(tree)
+  const [locations, setLocations] = useState([])
+  useEffect(() => { api.parts.locations().then(setLocations).catch(() => {}) }, [])
+
+  const handleGenerateBarcode = async () => {
+    setGeneratingBarcode(true)
+    try {
+      const res = await api.parts.generateBarcode(part.id)
+      setBarcode(res.barcode)
+    } finally {
+      setGeneratingBarcode(false)
+    }
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await api.parts.update(part.id, {
+        min_stock: Number(minStock) || 0, default_supplier_id: supplierId, category_id: categoryId,
+        is_retail: isRetail, sale_price: isRetail ? salePrice : '',
+        pinned_for_sale: isRetail && pinnedForSale,
+        pc_component_type: isRetail ? (pcComponentType || '') : '',
+        pc_spec: isRetail && pcComponentType ? formValuesToSpec(pcComponentType, pcSpecValues) : {},
+        barcode, location, condition,
+      })
+      onDone()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+      <div>
+        <label style={labelStyle}>Категория</label>
+        <select value={categoryId} onChange={(e) => setCategoryId(e.target.value)} style={{ ...inputStyle, width: '160px' }}>
+          <option value="">— без категории —</option>
+          {flatCategories.map((c) => <option key={c.id} value={c.id}>{c.depth > 0 ? '— ' : ''}{c.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Мин. остаток</label>
+        <input type="number" min="0" value={minStock} onChange={(e) => setMinStock(e.target.value)} style={{ ...inputStyle, width: '100px' }} />
+      </div>
+      <div>
+        <label style={labelStyle}>Поставщик по умолчанию</label>
+        <select value={supplierId} onChange={(e) => setSupplierId(e.target.value)} style={{ ...inputStyle, width: '200px' }}>
+          <option value="">— не указан —</option>
+          {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Штрихкод</label>
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <input value={barcode} onChange={(e) => setBarcode(e.target.value)} placeholder="Нет" style={{ ...inputStyle, width: '130px' }} />
+          {!barcode && (
+            <button type="button" onClick={handleGenerateBarcode} disabled={generatingBarcode} className="btn-outline" style={{ padding: '0 10px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>
+              {generatingBarcode ? '...' : 'Создать'}
+            </button>
+          )}
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Место хранения</label>
+        <input list="location-options-edit" value={location} onChange={(e) => setLocation(e.target.value)} placeholder="стеллаж 2, полка 3" style={{ ...inputStyle, width: '160px' }} />
+        <datalist id="location-options-edit">
+          {locations.map((l) => <option key={l} value={l} />)}
+        </datalist>
+      </div>
+      <div>
+        <label style={labelStyle}>Состояние</label>
+        <select value={condition} onChange={(e) => setCondition(e.target.value)} style={{ ...inputStyle, width: '140px' }}>
+          <option value="new">Новая</option>
+          <option value="used">Б/У</option>
+          <option value="refurbished">Восстановленная</option>
+        </select>
+      </div>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', paddingBottom: '10px' }}>
+        <input type="checkbox" checked={isRetail} onChange={(e) => setIsRetail(e.target.checked)} />
+        На витрину
+      </label>
+      {isRetail && (
+        <div>
+          <label style={labelStyle}>Цена продажи, ₽</label>
+          <input type="number" value={salePrice} onChange={(e) => setSalePrice(e.target.value)} style={{ ...inputStyle, width: '120px' }} />
+        </div>
+      )}
+      {isRetail && (
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', paddingBottom: '10px' }}>
+          <input type="checkbox" checked={pinnedForSale} onChange={(e) => setPinnedForSale(e.target.checked)} />
+          Быстрая продажа
+        </label>
+      )}
+      <button type="button" onClick={handleSave} disabled={saving} className="btn-outline" style={{ padding: '10px 14px', fontSize: '0.82rem' }}>
+        {saving ? 'Сохраняем...' : 'Сохранить'}
+      </button>
+    </div>
+    {isRetail && (
+      <PcComponentFields
+        componentType={pcComponentType}
+        onComponentTypeChange={(t) => { setPcComponentType(t); setPcSpecValues({}) }}
+        specValues={pcSpecValues}
+        onSpecChange={(key, value) => setPcSpecValues((v) => ({ ...v, [key]: value }))}
+      />
+    )}
+    </div>
+  )
+}
+
+const MOVEMENT_LABELS = {
+  receipt: 'Приход', consumption: 'Списание', adjustment: 'Корректировка', reversal: 'Возврат',
+  sale: 'Продажа', reservation: 'Резерв (по заявке)', release: 'Снятие резерва',
+}
+
+function DetailView({ partId, onClose, onChanged }) {
+  const [data, setData] = useState(null)
+  const [tab, setTab] = useState('receive')
+
+  const load = async () => setData(await api.parts.get(partId))
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [partId])
+
+  const handleDone = async () => {
+    await load()
+    onChanged()
+  }
+
+  if (!data) return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+
+  const { part, batches, movements } = data
+
+  return (
+    <div>
+      <div style={{ padding: '24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>{part.name}</h2>
+            <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px' }}>
+              {part.sku} · {part.category || 'без категории'} · {part.is_serialized ? 'серийный учёт' : `по количеству (${part.unit})`}
+            </p>
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <div style={{ display: 'flex', gap: '16px', marginTop: '12px' }}>
+          <span style={{ fontSize: '1.4rem', fontWeight: 590 }}>{part.qty_on_hand}</span>
+          <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', alignSelf: 'flex-end', paddingBottom: '4px' }}>
+            в наличии, мин. {part.min_stock}
+          </span>
+          {part.low_stock && (
+            <span style={{ alignSelf: 'flex-end', marginBottom: '2px', fontSize: '0.72rem', background: 'var(--color-danger-soft)', color: 'var(--accent-red)', padding: '2px 8px', borderRadius: '50px' }}>
+              мало на складе
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-light)' }}>
+        <PartSettingsForm part={part} onDone={handleDone} />
+      </div>
+
+      <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
+          <button type="button" onClick={() => setTab('receive')} className={tab === 'receive' ? 'btn-primary' : 'btn-outline'} style={{ padding: '7px 14px', fontSize: '0.8rem' }}>
+            <Plus size={13} style={{ verticalAlign: 'middle', marginRight: '4px' }} />Приход
+          </button>
+          <button type="button" onClick={() => setTab('adjust')} className={tab === 'adjust' ? 'btn-primary' : 'btn-outline'} style={{ padding: '7px 14px', fontSize: '0.8rem' }}>
+            Корректировка
+          </button>
+        </div>
+        {tab === 'receive' ? <ReceiveForm part={part} onDone={handleDone} /> : <AdjustForm part={part} batches={batches} onDone={handleDone} />}
+      </div>
+
+      <div style={{ padding: '20px 24px' }}>
+        <h3 style={{ fontSize: '0.9rem', marginBottom: '8px' }}>Партии</h3>
+        {batches.length === 0 && <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>Пока не приходовали</p>}
+        {batches.map((b) => (
+          <div key={b.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.82rem', padding: '6px 0', borderBottom: '1px solid var(--border-light)' }}>
+            <span>
+              {b.batch_no || b.id.slice(0, 8)} · {b.purchase_price} ₽/ед · {new Date(b.received_at).toLocaleDateString('ru-RU')}
+              {b.supplier_name ? ` · ${b.supplier_name}` : ''}
+            </span>
+            <span style={{ fontWeight: 510 }}>{b.qty_remaining} / {b.qty_received}</span>
+          </div>
+        ))}
+
+        <h3 style={{ fontSize: '0.9rem', margin: '18px 0 8px' }}>Движения</h3>
+        <div style={{ maxHeight: '220px', overflowY: 'auto' }}>
+          {movements.map((m) => (
+            <div key={m.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', padding: '6px 0', borderBottom: '1px solid var(--border-light)' }}>
+              <span>
+                {MOVEMENT_LABELS[m.type] || m.type} · {m.staff_name} · {new Date(m.created_at).toLocaleString('ru-RU')}
+                {m.note ? ` — ${m.note}` : ''}
+              </span>
+              <span style={{ fontWeight: 510, color: m.qty < 0 ? 'var(--accent-red)' : 'inherit' }}>{m.qty > 0 ? `+${m.qty}` : m.qty}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PartModal = ({ mode, partId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <CreateForm onClose={onClose} onSaved={onSaved} />
+          : <DetailView partId={partId} onClose={onClose} onChanged={onSaved} />}
+      </div>
+    </div>
+  )
+}
+
+export default PartModal
diff --git a/production/web/src/inventory/PartsPage.jsx b/production/web/src/inventory/PartsPage.jsx
new file mode 100644
index 0000000..e76e2f9
--- /dev/null
+++ b/production/web/src/inventory/PartsPage.jsx
@@ -0,0 +1,278 @@
+import { useState, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { Search, Plus, AlertTriangle, ShoppingCart, Check, Barcode as BarcodeIcon, Upload } from 'lucide-react'
+import * as api from '../lib/api'
+import { useParts } from './useParts'
+import { usePartCategories } from './usePartCategories'
+import { useCart } from '../sales/CartContext'
+import PartModal from './PartModal'
+import ScanField from '../ui/ScanField'
+import ImportCsvModal from './ImportCsvModal'
+import CategoryTree from './CategoryTree'
+
+const inputStyle = {
+  padding: '10px 14px', border: '1.5px solid var(--color-border)', borderRadius: '8px',
+  fontSize: '0.9rem', fontFamily: 'var(--font-body)', outline: 'none', boxSizing: 'border-box',
+  background: 'var(--color-surface)', color: 'var(--color-text)',
+}
+
+// Склад = repair parts (is_retail=false), Витрина = showroom stock for sale
+// (is_retail=true, Phase 6's Продажи tab sells from this pool). 'all' shows
+// both, matching what List's is_retail='' does server-side.
+const STOCK_VIEWS = [
+  { value: '', label: 'Всё' },
+  { value: 'false', label: 'Склад' },
+  { value: 'true', label: 'Витрина' },
+]
+
+const CONDITIONS = [
+  { value: '', label: 'Все' },
+  { value: 'new', label: 'Новая' },
+  { value: 'used', label: 'Б/У' },
+  { value: 'refurbished', label: 'Восст.' },
+]
+
+function KpiTile({ label, value, color }) {
+  return (
+    <div className="glass-panel" style={{ padding: '12px 16px', flex: '1 1 120px', minWidth: '110px' }}>
+      <p style={{ fontSize: '1.15rem', fontWeight: 600, color: color || 'var(--text-main)' }}>{value}</p>
+      <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>{label}</p>
+    </div>
+  )
+}
+
+// КПИ-панель — Позиций/Единиц/Критично/Нет в наличии/Деньги в товаре/Без
+// минимума, same at-a-glance strip irepair-ai.ru's Склад page opens with.
+// Server-aggregated (internal/inventory.Summary) across the whole catalog,
+// not counted from the page's own filtered/paginated list.
+function KpiBar() {
+  const [summary, setSummary] = useState(null)
+  useEffect(() => { api.parts.summary().then(setSummary).catch(() => {}) }, [])
+  if (!summary) return null
+  return (
+    <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginBottom: '16px' }}>
+      <KpiTile label="Позиций" value={summary.positions} />
+      <KpiTile label="Единиц" value={summary.units} />
+      <KpiTile label="Критично" value={summary.critical} color={summary.critical > 0 ? 'var(--color-warn, #d97706)' : undefined} />
+      <KpiTile label="Нет в наличии" value={summary.out_of_stock} color={summary.out_of_stock > 0 ? 'var(--accent-red)' : undefined} />
+      <KpiTile label="Деньги в товаре" value={`${Number(summary.money_in_stock).toLocaleString('ru-RU')} ₽`} />
+      <KpiTile label="Без минимума" value={summary.no_minimum} />
+    </div>
+  )
+}
+
+const CONDITION_LABELS = { new: 'Новая', used: 'Б/У', refurbished: 'Восст.' }
+
+const PartsPage = () => {
+  const [searchParams] = useSearchParams()
+  const [query, setQuery] = useState('')
+  const [lowStockOnly, setLowStockOnly] = useState(false)
+  const [categoryId, setCategoryId] = useState('')
+  const [condition, setCondition] = useState('')
+  const [location, setLocation] = useState('')
+  const [locations, setLocations] = useState([])
+  const [scanError, setScanError] = useState('')
+  // "Витрина склада" in the shop-mode sidebar links here with ?view=retail
+  // so it lands pre-filtered — read once at mount, same pattern
+  // useSidebarCompact uses for its localStorage-backed initial state.
+  const [stockView, setStockView] = useState(() => (searchParams.get('view') === 'retail' ? 'true' : ''))
+  const { tree, addCategory, renameCategory, removeCategory } = usePartCategories()
+  const { parts, loading, refetch } = useParts(query, lowStockOnly, categoryId, stockView, { condition, location })
+  const [showCreate, setShowCreate] = useState(false)
+  const [showImport, setShowImport] = useState(false)
+  const [selectedId, setSelectedId] = useState(null)
+  const { addToCart } = useCart()
+  const [justAddedId, setJustAddedId] = useState(null)
+
+  useEffect(() => { api.parts.locations().then(setLocations).catch(() => {}) }, [])
+
+  const handleAddToCart = (e, part) => {
+    e.stopPropagation()
+    addToCart(part)
+    setJustAddedId(part.id)
+    setTimeout(() => setJustAddedId((id) => (id === part.id ? null : id)), 1500)
+  }
+
+  // Scan-to-find: a USB scanner/camera hands back the raw barcode text,
+  // look it up (exact match) and jump straight to that part's card instead
+  // of just dropping the code into the name/sku search box — a barcode
+  // never appears in `name`, so the regular search would just come up
+  // empty.
+  const handleScan = async (code) => {
+    setScanError('')
+    try {
+      const found = await api.parts.list({ barcode: code })
+      if (found?.length) setSelectedId(found[0].id)
+      else setScanError('Штрихкод не найден')
+    } catch (err) {
+      setScanError(err.message)
+    }
+  }
+
+  return (
+    <div>
+      <KpiBar />
+
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
+      <CategoryTree
+        tree={tree}
+        selectedId={categoryId}
+        onSelect={setCategoryId}
+        onAdd={(name, parentId) => addCategory(name, parentId)}
+        onRename={(id, name, parentId) => renameCategory(id, name, parentId)}
+        onDelete={(id) => removeCategory(id)}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
+        <div style={{ position: 'relative', flex: 1, minWidth: '220px', maxWidth: '360px' }}>
+          <Search size={16} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Поиск по артикулу или названию..."
+            style={{ ...inputStyle, width: '100%', paddingLeft: '36px' }}
+          />
+        </div>
+        <div style={{ minWidth: '200px' }}>
+          <ScanField onScan={handleScan} icon={BarcodeIcon} placeholder="Скан штрихкода..." inputStyle={inputStyle} />
+        </div>
+        {locations.length > 0 && (
+          <select value={location} onChange={(e) => setLocation(e.target.value)} style={{ ...inputStyle, minWidth: '160px' }}>
+            <option value="">Все места хранения</option>
+            {locations.map((l) => <option key={l} value={l}>{l}</option>)}
+          </select>
+        )}
+        <div style={{ display: 'flex', border: '1.5px solid var(--border-light)', borderRadius: '8px', overflow: 'hidden' }}>
+          {STOCK_VIEWS.map((v) => (
+            <button
+              key={v.value}
+              type="button"
+              onClick={() => setStockView(v.value)}
+              style={{
+                padding: '9px 14px', fontSize: '0.82rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+                background: stockView === v.value ? 'var(--color-accent)' : 'var(--color-surface)',
+                color: stockView === v.value ? 'var(--color-text-inverse)' : 'var(--color-text)',
+              }}
+            >
+              {v.label}
+            </button>
+          ))}
+        </div>
+        <div style={{ display: 'flex', border: '1.5px solid var(--border-light)', borderRadius: '8px', overflow: 'hidden' }}>
+          {CONDITIONS.map((v) => (
+            <button
+              key={v.value}
+              type="button"
+              onClick={() => setCondition(v.value)}
+              style={{
+                padding: '9px 14px', fontSize: '0.82rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+                background: condition === v.value ? 'var(--color-accent)' : 'var(--color-surface)',
+                color: condition === v.value ? 'var(--color-text-inverse)' : 'var(--color-text)',
+              }}
+            >
+              {v.label}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={() => setLowStockOnly((v) => !v)}
+          className={lowStockOnly ? 'btn-primary' : 'btn-outline'}
+          style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+        >
+          <AlertTriangle size={15} /> Мало на складе
+        </button>
+        <button onClick={() => setShowImport(true)} className="btn-outline" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px', marginLeft: 'auto' }}>
+          <Upload size={15} /> Импорт CSV
+        </button>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Запчасть
+        </button>
+      </div>
+      {scanError && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginBottom: '10px' }}>{scanError}</p>}
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {parts.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Запчасти не найдены</p>}
+          {parts.map((p) => (
+            <div
+              key={p.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => setSelectedId(p.id)}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setSelectedId(p.id) }}
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--color-border)', background: 'var(--color-surface)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left', cursor: 'pointer',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{p.name}</p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {p.sku}{p.category ? ` · ${p.category}` : ''}{p.location ? ` · ${p.location}` : ''}
+                </p>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                {p.condition !== 'new' && (
+                  <span style={{ fontSize: '0.72rem', background: 'var(--color-surface-sunken)', color: 'var(--text-muted)', padding: '2px 8px', borderRadius: '50px' }}>
+                    {CONDITION_LABELS[p.condition] || p.condition}
+                  </span>
+                )}
+                {p.is_retail && (
+                  <span style={{ fontSize: '0.72rem', background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)', padding: '2px 8px', borderRadius: '50px' }}>
+                    витрина{p.sale_price ? ` · ${Number(p.sale_price).toLocaleString('ru-RU')} ₽` : ''}
+                  </span>
+                )}
+                {p.pinned_for_sale && (
+                  <span style={{ fontSize: '0.72rem', background: 'var(--color-shop-accent-soft)', color: 'var(--color-shop-accent-fg)', padding: '2px 8px', borderRadius: '50px' }}>
+                    быстрая
+                  </span>
+                )}
+                {p.low_stock && (
+                  <span style={{ fontSize: '0.72rem', background: 'var(--color-danger-soft)', color: 'var(--color-danger)', padding: '2px 8px', borderRadius: '50px' }}>
+                    мало
+                  </span>
+                )}
+                <span style={{ fontSize: '0.92rem', fontWeight: 590, minWidth: '48px', textAlign: 'right' }}>{p.qty_on_hand}</span>
+                {p.is_retail && p.sale_price && (
+                  <button
+                    type="button"
+                    onClick={(e) => handleAddToCart(e, p)}
+                    disabled={p.qty_on_hand === 0}
+                    title={p.qty_on_hand === 0 ? 'Нет в наличии' : 'В корзину'}
+                    style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '30px', height: '30px', borderRadius: '8px', flexShrink: 0,
+                      background: justAddedId === p.id ? 'var(--color-success-soft)' : 'var(--color-shop-accent-soft)',
+                      color: justAddedId === p.id ? 'var(--color-success)' : 'var(--color-shop-accent-fg)',
+                      opacity: p.qty_on_hand === 0 ? 0.4 : 1,
+                    }}
+                  >
+                    {justAddedId === p.id ? <Check size={14} /> : <ShoppingCart size={14} />}
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <PartModal mode="create" onClose={() => setShowCreate(false)} onSaved={() => { setShowCreate(false); refetch() }} />
+      )}
+      {selectedId && (
+        <PartModal mode="detail" partId={selectedId} onClose={() => setSelectedId(null)} onSaved={refetch} />
+      )}
+      {showImport && (
+        <ImportCsvModal onClose={() => setShowImport(false)} onImported={refetch} />
+      )}
+      </div>
+      </div>
+    </div>
+  )
+}
+
+export default PartsPage
diff --git a/production/web/src/inventory/PartsUsedSection.jsx b/production/web/src/inventory/PartsUsedSection.jsx
new file mode 100644
index 0000000..5cf6a8e
--- /dev/null
+++ b/production/web/src/inventory/PartsUsedSection.jsx
@@ -0,0 +1,284 @@
+import { useState, useEffect, useRef } from 'react'
+import { Undo2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Search-and-consume mini-form. Deliberately not sharing state with the
+// listing below it (PartsUsedSection) — the search-results dropdown is its
+// own transient UI concern, reset on every successful submit via reset().
+function AddPartForm({ onConsume }) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+  const [selected, setSelected] = useState(null)
+  const [qty, setQty] = useState(1)
+  const [serial, setSerial] = useState('')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  // The dropdown is an absolutely-positioned overlay (unlike ClientPicker's
+  // inline results list), so it needs its own dismissal — otherwise clicking
+  // into the qty/note fields below, or anywhere else in the modal, leaves it
+  // floating over subsequent content with stale results.
+  const [dismissed, setDismissed] = useState(false)
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    if (!query || selected) return
+    const id = setTimeout(() => {
+      api.parts.list({ q: query }).then(setResults).catch(() => {})
+    }, 250)
+    return () => clearTimeout(id)
+  }, [query, selected])
+
+  useEffect(() => {
+    const handlePointerDown = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setDismissed(true)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  // Derived rather than cleared via a synchronous setState in the effect
+  // above — query/selected/dismissed changing to the "don't show a dropdown"
+  // state is exactly the kind of thing that should be computed during
+  // render, not synchronized as a side effect.
+  const visibleResults = !query || selected || dismissed ? [] : results
+
+  const handlePick = (part) => {
+    setSelected(part)
+    setQuery(part.name)
+    setResults([])
+  }
+
+  const reset = () => {
+    setSelected(null)
+    setQuery('')
+    setQty(1)
+    setSerial('')
+    setNote('')
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!selected) { setError('Выберите запчасть из списка'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await onConsume({
+        part_id: selected.id,
+        qty: selected.is_serialized ? undefined : Number(qty),
+        serial_numbers: selected.is_serialized ? [serial] : undefined,
+        note,
+      })
+      reset()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div ref={wrapperRef} style={{ position: 'relative' }}>
+        <input
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setSelected(null); setDismissed(false) }}
+          onKeyDown={(e) => { if (e.key === 'Escape') setDismissed(true) }}
+          placeholder="Найти запчасть по названию/артикулу..."
+          style={inputStyle}
+        />
+        {visibleResults.length > 0 && (
+          <div style={{
+            position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--color-surface)',
+            border: '1px solid var(--color-border)', borderRadius: '8px', marginTop: '4px', zIndex: 10,
+            maxHeight: '200px', overflowY: 'auto', boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+          }}>
+            {visibleResults.map((p) => (
+              <button
+                key={p.id} type="button" onClick={() => handlePick(p)}
+                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', background: 'none', fontSize: '0.85rem', fontFamily: 'var(--font-body)' }}
+              >
+                {p.name} <span style={{ color: 'var(--color-text-muted)' }}>· {p.sku} · доступно {p.qty_on_hand}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {selected && (
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+          {selected.is_serialized ? (
+            <div style={{ flex: 1, minWidth: '140px' }}>
+              <label style={labelStyle}>Серийный номер</label>
+              <input value={serial} onChange={(e) => setSerial(e.target.value)} style={inputStyle} required />
+            </div>
+          ) : (
+            <div style={{ width: '90px' }}>
+              <label style={labelStyle}>Кол-во</label>
+              <input type="number" min="1" value={qty} onChange={(e) => setQty(e.target.value)} style={inputStyle} required />
+            </div>
+          )}
+          <div style={{ flex: 1, minWidth: '140px' }}>
+            <label style={labelStyle}>Заметка</label>
+            <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+          </div>
+          <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.82rem', whiteSpace: 'nowrap' }}>
+            {saving ? 'Добавляем...' : 'Добавить'}
+          </button>
+        </div>
+      )}
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem' }}>{error}</p>}
+    </form>
+  )
+}
+
+// Embedded in OrderModal/BatchModal — listFn/consumeFn close over the
+// specific order/cartridge-batch id so this component itself stays ignorant
+// of which parent it's attached to (same shape either way: a stock_movements
+// slice filtered server-side by order_id or cartridge_batch_id). `id` is the
+// order/batch id itself — not used directly here (listFn/consumeFn already
+// close over it), but kept as an explicit prop so the load effect below has
+// a real dependency to key off instead of an empty array. Without it,
+// correctness would depend on the undocumented, external assumption that
+// OrderModal/BatchModal always remount rather than reuse this component
+// across a different id — true today (both render it inside `{selected &&
+// <Modal .../>}`), but not something this file itself would catch if that
+// ever changed.
+// releaseFn is only meaningful for order parts (see inventory.ReserveForOrder
+// — cartridge batches still consume immediately via the older
+// ConsumeForCartridgeBatch path and never produce a 'reservation' movement),
+// so BatchModal simply omits it.
+// refreshKey: this section self-fetches and never learns about status
+// changes made elsewhere in OrderModal (e.g. completing the order resolves
+// every open reservation server-side, see inventory.ConsumeReservedForOrder)
+// — pass something that changes when that happens (order.status) so the
+// "резерв" badges don't go stale the moment the order is marked done.
+const PartsUsedSection = ({ id, listFn, consumeFn, releaseFn, refreshKey }) => {
+  const [movements, setMovements] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [busyId, setBusyId] = useState(null)
+  const [actionError, setActionError] = useState('')
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      setMovements(await listFn())
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, refreshKey])
+
+  const handleConsume = async (body) => {
+    await consumeFn(body)
+    await load()
+  }
+
+  const handleReverse = async (movementId) => {
+    setBusyId(movementId)
+    setActionError('')
+    try {
+      await api.reverseMovement(movementId)
+      await load()
+    } catch (err) {
+      setActionError(err.message)
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const handleRelease = async (movementId) => {
+    if (!releaseFn) return
+    setBusyId(movementId)
+    setActionError('')
+    try {
+      await releaseFn(movementId)
+      await load()
+    } catch (err) {
+      setActionError(err.message)
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  // A consumption/reservation row that already has a reversal/release/
+  // consumption pointing back at it (via reverses_id) is resolved — no
+  // button, just a status badge.
+  const resolvedIds = new Set(movements.filter((m) => m.reverses_id).map((m) => m.reverses_id))
+
+  const TYPE_LABELS = {
+    reversal: 'возврат',
+    release: 'резерв снят',
+  }
+
+  return (
+    <div>
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '8px' }}>Запчасти</h3>
+      <AddPartForm onConsume={handleConsume} />
+
+      {actionError && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginTop: '8px' }}>{actionError}</p>}
+
+      <div style={{ marginTop: '12px' }}>
+        {loading ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Загрузка...</p>
+        ) : movements.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Запчасти ещё не добавлялись</p>
+        ) : (
+          movements.map((m) => (
+            <div key={m.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.82rem', padding: '8px 0', borderBottom: '1px solid var(--color-border)' }}>
+              <div>
+                <span style={{ fontWeight: 510 }}>{m.part_name}</span>
+                <span style={{ color: 'var(--color-text-muted)' }}>
+                  {' '}· {TYPE_LABELS[m.type] || (m.type === 'reservation' ? `в резерве ${-m.qty}` : `списано ${-m.qty}`)} · {m.staff_name}
+                  {m.note ? ` — ${m.note}` : ''}
+                </span>
+                {m.type === 'reservation' && !resolvedIds.has(m.id) && (
+                  <span style={{
+                    marginLeft: '6px', fontSize: '0.68rem', fontWeight: 590, padding: '1px 7px', borderRadius: '50px',
+                    background: 'var(--color-warn-soft)', color: 'var(--color-warn)',
+                  }}>
+                    резерв
+                  </span>
+                )}
+              </div>
+              {m.type === 'consumption' && !resolvedIds.has(m.id) && (
+                <button
+                  type="button"
+                  onClick={() => handleReverse(m.id)}
+                  disabled={busyId === m.id}
+                  title="Отменить списание"
+                  style={{ background: 'none', color: 'var(--color-text-muted)', padding: '4px', flexShrink: 0 }}
+                >
+                  <Undo2 size={15} />
+                </button>
+              )}
+              {m.type === 'reservation' && !resolvedIds.has(m.id) && releaseFn && (
+                <button
+                  type="button"
+                  onClick={() => handleRelease(m.id)}
+                  disabled={busyId === m.id}
+                  title="Убрать из резерва"
+                  style={{ background: 'none', color: 'var(--color-text-muted)', padding: '4px', flexShrink: 0 }}
+                >
+                  <Undo2 size={15} />
+                </button>
+              )}
+              {(m.type === 'consumption' || m.type === 'reservation') && resolvedIds.has(m.id) && (
+                <span style={{ fontSize: '0.72rem', color: 'var(--color-text-muted)', flexShrink: 0 }}>
+                  {m.type === 'reservation' ? 'списано' : 'возвращено'}
+                </span>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PartsUsedSection
diff --git a/production/web/src/inventory/StocktakeModal.jsx b/production/web/src/inventory/StocktakeModal.jsx
new file mode 100644
index 0000000..2a1e9be
--- /dev/null
+++ b/production/web/src/inventory/StocktakeModal.jsx
@@ -0,0 +1,189 @@
+import { useState, useEffect, useMemo } from 'react'
+import { X, ScanBarcode } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from '../orders/formStyles'
+import ScanField from '../ui/ScanField'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '720px',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+}
+
+function diffColor(expected, counted) {
+  if (counted == null) return 'var(--color-text-muted)'
+  if (counted === expected) return 'var(--color-success, #16a34a)'
+  return 'var(--color-danger, #dc2626)'
+}
+
+// The count screen — a barcode scan resolves to a line entirely client-
+// side (every line already carries its part's barcode from GetStocktake,
+// see internal/inventory.stocktakeLineRow), just scrolls/highlights it so
+// staff can find one part fast among however many are in this session;
+// actually recording a count is still the per-row input, not the scan
+// itself, since a scan alone can't tell us the quantity found.
+function StocktakeModal({ stocktakeId, onClose, onChanged }) {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [highlightId, setHighlightId] = useState(null)
+  const [scanError, setScanError] = useState('')
+  const [completing, setCompleting] = useState(false)
+  const [completeResult, setCompleteResult] = useState(null)
+  const [error, setError] = useState('')
+
+  const load = async () => {
+    const res = await api.stocktakes.get(stocktakeId)
+    setData(res)
+    setLoading(false)
+  }
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stocktakeId])
+
+  const handleScan = (code) => {
+    setScanError('')
+    const line = data?.lines.find((l) => l.barcode === code)
+    if (!line) { setScanError('Штрихкод не найден среди позиций этой инвентаризации'); return }
+    setHighlightId(line.id)
+    document.getElementById(`stocktake-line-${line.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+
+  const handleSetCount = async (lineId, value) => {
+    const qty = Math.max(0, Number(value) || 0)
+    setData((prev) => ({ ...prev, lines: prev.lines.map((l) => (l.id === lineId ? { ...l, counted_qty: qty } : l)) }))
+    try {
+      await api.stocktakes.setLineCount(stocktakeId, lineId, qty)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleComplete = async () => {
+    if (!window.confirm('Завершить инвентаризацию? По расхождениям (кроме серийных запчастей) будут проведены корректировки остатков.')) return
+    setCompleting(true)
+    setError('')
+    try {
+      const res = await api.stocktakes.complete(stocktakeId)
+      setCompleteResult(res)
+      await load()
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setCompleting(false)
+    }
+  }
+
+  const stats = useMemo(() => {
+    if (!data) return null
+    const counted = data.lines.filter((l) => l.counted_qty != null)
+    const discrepant = counted.filter((l) => l.counted_qty !== l.expected_qty)
+    return { total: data.lines.length, counted: counted.length, discrepant: discrepant.length }
+  }, [data])
+
+  if (loading || !data) {
+    return (
+      <div style={overlayStyle} onClick={onClose}>
+        <div onClick={(e) => e.stopPropagation()} className="glass-panel" style={{ ...panelStyle, padding: '40px', textAlign: 'center' }}>Загрузка...</div>
+      </div>
+    )
+  }
+
+  const { stocktake, lines } = data
+  const isOpen = stocktake.status === 'open'
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div onClick={(e) => e.stopPropagation()} className="glass-panel modal-panel" style={{ ...panelStyle, padding: '24px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>
+              Инвентаризация{stocktake.category_name ? ` — ${stocktake.category_name}` : ' — весь склад'}
+            </h2>
+            <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+              {isOpen ? 'В процессе' : 'Завершена'} · начал(а) {stocktake.created_by_staff_name}
+              {stocktake.completed_by_staff_name ? ` · завершил(а) ${stocktake.completed_by_staff_name}` : ''}
+              {stats && ` · посчитано ${stats.counted} из ${stats.total}, расхождений: ${stats.discrepant}`}
+            </p>
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+
+        {isOpen && (
+          <div>
+            <ScanField onScan={handleScan} icon={ScanBarcode} placeholder="Скан штрихкода — найти позицию..." inputStyle={inputStyle} />
+            {scanError && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', marginTop: '4px' }}>{scanError}</p>}
+          </div>
+        )}
+
+        {completeResult && (
+          <p style={{ fontSize: '0.85rem', padding: '10px 12px', borderRadius: '8px', background: 'var(--color-success-soft, #dcfce7)' }}>
+            Готово: скорректировано позиций — {completeResult.adjusted}.
+            {completeResult.skipped_serialized > 0 && ` Серийных запчастей с расхождением (нужна ручная сверка): ${completeResult.skipped_serialized}.`}
+            {completeResult.skipped_no_batch > 0 && ` Без партии для корректировки: ${completeResult.skipped_no_batch}.`}
+          </p>
+        )}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+
+        <div style={{ maxHeight: '50vh', overflowY: 'auto', border: '1px solid var(--color-border)', borderRadius: '10px' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
+            <thead>
+              <tr style={{ borderBottom: '1px solid var(--border-light)', textAlign: 'left', position: 'sticky', top: 0, background: 'var(--color-surface)' }}>
+                <th style={{ padding: '10px 12px' }}>Запчасть</th>
+                <th style={{ padding: '10px 12px', textAlign: 'right' }}>Ожидалось</th>
+                <th style={{ padding: '10px 12px', textAlign: 'right' }}>Посчитано</th>
+              </tr>
+            </thead>
+            <tbody>
+              {lines.map((l) => (
+                <tr
+                  key={l.id}
+                  id={`stocktake-line-${l.id}`}
+                  style={{
+                    borderBottom: '1px solid var(--border-light)',
+                    background: highlightId === l.id ? 'var(--color-accent-soft)' : undefined,
+                  }}
+                >
+                  <td style={{ padding: '8px 12px' }}>
+                    <p style={{ fontWeight: 510 }}>{l.name}{l.is_serialized ? ' · серийный учёт' : ''}</p>
+                    <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>
+                      {l.sku}{l.location ? ` · ${l.location}` : ''}
+                    </p>
+                  </td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right', color: 'var(--text-muted)' }}>{l.expected_qty}</td>
+                  <td style={{ padding: '8px 12px', textAlign: 'right' }}>
+                    {isOpen ? (
+                      <input
+                        type="number" min="0" defaultValue={l.counted_qty ?? ''}
+                        onBlur={(e) => handleSetCount(l.id, e.target.value)}
+                        placeholder="—"
+                        style={{ ...inputStyle, width: '80px', textAlign: 'right', padding: '6px 8px' }}
+                      />
+                    ) : (
+                      <span style={{ color: diffColor(l.expected_qty, l.counted_qty), fontWeight: 590 }}>
+                        {l.counted_qty ?? '—'}
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {isOpen && (
+          <button type="button" onClick={handleComplete} disabled={completing} className="btn-primary" style={{ padding: '12px', alignSelf: 'flex-start' }}>
+            {completing ? 'Завершаем...' : 'Завершить инвентаризацию'}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default StocktakeModal
diff --git a/production/web/src/inventory/StocktakesPage.jsx b/production/web/src/inventory/StocktakesPage.jsx
new file mode 100644
index 0000000..5bfb7d9
--- /dev/null
+++ b/production/web/src/inventory/StocktakesPage.jsx
@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react'
+import { ClipboardCheck, Plus } from 'lucide-react'
+import * as api from '../lib/api'
+import { usePartCategories, flattenTree } from './usePartCategories'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import StocktakeModal from './StocktakeModal'
+
+function CreateForm({ onClose, onCreated }) {
+  const { tree } = usePartCategories()
+  const flatCategories = flattenTree(tree)
+  const [categoryId, setCategoryId] = useState('')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      const res = await api.stocktakes.create({ category_id: categoryId, note })
+      onCreated(res.id)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <form onClick={(e) => e.stopPropagation()} onSubmit={handleSubmit} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Начать инвентаризацию</h2>
+        <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
+          Снимет текущие остатки как «ожидается» по каждой позиции — дальше на карточке инвентаризации вбиваете
+          фактически посчитанное.
+        </p>
+        <div>
+          <label style={labelStyle}>Категория (необязательно)</label>
+          <select value={categoryId} onChange={(e) => setCategoryId(e.target.value)} style={inputStyle}>
+            <option value="">Весь склад</option>
+            {flatCategories.map((c) => <option key={c.id} value={c.id}>{c.depth > 0 ? '— ' : ''}{c.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>Заметка</label>
+          <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="например, плановая ежемесячная" style={inputStyle} />
+        </div>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Создаём...' : 'Начать'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+const StocktakesPage = () => {
+  const [stocktakes, setStocktakes] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showCreate, setShowCreate] = useState(false)
+  const [openId, setOpenId] = useState(null)
+
+  const load = () => api.stocktakes.list().then(setStocktakes).finally(() => setLoading(false))
+  useEffect(() => { load() }, [])
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <ClipboardCheck size={22} color="var(--color-accent)" />
+          <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Инвентаризация</h1>
+        </div>
+        <button type="button" onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Начать инвентаризацию
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {stocktakes.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Инвентаризаций пока не было</p>}
+          {stocktakes.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => setOpenId(s.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)', fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>
+                  {s.category_name || 'Весь склад'}{s.note ? ` · ${s.note}` : ''}
+                </p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {new Date(s.created_at).toLocaleString('ru-RU')} · {s.created_by_staff_name} ·{' '}
+                  посчитано {s.counted_lines} из {s.total_lines}
+                  {s.discrepant_lines > 0 && `, расхождений: ${s.discrepant_lines}`}
+                </p>
+              </div>
+              <span style={{
+                fontSize: '0.72rem', fontWeight: 590, padding: '3px 10px', borderRadius: '50px',
+                background: s.status === 'open' ? 'var(--color-warn-soft, #fef3c7)' : 'var(--color-success-soft, #dcfce7)',
+                color: s.status === 'open' ? 'var(--color-warn, #b45309)' : 'var(--color-success, #16a34a)',
+              }}>
+                {s.status === 'open' ? 'В процессе' : 'Завершена'}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <CreateForm onClose={() => setShowCreate(false)} onCreated={(id) => { setShowCreate(false); load(); setOpenId(id) }} />
+      )}
+      {openId && (
+        <StocktakeModal stocktakeId={openId} onClose={() => { setOpenId(null); load() }} onChanged={load} />
+      )}
+    </div>
+  )
+}
+
+export default StocktakesPage
diff --git a/production/web/src/inventory/usePartCategories.js b/production/web/src/inventory/usePartCategories.js
new file mode 100644
index 0000000..b853c47
--- /dev/null
+++ b/production/web/src/inventory/usePartCategories.js
@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Turns the flat list the backend returns into a two-level tree (top-level
+// categories with their children nested under `children`) — only two
+// levels are supported anywhere in the UI (Телефоны -> Apple, not deeper),
+// matching migrations/028_category_hierarchy.sql's single parent_id hop.
+export function buildTree(categories) {
+  const byId = new Map(categories.map((c) => [c.id, { ...c, children: [] }]))
+  const roots = []
+  for (const c of byId.values()) {
+    if (c.parent_id && byId.has(c.parent_id)) {
+      byId.get(c.parent_id).children.push(c)
+    } else {
+      roots.push(c)
+    }
+  }
+  const sortByName = (list) => list.sort((a, b) => a.name.localeCompare(b.name, 'ru'))
+  for (const c of byId.values()) sortByName(c.children)
+  return sortByName(roots)
+}
+
+// Feeds category pickers in PartsPage (filter), SalesPage (browse), and
+// PartModal (assignment) — same pattern as orders/useDeviceCatalog's brand
+// list.
+export function usePartCategories() {
+  const [categories, setCategories] = useState([])
+
+  const reload = useCallback(async () => {
+    setCategories((await api.partCategories.list()) || [])
+  }, [])
+
+  useEffect(() => {
+    (async () => { await reload() })()
+  }, [reload])
+
+  const addCategory = async (name, parentId) => {
+    const c = await api.partCategories.create({ name, parent_id: parentId || undefined })
+    setCategories((prev) => [...prev, c].sort((a, b) => a.name.localeCompare(b.name, 'ru')))
+    return c
+  }
+
+  const renameCategory = async (id, name, parentId) => {
+    await api.partCategories.update(id, { name, parent_id: parentId || undefined })
+    await reload()
+  }
+
+  const removeCategory = async (id) => {
+    await api.partCategories.remove(id)
+    await reload()
+  }
+
+  const tree = buildTree(categories)
+
+  return { categories, tree, addCategory, renameCategory, removeCategory, reload }
+}
+
+// Flattens a tree (from buildTree) back into a list with a depth so a plain
+// <select> can render indented options ("Телефоны" then "— Apple") instead
+// of a name-sorted flat list that hides the hierarchy.
+export function flattenTree(tree, depth = 0) {
+  return tree.flatMap((c) => [{ id: c.id, name: c.name, depth }, ...flattenTree(c.children, depth + 1)])
+}
diff --git a/production/web/src/inventory/useParts.js b/production/web/src/inventory/useParts.js
new file mode 100644
index 0000000..b43de2d
--- /dev/null
+++ b/production/web/src/inventory/useParts.js
@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useParts(query, lowStockOnly, categoryId = '', isRetail = '', extra = {}) {
+  const [parts, setParts] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  // extra: { condition, location, barcode } — the warehouse filters
+  // (condition/address storage) and the scan-to-find lookup, all exact
+  // match server-side. Kept as one object rather than three more
+  // positional args since this list was already getting long.
+  const { condition = '', location = '', barcode = '' } = extra
+
+  const fetchParts = useCallback(async () => {
+    setLoading(true)
+    try {
+      setParts((await api.parts.list({
+        q: query, low_stock: lowStockOnly ? 'true' : '', category_id: categoryId, is_retail: isRetail,
+        condition, location, barcode,
+      })) || [])
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [query, lowStockOnly, categoryId, isRetail, condition, location, barcode])
+
+  useEffect(() => {
+    const id = setTimeout(fetchParts, 250)
+    return () => clearTimeout(id)
+  }, [fetchParts])
+
+  return { parts, loading, error, refetch: fetchParts }
+}
diff --git a/production/web/src/layout/AdminLayout.jsx b/production/web/src/layout/AdminLayout.jsx
new file mode 100644
index 0000000..5772498
--- /dev/null
+++ b/production/web/src/layout/AdminLayout.jsx
@@ -0,0 +1,230 @@
+import { useState, useEffect } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { Plus, Menu, PanelTop, PanelLeft, Sun, Moon } from 'lucide-react'
+import Sidebar, { SIDEBAR_WIDTH, SIDEBAR_WIDTH_COMPACT } from './Sidebar'
+import TopNav from './TopNav'
+import NotificationBell from './NotificationBell'
+import { useIsMobile } from '../hooks/useIsMobile'
+import { useSidebarCompact } from '../hooks/useSidebarCompact'
+import { useSidebarPosition } from '../hooks/useSidebarPosition'
+import { useShopMode } from '../hooks/useShopMode'
+import { useTheme } from '../hooks/useTheme'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+import { CartProvider } from '../sales/CartContext'
+import ShiftPromptModal from '../shifts/ShiftPromptModal'
+import NewEntryTypeModal from '../orders/NewEntryTypeModal'
+import NewOnsiteBookingModal from '../bookings/NewOnsiteBookingModal'
+import MultiIntakeModal from '../orders/MultiIntakeModal'
+
+const PAGE_TITLES = {
+  '/kanban': 'Канбан',
+  '/orders': 'Все заявки',
+  '/cartridges': 'Картриджи',
+  '/onsite-kanban': 'Выездной ремонт',
+  '/clients': 'Клиенты',
+  '/bookings': 'Заявки на запись',
+  '/parts': 'Склад',
+  '/suppliers': 'Поставщики',
+  '/purchase-orders': 'Заказы поставщикам',
+  '/rma': 'Возвраты поставщикам',
+  '/deliveries': 'Доставка',
+  '/cash': 'Касса',
+  '/payroll': 'Зарплата',
+  '/shifts': 'Смены',
+  '/production-recipes': 'Производство',
+  '/warranty-claims': 'Гарантийные случаи',
+  '/trade-ins': 'Выкуп техники',
+  '/sales': 'Продажи',
+  '/shop-analytics': 'Аналитика магазина',
+}
+
+// The header's single "+" button is route-aware: which boolean it flips and
+// what it's labelled depends on the current page. Routes with no entry here
+// (e.g. /clients, which has its own create flow) get no button at all.
+// Keyed lookup rather than a generic "new entity" abstraction — this is a
+// 3-page app, not worth the indirection.
+const NEW_BUTTON = {
+  '/kanban': { label: 'Заявка', open: 'order' },
+  '/orders': { label: 'Заявка', open: 'order' },
+  '/cartridges': { label: 'Партия', open: 'batch' },
+}
+
+const AdminLayout = () => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  // /settings/* is one page with its own internal tab bar (SettingsLayout)
+  // rather than a distinct route per sub-page, so every nested path under it
+  // shares one header title — the active tab is already visible below it.
+  const title = location.pathname.startsWith('/settings') ? 'Настройки' : (PAGE_TITLES[location.pathname] || 'Панель управления')
+  const [showNewOrder, setShowNewOrder] = useState(false)
+  const [showNewBatch, setShowNewBatch] = useState(false)
+  // The "+Заявка" button's first step — see NewEntryTypeModal's own doc
+  // comment for why this exists instead of always opening OrderModal.
+  const [showTypeSelector, setShowTypeSelector] = useState(false)
+  const [showNewOnsite, setShowNewOnsite] = useState(false)
+  const [showMultiIntake, setShowMultiIntake] = useState(false)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [sidebarCompact, toggleSidebarCompact] = useSidebarCompact()
+  const [sidebarPosition, setSidebarPosition] = useSidebarPosition()
+  const { resolvedTheme, toggleTheme } = useTheme()
+  const [shopMode, setShopMode] = useShopMode()
+  const { modules } = useFeatureModules()
+  const isMobile = useIsMobile()
+
+  // If an owner disables Магазин while a staff member is sitting in
+  // shop mode, drop them back to Сервис instead of leaving the toggle
+  // pointed at a mode whose nav entries just disappeared. navItems.js's own
+  // buildNavEntries also treats shopMode+disabled as "not really shop mode"
+  // defensively, so this is belt-and-suspenders against the one render
+  // where modules is still the DEFAULT_MODULES placeholder.
+  useEffect(() => {
+    if (shopMode && modules.online_shop === false) setShopMode(false)
+  }, [shopMode, modules.online_shop, setShopMode])
+  // The side↔top toggle is desktop-only — mobile always falls back to the
+  // Sidebar drawer (sliding off-canvas) regardless of the saved position,
+  // since a horizontal bar doesn't fit a phone width either.
+  const useTopNav = sidebarPosition === 'top' && !isMobile
+  const contentMargin = isMobile || useTopNav ? 0 : (sidebarCompact ? SIDEBAR_WIDTH_COMPACT : SIDEBAR_WIDTH)
+  const newButton = NEW_BUTTON[location.pathname]
+
+  const handleNewClick = () => {
+    if (newButton?.open === 'batch') setShowNewBatch(true)
+    else if (newButton?.open === 'order') setShowTypeSelector(true)
+  }
+
+  const handleChooseEntryType = (kind) => {
+    setShowTypeSelector(false)
+    if (kind === 'repair') setShowNewOrder(true)
+    else if (kind === 'cartridge') navigate('/cartridges?new=1')
+    else if (kind === 'onsite') setShowNewOnsite(true)
+    else if (kind === 'multi') setShowMultiIntake(true)
+  }
+
+  // Close the mobile drawer on navigation — adjusted during render (React's
+  // documented pattern for "reset state when a prop changes") rather than an
+  // effect, so no setState-after-render tick and no lint flag.
+  const [lastPathname, setLastPathname] = useState(location.pathname)
+  if (location.pathname !== lastPathname) {
+    setLastPathname(location.pathname)
+    setSidebarOpen(false)
+  }
+
+  return (
+    <CartProvider>
+    <div data-shop-mode={shopMode ? 'true' : undefined} style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <ShiftPromptModal />
+      {isMobile && sidebarOpen && (
+        <div
+          onClick={() => setSidebarOpen(false)}
+          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99 }}
+        />
+      )}
+      {useTopNav ? (
+        <TopNav shopMode={shopMode} onSetShopMode={setShopMode} modules={modules} />
+      ) : (
+        <Sidebar
+          isOpen={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          isMobile={isMobile}
+          compact={sidebarCompact}
+          onToggleCompact={toggleSidebarCompact}
+          shopMode={shopMode}
+          onSetShopMode={setShopMode}
+          modules={modules}
+        />
+      )}
+      <div style={{ marginLeft: `${contentMargin}px`, flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, transition: 'margin-left 0.2s ease' }}>
+        <header style={{
+          height: '60px', background: 'var(--color-surface)',
+          borderBottom: '1px solid var(--color-border)',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '0 28px', position: 'sticky', top: 0, zIndex: 50,
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            {isMobile && (
+              <button
+                onClick={() => setSidebarOpen(true)}
+                aria-label="Открыть меню"
+                style={{ background: 'none', color: 'var(--text-main)', padding: '4px', display: 'flex' }}
+              >
+                <Menu size={22} />
+              </button>
+            )}
+            <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem', fontWeight: 590 }}>
+              {title}
+            </h1>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            {!isMobile && (
+              <button
+                onClick={() => setSidebarPosition(sidebarPosition === 'top' ? 'side' : 'top')}
+                aria-label={sidebarPosition === 'top' ? 'Меню сбоку' : 'Меню сверху'}
+                title={sidebarPosition === 'top' ? 'Меню сбоку' : 'Меню сверху'}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: '36px', height: '36px', borderRadius: '8px',
+                  background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)',
+                }}
+              >
+                {sidebarPosition === 'top' ? <PanelLeft size={17} /> : <PanelTop size={17} />}
+              </button>
+            )}
+            <button
+              onClick={toggleTheme}
+              aria-label={resolvedTheme === 'dark' ? 'Включить светлую тему' : 'Включить тёмную тему'}
+              title={resolvedTheme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                width: '36px', height: '36px', borderRadius: '8px',
+                background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)',
+              }}
+            >
+              {resolvedTheme === 'dark' ? <Sun size={17} /> : <Moon size={17} />}
+            </button>
+            <NotificationBell />
+            {newButton && (
+              <button
+                onClick={handleNewClick}
+                className="btn-primary"
+                style={{ padding: '8px 18px', fontSize: '0.88rem', display: 'flex', alignItems: 'center', gap: '7px' }}
+              >
+                <Plus size={15} />
+                {newButton.label}
+              </button>
+            )}
+          </div>
+        </header>
+
+        <main style={{ flex: 1, padding: '28px', overflow: 'auto' }}>
+          {/* key={pathname} remounts this wrapper on every navigation, which is
+              what re-triggers the CSS animation (see .page-enter, index.css) —
+              a route switch would otherwise leave the previous page's already-
+              finished animation state in place, and the child components
+              underneath don't remount just because the URL changed. */}
+          <div key={location.pathname} className="page-enter">
+            <Outlet context={{ showNewOrder, setShowNewOrder, showNewBatch, setShowNewBatch }} />
+          </div>
+        </main>
+      </div>
+
+      {showTypeSelector && (
+        <NewEntryTypeModal onClose={() => setShowTypeSelector(false)} onChoose={handleChooseEntryType} />
+      )}
+      {showNewOnsite && (
+        <NewOnsiteBookingModal
+          onClose={() => setShowNewOnsite(false)}
+          onCreated={() => { setShowNewOnsite(false); navigate('/bookings') }}
+        />
+      )}
+      {showMultiIntake && (
+        <MultiIntakeModal
+          onClose={() => setShowMultiIntake(false)}
+          onSaved={() => navigate('/orders')}
+        />
+      )}
+    </div>
+    </CartProvider>
+  )
+}
+
+export default AdminLayout
diff --git a/production/web/src/layout/NavGroup.jsx b/production/web/src/layout/NavGroup.jsx
new file mode 100644
index 0000000..212cbcb
--- /dev/null
+++ b/production/web/src/layout/NavGroup.jsx
@@ -0,0 +1,66 @@
+import { NavLink } from 'react-router-dom'
+import { ChevronDown } from 'lucide-react'
+
+// A collapsible parent row for related nav items (see Sidebar.jsx's
+// SERVICE_GROUPS/SETTINGS_GROUP) — same NavLink active-state styling the
+// flat top-level items use, just nested under a toggle. Parent rows never
+// navigate themselves (see Sidebar.jsx's comment on why Настройки's own
+// page lives as the group's first child instead) — clicking the header
+// only expands/collapses.
+const NavGroup = ({ label, icon: Icon, items, isCompact, expanded, onToggle, isChildActive }) => {
+  return (
+    <div style={{ marginBottom: '2px' }}>
+      <button
+        type="button"
+        onClick={onToggle}
+        title={isCompact ? label : undefined}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '12px', width: '100%',
+          justifyContent: isCompact ? 'center' : 'flex-start',
+          padding: isCompact ? '11px 0' : '11px 14px', borderRadius: '8px',
+          background: 'transparent',
+          color: isChildActive ? 'var(--color-accent-fg)' : 'var(--text-main)',
+          fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.88rem',
+        }}
+      >
+        <Icon size={17} style={{ flexShrink: 0 }} />
+        {!isCompact && (
+          <>
+            <span style={{ flex: 1, textAlign: 'left' }}>{label}</span>
+            <ChevronDown
+              size={14}
+              style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s', flexShrink: 0 }}
+            />
+          </>
+        )}
+      </button>
+      {expanded && (
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {items.map(({ to, search, icon: ItemIcon, label: itemLabel }) => {
+            const fullPath = search ? `${to}${search}` : to
+            return (
+              <NavLink
+                key={fullPath}
+                to={fullPath}
+                title={isCompact ? itemLabel : undefined}
+                style={({ isActive }) => ({
+                  display: 'flex', alignItems: 'center', gap: '10px',
+                  justifyContent: isCompact ? 'center' : 'flex-start',
+                  padding: isCompact ? '9px 0' : '9px 14px 9px 30px', borderRadius: '8px', marginBottom: '2px',
+                  color: isActive ? 'var(--color-accent-fg)' : 'var(--text-muted)',
+                  background: isActive ? 'var(--color-accent-soft)' : 'transparent',
+                  fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.83rem',
+                })}
+              >
+                <ItemIcon size={15} style={{ flexShrink: 0 }} />
+                {!isCompact && itemLabel}
+              </NavLink>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default NavGroup
diff --git a/production/web/src/layout/NotificationBell.jsx b/production/web/src/layout/NotificationBell.jsx
new file mode 100644
index 0000000..339ed8f
--- /dev/null
+++ b/production/web/src/layout/NotificationBell.jsx
@@ -0,0 +1,167 @@
+import { useState, useRef, useEffect } from 'react'
+import { Bell, Check, X } from 'lucide-react'
+import { useNotifications } from '../hooks/useNotifications'
+
+function formatWhen(iso) {
+  const d = new Date(iso)
+  return d.toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+// Header bell — shared inbox for internal/notification (see its package doc):
+// low-stock production alerts today, anything actionable tomorrow. Polls
+// once on mount then rides the same realtime SSE channel as the rest of the
+// app (see useNotifications.js) rather than its own interval.
+const NotificationBell = () => {
+  const { items, unreadCount, markRead, runAction, dismiss } = useNotifications()
+  const [open, setOpen] = useState(false)
+  const [busyId, setBusyId] = useState(null)
+  const [dismissingId, setDismissingId] = useState(null)
+  const [errorById, setErrorById] = useState({})
+  const containerRef = useRef(null)
+  // A fresh unread arrival should catch the eye once, not loop forever —
+  // ringAnimKey remounts the icon's .bell-ring animation (see index.css)
+  // each time unreadCount goes up, and only then; it's untouched by a drop
+  // (marking read) or by re-renders that don't actually change the count.
+  const [ringAnimKey, setRingAnimKey] = useState(0)
+  const prevUnreadRef = useRef(unreadCount)
+  useEffect(() => {
+    if (unreadCount > prevUnreadRef.current) setRingAnimKey((k) => k + 1)
+    prevUnreadRef.current = unreadCount
+  }, [unreadCount])
+
+  useEffect(() => {
+    if (!open) return
+    const onDocClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [open])
+
+  const handleConfirm = async (id) => {
+    setBusyId(id)
+    setErrorById((prev) => ({ ...prev, [id]: null }))
+    try {
+      await runAction(id)
+    } catch (err) {
+      setErrorById((prev) => ({ ...prev, [id]: err.message || 'Не удалось выполнить действие' }))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const handleDismiss = async (id) => {
+    setDismissingId(id)
+    setErrorById((prev) => ({ ...prev, [id]: null }))
+    try {
+      await dismiss(id)
+    } catch (err) {
+      setErrorById((prev) => ({ ...prev, [id]: err.message || 'Не удалось закрыть уведомление' }))
+    } finally {
+      setDismissingId(null)
+    }
+  }
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-label="Уведомления"
+        title="Уведомления"
+        style={{
+          position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: '36px', height: '36px', borderRadius: '8px',
+          background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)',
+        }}
+      >
+        <Bell key={ringAnimKey} size={17} className={ringAnimKey > 0 ? 'bell-ring' : undefined} />
+        {unreadCount > 0 && (
+          <span key={ringAnimKey} className="badge-pop" style={{
+            position: 'absolute', top: '2px', right: '2px',
+            minWidth: '16px', height: '16px', padding: '0 3px', borderRadius: '8px',
+            background: 'var(--color-danger, #e5484d)', color: '#fff',
+            fontSize: '0.65rem', fontWeight: 590, lineHeight: '16px', textAlign: 'center',
+          }}>
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="dropdown-panel" style={{
+          position: 'absolute', top: 'calc(100% + 8px)', right: 0, zIndex: 60,
+          width: '360px', maxHeight: '420px', overflowY: 'auto',
+          background: 'var(--color-surface)', border: '1px solid var(--color-border)',
+          borderRadius: '10px', boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+        }}>
+          <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--color-border)', fontWeight: 590, fontSize: '0.9rem' }}>
+            Уведомления
+          </div>
+          {items.length === 0 && (
+            <div style={{ padding: '24px 14px', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
+              Пока пусто
+            </div>
+          )}
+          {items.map((n) => (
+            <div key={n.id} style={{
+              padding: '12px 14px', borderBottom: '1px solid var(--color-border)',
+              background: n.read_at ? 'transparent' : 'var(--color-surface-sunken)',
+              display: 'flex', flexDirection: 'column', gap: '6px',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '8px', alignItems: 'flex-start' }}>
+                <span style={{ fontSize: '0.85rem', fontWeight: n.read_at ? 500 : 700 }}>{n.title}</span>
+                <div style={{ display: 'flex', gap: '2px', flexShrink: 0 }}>
+                  {!n.read_at && !n.action_type && (
+                    <button
+                      onClick={() => markRead(n.id)}
+                      aria-label="Отметить прочитанным"
+                      title="Отметить прочитанным"
+                      style={{ background: 'none', color: 'var(--color-text-muted)', padding: '2px', display: 'flex' }}
+                    >
+                      <Check size={15} />
+                    </button>
+                  )}
+                  <button
+                    onClick={() => handleDismiss(n.id)}
+                    disabled={dismissingId === n.id}
+                    aria-label="Закрыть уведомление"
+                    title="Закрыть уведомление"
+                    style={{ background: 'none', color: 'var(--color-text-muted)', padding: '2px', display: 'flex' }}
+                  >
+                    <X size={15} />
+                  </button>
+                </div>
+              </div>
+              {n.body && <div style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>{n.body}</div>}
+              <div style={{ fontSize: '0.72rem', color: 'var(--color-text-muted)' }}>{formatWhen(n.created_at)}</div>
+              {n.action_type && !n.resolved_at && (
+                <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '8px', marginTop: '2px' }}>
+                  <button
+                    onClick={() => handleConfirm(n.id)}
+                    disabled={busyId === n.id}
+                    className="btn-primary"
+                    style={{ padding: '5px 12px', fontSize: '0.78rem' }}
+                  >
+                    {busyId === n.id ? 'Выполняется…' : 'Подтвердить производство'}
+                  </button>
+                </div>
+              )}
+              {n.resolved_at && (
+                <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+                  ✓ Выполнено{n.resolved_by_staff_name ? ` — ${n.resolved_by_staff_name}` : ''}
+                </div>
+              )}
+              {errorById[n.id] && (
+                <span style={{ fontSize: '0.75rem', color: 'var(--color-danger, #e5484d)' }}>
+                  {errorById[n.id]}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default NotificationBell
diff --git a/production/web/src/layout/Sidebar.jsx b/production/web/src/layout/Sidebar.jsx
new file mode 100644
index 0000000..2fc2600
--- /dev/null
+++ b/production/web/src/layout/Sidebar.jsx
@@ -0,0 +1,206 @@
+import { NavLink, useNavigate, useLocation } from 'react-router-dom'
+import { Wrench, LogOut, X, ChevronsLeft, ChevronsRight, Store, Wrench as ServiceIcon } from 'lucide-react'
+import { useAuth } from '../auth/AuthContext'
+import { useCart } from '../sales/CartContext'
+import { useExpandedGroups } from '../hooks/useExpandedGroups'
+import { buildNavEntries, ROLE_LABELS } from './navItems'
+import NavGroup from './NavGroup'
+
+export const SIDEBAR_WIDTH = 240
+export const SIDEBAR_WIDTH_COMPACT = 64
+
+const Sidebar = ({ isOpen, onClose, isMobile, compact, onToggleCompact, shopMode, onSetShopMode, modules = {} }) => {
+  const { staff, logout } = useAuth()
+  const { cart } = useCart()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [expandedGroups, toggleGroup] = useExpandedGroups()
+
+  const navEntries = buildNavEntries(shopMode, staff, modules)
+  const onlineShopEnabled = modules.online_shop !== false
+
+  const isGroupActive = (group) => group.items.some(({ to, search }) => location.pathname === to && location.search === (search || ''))
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  // Icons-only rail — never collapse on mobile, the drawer already solves
+  // the space problem there by sliding fully off-canvas when closed.
+  const isCompact = compact && !isMobile
+
+  return (
+    <aside style={{
+      width: isCompact ? `${SIDEBAR_WIDTH_COMPACT}px` : `${SIDEBAR_WIDTH}px`,
+      height: '100vh',
+      background: 'var(--color-surface)',
+      display: 'flex', flexDirection: 'column',
+      position: 'fixed', top: 0, left: 0,
+      zIndex: 100,
+      borderRight: '1px solid var(--border-light)',
+      transform: isMobile && !isOpen ? 'translateX(-100%)' : 'translateX(0)',
+      transition: 'transform 0.25s ease, width 0.2s ease',
+      overflow: 'hidden',
+    }}>
+      <div style={{ padding: isCompact ? '22px 12px' : '22px 20px', borderBottom: '1px solid var(--border-light)', position: 'relative', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '11px', justifyContent: isCompact ? 'center' : 'flex-start' }}>
+          <span style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+            width: '32px', height: '32px', borderRadius: '9px',
+            background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+          }}>
+            <Wrench size={16} />
+          </span>
+          {!isCompact && (
+            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '1.12rem', letterSpacing: '-0.012em', whiteSpace: 'nowrap' }}>
+              Aura CRM
+            </span>
+          )}
+        </div>
+        {isMobile && (
+          <button
+            onClick={onClose}
+            aria-label="Закрыть меню"
+            style={{
+              position: 'absolute', top: '50%', right: '14px', transform: 'translateY(-50%)',
+              background: 'none', border: 'none', color: 'var(--text-muted)', display: 'flex', padding: '4px',
+            }}
+          >
+            <X size={18} />
+          </button>
+        )}
+      </div>
+
+      {onlineShopEnabled && (
+      <div style={{ padding: isCompact ? '12px 8px 0' : '12px 10px 0', flexShrink: 0 }}>
+        <div style={{ display: 'flex', border: '1.5px solid var(--border-light)', borderRadius: '8px', overflow: 'hidden' }}>
+          <button
+            type="button"
+            onClick={() => onSetShopMode(false)}
+            title="Сервис"
+            style={{
+              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
+              padding: '8px 0', fontSize: '0.78rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+              background: !shopMode ? 'var(--color-accent-soft)' : 'var(--color-surface)',
+              color: !shopMode ? 'var(--color-accent-fg)' : 'var(--text-muted)',
+            }}
+          >
+            <ServiceIcon size={14} />
+            {!isCompact && 'Сервис'}
+          </button>
+          <button
+            type="button"
+            onClick={() => onSetShopMode(true)}
+            title="Магазин"
+            style={{
+              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
+              padding: '8px 0', fontSize: '0.78rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+              background: shopMode ? 'var(--color-shop-accent-soft)' : 'var(--color-surface)',
+              color: shopMode ? 'var(--color-shop-accent-fg)' : 'var(--text-muted)',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <Store size={14} />
+            {!isCompact && 'Магазин'}
+          </button>
+        </div>
+      </div>
+      )}
+
+      <nav style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '14px 10px' }}>
+        {navEntries.map((entry) => {
+          if (entry.type === 'group') {
+            const isChildActive = isGroupActive(entry)
+            return (
+              <NavGroup
+                key={entry.key}
+                label={entry.label}
+                icon={entry.icon}
+                items={entry.items}
+                isCompact={isCompact}
+                expanded={!!expandedGroups[entry.key] || isChildActive}
+                onToggle={() => toggleGroup(entry.key)}
+                isChildActive={isChildActive}
+              />
+            )
+          }
+          const { to, search, icon: Icon, label } = entry
+          const fullPath = search ? `${to}${search}` : to
+          const isActive = location.pathname === to && location.search === (search || '')
+          return (
+            <NavLink
+              key={fullPath}
+              to={fullPath}
+              title={isCompact ? label : undefined}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '12px',
+                justifyContent: isCompact ? 'center' : 'flex-start',
+                padding: isCompact ? '11px 0' : '11px 14px', borderRadius: '9px', marginBottom: '2px',
+                color: isActive ? 'var(--color-accent-fg)' : 'var(--text-main)',
+                background: isActive ? 'var(--color-accent-soft)' : 'transparent',
+                fontFamily: 'var(--font-body)', fontWeight: 510, fontSize: '0.87rem',
+                boxShadow: isActive ? 'inset 2px 0 0 var(--color-accent)' : 'none',
+                transition: 'background 0.15s ease, color 0.15s ease',
+              }}
+            >
+              <Icon size={17} style={{ flexShrink: 0 }} />
+              {!isCompact && <span style={{ flex: 1 }}>{label}</span>}
+              {to === '/sales' && cart.length > 0 && (
+                <span style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  minWidth: '18px', height: '18px', padding: '0 5px', borderRadius: '9px',
+                  background: 'var(--color-shop-accent)', color: '#fff', fontSize: '0.68rem', fontWeight: 590,
+                }}>
+                  {cart.length}
+                </span>
+              )}
+            </NavLink>
+          )
+        })}
+      </nav>
+
+      {!isMobile && (
+        <button
+          onClick={onToggleCompact}
+          aria-label={isCompact ? 'Развернуть меню' : 'Свернуть меню'}
+          title={isCompact ? 'Развернуть меню' : 'Свернуть меню'}
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: isCompact ? 'center' : 'flex-start',
+            gap: '8px', padding: isCompact ? '10px 0' : '10px 18px',
+            background: 'none', color: 'var(--text-muted)', flexShrink: 0,
+            borderTop: '1px solid var(--border-light)', fontSize: '0.8rem', fontFamily: 'var(--font-body)',
+          }}
+        >
+          {isCompact ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}
+          {!isCompact && 'Свернуть'}
+        </button>
+      )}
+
+      <div style={{ padding: isCompact ? '14px 10px' : '14px 18px', borderTop: '1px solid var(--border-light)', flexShrink: 0 }}>
+        {!isCompact && (
+          <>
+            <p style={{ fontSize: '0.9rem', fontWeight: 510, marginBottom: '2px' }}>{staff?.name}</p>
+            <p style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '10px' }}>
+              {ROLE_LABELS[staff?.role] || staff?.role}
+            </p>
+          </>
+        )}
+        <button
+          onClick={handleLogout}
+          title={isCompact ? 'Выйти' : undefined}
+          style={{
+            display: 'flex', alignItems: 'center', gap: '8px', justifyContent: isCompact ? 'center' : 'flex-start', width: '100%',
+            background: 'none', color: 'var(--text-muted)',
+            fontFamily: 'var(--font-body)', fontSize: '0.82rem', padding: '4px 0',
+          }}
+        >
+          <LogOut size={15} style={{ flexShrink: 0 }} />
+          {!isCompact && 'Выйти'}
+        </button>
+      </div>
+    </aside>
+  )
+}
+
+export default Sidebar
diff --git a/production/web/src/layout/TopNav.jsx b/production/web/src/layout/TopNav.jsx
new file mode 100644
index 0000000..5a65cf9
--- /dev/null
+++ b/production/web/src/layout/TopNav.jsx
@@ -0,0 +1,184 @@
+import { useState, useRef, useEffect } from 'react'
+import { NavLink, useNavigate, useLocation } from 'react-router-dom'
+import { Wrench, LogOut, ChevronDown, Store, Wrench as ServiceIcon } from 'lucide-react'
+import { useAuth } from '../auth/AuthContext'
+import { useCart } from '../sales/CartContext'
+import { buildNavEntries, ROLE_LABELS } from './navItems'
+
+// Desktop-only horizontal alternative to Sidebar.jsx (see
+// useSidebarPosition — mobile always falls back to the Sidebar drawer
+// regardless of this setting, so this component never has to handle the
+// isMobile/isOpen/compact concerns Sidebar.jsx does). Groups open a
+// dropdown panel on click rather than expanding inline — click, not
+// hover, to stay consistent with the rest of the app's dropdowns (e.g.
+// ClientPicker's search results).
+const TopNav = ({ shopMode, onSetShopMode, modules = {} }) => {
+  const { staff, logout } = useAuth()
+  const { cart } = useCart()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [openGroup, setOpenGroup] = useState(null)
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    const onDocClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) setOpenGroup(null)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [])
+
+  const navEntries = buildNavEntries(shopMode, staff, modules)
+  const onlineShopEnabled = modules.online_shop !== false
+  const isGroupActive = (group) => group.items.some(({ to, search }) => location.pathname === to && location.search === (search || ''))
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  const linkStyle = (isActive) => ({
+    display: 'flex', alignItems: 'center', gap: '7px',
+    padding: '8px 12px', borderRadius: '8px',
+    color: isActive ? 'var(--color-accent-fg)' : 'var(--text-main)',
+    background: isActive ? 'var(--color-accent-soft)' : 'transparent',
+    fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.85rem',
+    whiteSpace: 'nowrap',
+  })
+
+  return (
+    <div ref={containerRef} style={{
+      display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap',
+      minHeight: '60px', padding: '8px 20px', background: 'var(--color-surface)',
+      borderBottom: '1px solid var(--border-light)', position: 'sticky', top: 0, zIndex: 60,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0, marginRight: '8px' }}>
+        <Wrench size={20} color="var(--accent-blue)" />
+        <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 590, fontSize: '1rem', whiteSpace: 'nowrap' }}>
+          Aura CRM
+        </span>
+      </div>
+
+      <nav style={{ display: 'flex', alignItems: 'center', gap: '2px', flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+        {navEntries.map((entry) => {
+          if (entry.type === 'group') {
+            const isChildActive = isGroupActive(entry)
+            const isOpen = openGroup === entry.key
+            const Icon = entry.icon
+            return (
+              <div key={entry.key} style={{ position: 'relative', flexShrink: 0 }}>
+                <button
+                  type="button"
+                  onClick={() => setOpenGroup(isOpen ? null : entry.key)}
+                  style={{
+                    ...linkStyle(isChildActive), border: 'none',
+                    background: isOpen ? 'var(--color-surface-sunken)' : (isChildActive ? 'var(--color-accent-soft)' : 'transparent'),
+                  }}
+                >
+                  <Icon size={15} />
+                  {entry.label}
+                  <ChevronDown size={12} style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+                </button>
+                {isOpen && (
+                  <div style={{
+                    position: 'absolute', top: '100%', left: 0, marginTop: '4px', minWidth: '220px',
+                    background: 'var(--color-surface)', border: '1px solid var(--border-light)', borderRadius: '10px',
+                    boxShadow: 'var(--shadow-elevated)', padding: '6px', zIndex: 70,
+                  }}>
+                    {entry.items.map(({ to, search, icon: ItemIcon, label }) => {
+                      const fullPath = search ? `${to}${search}` : to
+                      return (
+                        <NavLink
+                          key={fullPath}
+                          to={fullPath}
+                          onClick={() => setOpenGroup(null)}
+                          style={({ isActive }) => ({
+                            display: 'flex', alignItems: 'center', gap: '10px', padding: '9px 10px', borderRadius: '7px',
+                            color: isActive ? 'var(--color-accent-fg)' : 'var(--text-main)',
+                            background: isActive ? 'var(--color-accent-soft)' : 'transparent',
+                            fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.85rem',
+                          })}
+                        >
+                          <ItemIcon size={15} style={{ flexShrink: 0 }} />
+                          {label}
+                        </NavLink>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          }
+          const { to, search, icon: Icon, label } = entry
+          const fullPath = search ? `${to}${search}` : to
+          const isActive = location.pathname === to && location.search === (search || '')
+          return (
+            <NavLink key={fullPath} to={fullPath} style={{ ...linkStyle(isActive), flexShrink: 0 }}>
+              <Icon size={15} />
+              {label}
+              {to === '/sales' && cart.length > 0 && (
+                <span style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  minWidth: '17px', height: '17px', padding: '0 4px', borderRadius: '9px',
+                  background: 'var(--color-shop-accent)', color: '#fff', fontSize: '0.65rem', fontWeight: 590,
+                }}>
+                  {cart.length}
+                </span>
+              )}
+            </NavLink>
+          )
+        })}
+      </nav>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexShrink: 0, marginLeft: '10px' }}>
+        {onlineShopEnabled && (
+        <div style={{ display: 'flex', border: '1.5px solid var(--border-light)', borderRadius: '8px', overflow: 'hidden' }}>
+          <button
+            type="button"
+            onClick={() => onSetShopMode(false)}
+            title="Сервис"
+            style={{
+              display: 'flex', alignItems: 'center', gap: '5px', padding: '6px 10px',
+              fontSize: '0.76rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+              background: !shopMode ? 'var(--color-accent)' : 'var(--color-surface)',
+              color: !shopMode ? 'var(--color-text-inverse)' : 'var(--text-muted)',
+            }}
+          >
+            <ServiceIcon size={13} /> Сервис
+          </button>
+          <button
+            type="button"
+            onClick={() => onSetShopMode(true)}
+            title="Магазин"
+            style={{
+              display: 'flex', alignItems: 'center', gap: '5px', padding: '6px 10px',
+              fontSize: '0.76rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+              background: shopMode ? 'var(--color-shop-accent)' : 'var(--color-surface)',
+              color: shopMode ? '#fff' : 'var(--text-muted)',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <Store size={13} /> Магазин
+          </button>
+        </div>
+        )}
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', paddingLeft: '8px', borderLeft: '1px solid var(--border-light)' }}>
+          <div style={{ textAlign: 'right' }}>
+            <p style={{ fontSize: '0.78rem', fontWeight: 510, lineHeight: 1.2 }}>{staff?.name}</p>
+            <p style={{ fontSize: '0.68rem', color: 'var(--text-muted)' }}>{ROLE_LABELS[staff?.role] || staff?.role}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            title="Выйти"
+            style={{ display: 'flex', padding: '6px', borderRadius: '8px', color: 'var(--text-muted)', background: 'none' }}
+          >
+            <LogOut size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopNav
diff --git a/production/web/src/layout/navItems.js b/production/web/src/layout/navItems.js
new file mode 100644
index 0000000..b1c52e4
--- /dev/null
+++ b/production/web/src/layout/navItems.js
@@ -0,0 +1,128 @@
+import { Home, LayoutDashboard, BookUser, Droplet, Boxes, Wallet, BarChart3, Settings, CalendarCheck, Truck, ClipboardList, Undo2, ShieldCheck, Recycle, List, ShoppingCart, Factory, Route, Banknote, Cpu, CheckSquare } from 'lucide-react'
+
+// Plain data (icons are component references, not JSX) — the single
+// source of truth for both the vertical Sidebar and the horizontal TopNav
+// (Phase [round 3]'s side↔top layout toggle), so the menu structure never
+// has to be kept in sync by hand across two renderers.
+//
+// permission: undefined means every role sees the item; a set permission
+// key must be present in staff.permissions (baked into the JWT by core at
+// login from the role's row in core's roles table — see
+// migrations/004_roles.sql there and main.go's *Perm middleware here) for
+// the item to show. Masters still reach per-order cash data through
+// CashSection embedded in OrderModal/BatchModal even without the "cash"
+// permission — just not the standalone ledger page.
+export const SERVICE_GROUPS = [
+  {
+    key: 'orders', label: 'Заявки', icon: List,
+    items: [
+      { to: '/kanban', icon: LayoutDashboard, label: 'Канбан' },
+      { to: '/orders', icon: List, label: 'Все заявки' },
+      { to: '/bookings', icon: CalendarCheck, label: 'Заявки на запись' },
+      { to: '/cartridges', icon: Droplet, label: 'Картриджи', moduleKey: 'cartridges' },
+      { to: '/deliveries', icon: Route, label: 'Доставка', moduleKey: 'delivery' },
+      { to: '/tasks', icon: CheckSquare, label: 'Задачи' },
+    ],
+  },
+  {
+    key: 'stock', label: 'Склад', icon: Boxes,
+    items: [
+      { to: '/parts', icon: Boxes, label: 'Склад' },
+      { to: '/stocktakes', icon: CheckSquare, label: 'Инвентаризация' },
+      { to: '/suppliers', icon: Truck, label: 'Поставщики' },
+      { to: '/purchase-orders', icon: ClipboardList, label: 'Заказы поставщикам' },
+      { to: '/rma', icon: Undo2, label: 'Возвраты поставщикам' },
+      { to: '/production-recipes', icon: Factory, label: 'Производство', permission: 'catalogs' },
+    ],
+  },
+  {
+    key: 'finance', label: 'Касса', icon: Wallet,
+    items: [
+      { to: '/cash', icon: Wallet, label: 'Касса', permission: 'cash' },
+      { to: '/payroll', icon: Banknote, label: 'Зарплата', permission: 'cash' },
+      { to: '/shifts', icon: CalendarCheck, label: 'Смены', permission: 'cash' },
+      { to: '/analytics', icon: BarChart3, label: 'Аналитика', permission: 'analytics' },
+    ],
+  },
+]
+
+// Not folded into a group — kept as flat entries between the "Заявки" and
+// "Склад" clusters, same original position. "Гарантии" is the aggregate
+// coverage dashboard (which past repairs are still covered, grouped
+// active/expiring/expired via warranty.js) — a different question from
+// "which orders ARE a warranty claim" (Гарантийные случаи), so it's a
+// second entry, not a merge into the first.
+export const SERVICE_STANDALONE = [
+  { to: '/warranty-claims', icon: ShieldCheck, label: 'Гарантийные случаи' },
+  { to: '/warranties', icon: ShieldCheck, label: 'Гарантии' },
+]
+
+// Company-wide funnel/revenue snapshot — gated same as /analytics (it shows
+// the same kind of revenue data), so a master's nav is unaffected. Not the
+// default landing route (that's still Kanban/Список for everyone, see
+// App.jsx) — added as an explicit entry rather than changing where login
+// lands everyone, a bigger behavioral change left for a deliberate decision.
+export const SERVICE_HOME = { to: '/dashboard', icon: Home, label: 'Главная', permission: 'analytics' }
+
+// Rendered in both Сервис and Магазин modes — settings/staff/roles aren't
+// mode-specific. Used to be a collapsible group listing every settings
+// sub-page as its own nav entry (Сотрудники, Роли, Справочники...); those
+// now live as tabs inside one page (see settings/SettingsLayout.jsx +
+// settings/settingsTabs.js), so this is a single link, not a group — a role
+// sees it as long as they have at least one of the underlying tab
+// permissions, same permission set settingsTabs.js checks per-tab.
+const SETTINGS_TAB_PERMISSIONS = ['settings', 'staff', 'order_fields', 'catalogs', 'services', 'document_templates', 'modules']
+export const SETTINGS_ITEM = { to: '/settings', icon: Settings, label: 'Настройки', permissionAny: SETTINGS_TAB_PERMISSIONS }
+
+export const SHOP_ITEMS = [
+  { to: '/sales', icon: ShoppingCart, label: 'Продажи' },
+  { to: '/pc-configurator', icon: Cpu, label: 'Конструктор ПК' },
+  { to: '/parts', search: '?view=retail', icon: Boxes, label: 'Витрина склада' },
+  { to: '/trade-ins', icon: Recycle, label: 'Выкуп техники' },
+  { to: '/cash', search: '?scope=shop', icon: Wallet, label: 'Касса магазина', permission: 'cash' },
+  { to: '/shop-analytics', icon: BarChart3, label: 'Аналитика магазина', permission: 'analytics' },
+]
+
+export const ROLE_LABELS = { owner: 'Владелец', manager: 'Менеджер', master: 'Мастер' }
+
+// Typed entries ('group' | 'item') so one render loop handles both flat
+// items and collapsible groups. Groups whose every item is
+// permission-gated away for this role collapse to nothing (never rendered
+// as an empty shell).
+//
+// modules is the owner-toggleable feature_modules map (see
+// hooks/useFeatureModules.js) — {online_shop, catalogs, cartridges}, every
+// key defaulting to true while it loads. shopMode still forcing SHOP_ITEMS
+// even with online_shop disabled is handled defensively here too (not just
+// by AdminLayout's own effect that flips shopMode back to false), so a
+// stale shopMode=true in localStorage never renders a nav for a section
+// that no longer exists.
+export function buildNavEntries(shopMode, staff, modules = {}) {
+  const hasPermission = (item) => {
+    if (item.permissionAny) return item.permissionAny.some((p) => staff?.permissions?.includes(p))
+    if (item.moduleKey && modules[item.moduleKey] === false) return false
+    return !item.permission || staff?.permissions?.includes(item.permission)
+  }
+
+  const effectiveShopMode = shopMode && modules.online_shop !== false
+
+  const modeEntries = effectiveShopMode
+    ? SHOP_ITEMS.map((item) => ({ type: 'item', ...item }))
+    : [
+        { type: 'item', ...SERVICE_HOME },
+        ...SERVICE_GROUPS.map((g) => ({ type: 'group', ...g, items: g.items.filter(hasPermission) })),
+        ...SERVICE_STANDALONE.map((item) => ({ type: 'item', ...item })),
+      ]
+  const settingsEntry = { type: 'item', ...SETTINGS_ITEM }
+
+  return [
+    ...modeEntries,
+    { type: 'item', to: '/clients', icon: BookUser, label: 'Клиенты' },
+    // No permission gate, unlike '/payroll' above — every staff member sees
+    // their own earnings regardless of role (a master has no "cash"
+    // permission and never reaches the owner-facing /payroll section, but
+    // still needs to see what they've personally earned).
+    { type: 'item', to: '/my-payroll', icon: Banknote, label: 'Моя зарплата' },
+    settingsEntry,
+  ].filter((e) => (e.type === 'item' ? hasPermission(e) : e.items.length > 0))
+}
diff --git a/production/web/src/lib/ErrorBoundary.jsx b/production/web/src/lib/ErrorBoundary.jsx
new file mode 100644
index 0000000..6ecab2d
--- /dev/null
+++ b/production/web/src/lib/ErrorBoundary.jsx
@@ -0,0 +1,36 @@
+import { Component } from 'react'
+
+// Class component is required here — React has no functional equivalent for
+// error boundaries yet. Without this, any uncaught render error (e.g. a null
+// API response feeding .map()) unmounts the entire app to a blank screen.
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Unhandled render error:', error, info)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: '40px', fontFamily: 'var(--font-body)', maxWidth: '480px', margin: '60px auto', textAlign: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', marginBottom: '12px' }}>Что-то пошло не так</h2>
+          <p style={{ color: 'var(--text-muted)', marginBottom: '20px' }}>
+            Страница не смогла отобразиться. Попробуйте обновить.
+          </p>
+          <button className="btn-primary" onClick={() => window.location.reload()}>
+            Обновить страницу
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
diff --git a/production/web/src/lib/api.js b/production/web/src/lib/api.js
new file mode 100644
index 0000000..70ba184
--- /dev/null
+++ b/production/web/src/lib/api.js
@@ -0,0 +1,797 @@
+// Thin fetch wrapper replacing what Glass CRM did via supabase.from(...).
+// Two backends: core (login only) and production (everything else) — see
+// architecture note in ../../README.md.
+
+const CORE_URL = import.meta.env.VITE_CORE_URL || 'http://localhost:18090'
+const PRODUCTION_URL = import.meta.env.VITE_PRODUCTION_URL || 'http://localhost:18091'
+
+const TOKEN_KEY = 'production_token'
+const STAFF_KEY = 'production_staff'
+
+export function getToken() {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function getStaff() {
+  const raw = localStorage.getItem(STAFF_KEY)
+  return raw ? JSON.parse(raw) : null
+}
+
+export function setSession(token, staff) {
+  localStorage.setItem(TOKEN_KEY, token)
+  localStorage.setItem(STAFF_KEY, JSON.stringify(staff))
+}
+
+export function clearSession() {
+  localStorage.removeItem(TOKEN_KEY)
+  localStorage.removeItem(STAFF_KEY)
+}
+
+class ApiError extends Error {
+  constructor(message, status) {
+    super(message)
+    this.status = status
+  }
+}
+
+async function request(baseUrl, path, options = {}) {
+  const token = getToken()
+  const headers = { ...(options.headers || {}) }
+  if (!(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json'
+  }
+  if (token) headers['Authorization'] = `Bearer ${token}`
+
+  const res = await fetch(`${baseUrl}${path}`, { ...options, headers })
+
+  if (res.status === 401) {
+    clearSession()
+    window.location.href = '/login'
+    throw new ApiError('unauthorized', 401)
+  }
+
+  const isJson = res.headers.get('content-type')?.includes('application/json')
+  const data = isJson ? await res.json().catch(() => null) : null
+
+  if (!res.ok) {
+    throw new ApiError(data?.error || `request failed: ${res.status}`, res.status)
+  }
+  return data
+}
+
+// --- core (auth only) ---
+
+export function login(email, password) {
+  return request(CORE_URL, '/api/auth/login', {
+    method: 'POST',
+    body: JSON.stringify({ email, password }),
+  })
+}
+
+// Управление сотрудниками — owner-only на бэкенде (core, not production;
+// staff accounts and roles live where auth itself lives).
+export const roles = {
+  list: () => request(CORE_URL, '/api/roles'),
+  create: (body) => request(CORE_URL, '/api/roles', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(CORE_URL, `/api/roles/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  delete: (id) => request(CORE_URL, `/api/roles/${id}`, { method: 'DELETE' }),
+}
+
+export const staff = {
+  list: () => request(CORE_URL, '/api/staff'),
+  // Any staff role — minimal fields (id/name/role), feeds master pickers.
+  listAssignable: () => request(CORE_URL, '/api/staff/assignable'),
+  create: (body) => request(CORE_URL, '/api/staff', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(CORE_URL, `/api/staff/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  resetPassword: (id, password) =>
+    request(CORE_URL, `/api/staff/${id}/reset-password`, { method: 'POST', body: JSON.stringify({ password }) }),
+}
+
+// Реестр модулей (core's internal/registry) — owner-only. restart/
+// setMaintenance actually reach the module itself (core -> module call,
+// not just a registry flag) — see core's own package doc for why that's
+// safe (short timeout, isolated per-module failure).
+export const modules = {
+  list: () => request(CORE_URL, '/api/modules'),
+  create: (body) => request(CORE_URL, '/api/modules', { method: 'POST', body: JSON.stringify(body) }),
+  update: (name, body) => request(CORE_URL, `/api/modules/${name}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  remove: (name) => request(CORE_URL, `/api/modules/${name}`, { method: 'DELETE' }),
+  restart: (name) => request(CORE_URL, `/api/modules/${name}/restart`, { method: 'POST' }),
+  setMaintenance: (name, enabled) =>
+    request(CORE_URL, `/api/modules/${name}/maintenance`, { method: 'POST', body: JSON.stringify({ enabled }) }),
+}
+
+// --- production ---
+
+export const clients = {
+  list: (filters = {}) => {
+    const params = typeof filters === 'string' ? { q: filters } : filters
+    const cleaned = Object.fromEntries(Object.entries(params).filter(([, v]) => v !== '' && v != null))
+    return request(PRODUCTION_URL, `/api/clients?${new URLSearchParams(cleaned).toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/clients/${id}`),
+  debt: (id) => request(PRODUCTION_URL, `/api/clients/${id}/debt`),
+  create: (body) => request(PRODUCTION_URL, '/api/clients', { method: 'POST', body: JSON.stringify(body) }),
+}
+
+// Клиентские уведомления (Фаза 11) — Telegram/SMS. history — outbox для
+// карточки клиента; createLink минтит одноразовый deep-link токен
+// (t.me/<bot>?start=<token>), который клиент открывает, чтобы привязать
+// tg_chat_id; test шлёт немедленное тестовое сообщение на доступный канал
+// (используется и как «проверить доставку» на карточке клиента, и как
+// ручная кнопка «уведомить» в модалке заказа).
+export const clientNotify = {
+  history: (clientId) => request(PRODUCTION_URL, `/api/clients/${clientId}/notifications`),
+  createLink: (clientId) => request(PRODUCTION_URL, `/api/clients/${clientId}/notify-link`, { method: 'POST' }),
+  updatePrefs: (clientId, body) =>
+    request(PRODUCTION_URL, `/api/clients/${clientId}/notify-prefs`, { method: 'PATCH', body: JSON.stringify(body) }),
+  test: (clientId) => request(PRODUCTION_URL, `/api/clients/${clientId}/test-notify`, { method: 'POST' }),
+}
+
+// Программа лояльности (Фаза 12) — баллы начисляются автоматически при
+// переводе заказа/партии в "Выдано" (проценты из settings), redeem/adjust —
+// ручные действия staff (owner/manager) с карточки клиента.
+export const loyalty = {
+  get: (clientId) => request(PRODUCTION_URL, `/api/clients/${clientId}/loyalty`),
+  redeem: (clientId, body) =>
+    request(PRODUCTION_URL, `/api/clients/${clientId}/loyalty/redeem`, { method: 'POST', body: JSON.stringify(body) }),
+  adjust: (clientId, body) =>
+    request(PRODUCTION_URL, `/api/clients/${clientId}/loyalty/adjust`, { method: 'POST', body: JSON.stringify(body) }),
+}
+
+// Призы лояльности (Фаза 18) — ручная запись "клиент выиграл X" на
+// карточке клиента, не тратит баллы. Открыто любой роли staff.
+export const prizes = {
+  list: (clientId) => request(PRODUCTION_URL, `/api/clients/${clientId}/prizes`),
+  add: (clientId, body) =>
+    request(PRODUCTION_URL, `/api/clients/${clientId}/prizes`, { method: 'POST', body: JSON.stringify(body) }),
+}
+
+// IMEI-автозаполнение (бренд/модель по IMEI при создании заявки).
+export const imei = {
+  lookup: (value) => request(PRODUCTION_URL, `/api/imei-lookup?imei=${encodeURIComponent(value)}`),
+}
+
+export const orders = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/orders?${params.toString()}`)
+  },
+  // Per-status counts + active repair/cartridge/on-site totals — feeds
+  // OrdersListPage's header summary bar. Server-aggregated (not counted
+  // from the already-fetched, LIMIT-500, filter-scoped `list` above) since
+  // that would both undercount past 500 orders and double-apply filters.
+  summary: () => request(PRODUCTION_URL, '/api/orders/summary'),
+  get: (id) => request(PRODUCTION_URL, `/api/orders/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/orders', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/orders/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  updateStatus: (id, status) =>
+    request(PRODUCTION_URL, `/api/orders/${id}/status`, { method: 'PATCH', body: JSON.stringify({ status }) }),
+  // "approve" applies discount_pending_price to final_price, "reject"
+  // discards it — see order.Handler.DiscountApproval's own doc comment.
+  // Permission-gated server-side (approve_discounts).
+  discountApproval: (id, action) =>
+    request(PRODUCTION_URL, `/api/orders/${id}/discount-approval`, { method: 'PATCH', body: JSON.stringify({ action }) }),
+  // Soft delete — gated by the "delete_orders" permission server-side (see
+  // order.Handler.Delete's own doc comment).
+  delete: (id) => request(PRODUCTION_URL, `/api/orders/${id}`, { method: 'DELETE' }),
+  addComment: (id, body, isPublic) =>
+    request(PRODUCTION_URL, `/api/orders/${id}/comments`, {
+      method: 'POST',
+      body: JSON.stringify({ body, is_public: isPublic }),
+    }),
+  addPhoto: (id, file, isPublic) => {
+    const form = new FormData()
+    form.append('file', file)
+    form.append('is_public', String(isPublic))
+    return request(PRODUCTION_URL, `/api/orders/${id}/photos`, { method: 'POST', body: form })
+  },
+  // 'invoice' -> счёт, 'act' -> акт, 'receipt' -> квитанция о приёме. Same
+  // auth-header problem as photos — <a href> can't carry the Bearer token —
+  // so open() fetches the PDF as a blob and opens it in a new tab
+  // (Content-Disposition: inline lets the browser's own PDF viewer render
+  // it there instead of forcing a download).
+  openDocument: async (id, kind) => {
+    const token = getToken()
+    const path = `/api/orders/${id}/${kind}.pdf`
+    const res = await fetch(`${PRODUCTION_URL}${path}`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) throw new ApiError('failed to load document', res.status)
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    window.open(url, '_blank')
+    setTimeout(() => URL.revokeObjectURL(url), 60000)
+  },
+  listParts: (id) => request(PRODUCTION_URL, `/api/orders/${id}/parts`),
+  // POST reserves stock against the order (see backend's
+  // inventory.ReserveForOrder) rather than consuming it immediately — the
+  // actual draw-down happens when the order is marked "completed".
+  consumeParts: (id, body) => request(PRODUCTION_URL, `/api/orders/${id}/parts`, { method: 'POST', body: JSON.stringify(body) }),
+  // Undoes a still-open reservation line (not yet resolved into a real
+  // consumption) — distinct from the generic reverseMovement below, which
+  // only accepts an already-consumed movement.
+  releasePart: (id, movementId) => request(PRODUCTION_URL, `/api/orders/${id}/parts/${movementId}`, { method: 'DELETE' }),
+  // Phase 10 — AI photo diagnosis. Reads the order's latest uploaded photo
+  // server-side; never writes to the order.
+  diagnose: (id) => request(PRODUCTION_URL, `/api/orders/${id}/diagnose`, { method: 'POST' }),
+}
+
+// Кастомные статусы канбана (internal/orderstatus) — key is permanent
+// once created, only label/color/sort_order are ever patched.
+export const orderStatuses = {
+  list: () => request(PRODUCTION_URL, '/api/order-statuses'),
+  create: (body) => request(PRODUCTION_URL, '/api/order-statuses', { method: 'POST', body: JSON.stringify(body) }),
+  update: (key, body) => request(PRODUCTION_URL, `/api/order-statuses/${key}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  remove: (key) => request(PRODUCTION_URL, `/api/order-statuses/${key}`, { method: 'DELETE' }),
+}
+
+export const cartridges = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/cartridge-batches?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/cartridge-batches/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/cartridge-batches', { method: 'POST', body: JSON.stringify(body) }),
+  updateStatus: (id, status) =>
+    request(PRODUCTION_URL, `/api/cartridge-batches/${id}/status`, { method: 'PATCH', body: JSON.stringify({ status }) }),
+  // Master assignment only — mirrors orders.update's rationale: bookkeeping,
+  // not a milestone, so the backend does not log a timeline event for it.
+  updateBatch: (id, body) =>
+    request(PRODUCTION_URL, `/api/cartridge-batches/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  addComment: (id, body, isPublic) =>
+    request(PRODUCTION_URL, `/api/cartridge-batches/${id}/comments`, {
+      method: 'POST',
+      body: JSON.stringify({ body, is_public: isPublic }),
+    }),
+  addPhoto: (id, file, isPublic) => {
+    const form = new FormData()
+    form.append('file', file)
+    form.append('is_public', String(isPublic))
+    return request(PRODUCTION_URL, `/api/cartridge-batches/${id}/photos`, { method: 'POST', body: form })
+  },
+  // Same blob-fetch-and-open pattern as orders.openDocument — see the note
+  // there for why <a href> can't be used directly.
+  openDocument: async (id, kind) => {
+    const token = getToken()
+    const path = kind === 'act' ? `/api/cartridge-batches/${id}/act.pdf` : `/api/cartridge-batches/${id}/invoice.pdf`
+    const res = await fetch(`${PRODUCTION_URL}${path}`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) throw new ApiError('failed to load document', res.status)
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    window.open(url, '_blank')
+    setTimeout(() => URL.revokeObjectURL(url), 60000)
+  },
+  // Updates a single cartridge independently of its batch (COALESCE
+  // semantics server-side — every field here is optional).
+  updateItem: (itemId, body) =>
+    request(PRODUCTION_URL, `/api/cartridge-items/${itemId}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  // Soft hint for the intake form: up to 5 past matches for this
+  // client+model+color, most recent first. Never used to silently
+  // pre-fill — callers surface it as a clickable suggestion.
+  suggest: (params) => {
+    const query = new URLSearchParams(params)
+    return request(PRODUCTION_URL, `/api/cartridge-suggest?${query.toString()}`)
+  },
+  listParts: (id) => request(PRODUCTION_URL, `/api/cartridge-batches/${id}/parts`),
+  consumeParts: (id, body) => request(PRODUCTION_URL, `/api/cartridge-batches/${id}/parts`, { method: 'POST', body: JSON.stringify(body) }),
+  // QR-label recurring-item identity (see internal/cartridge/recurring.go).
+  // printLabel is idempotent — a re-print of an already-labeled cartridge
+  // returns the same code rather than minting a new identity.
+  printLabel: (itemId) => request(PRODUCTION_URL, `/api/cartridge-items/${itemId}/print-label`, { method: 'POST' }),
+  scanByCode: (code) => request(PRODUCTION_URL, `/api/cartridge-recurring-items/by-code/${encodeURIComponent(code)}`),
+  // <img src> can't carry the Authorization header — same fetch-as-blob
+  // workaround as fetchFileBlobUrl, kept local since this isn't a
+  // MinIO-backed file.
+  qrCodeBlobUrl: async (recurringItemId) => {
+    const token = getToken()
+    const res = await fetch(`${PRODUCTION_URL}/api/cartridge-recurring-items/${recurringItemId}/qr.png`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) throw new ApiError('failed to load QR code', res.status)
+    const blob = await res.blob()
+    return URL.createObjectURL(blob)
+  },
+}
+
+// QR-label recurring-item identity for printers (internal/order/printerqr.go)
+// — same shape as cartridges' printLabel/scanByCode/qrCodeBlobUrl above.
+export const printers = {
+  printLabel: (orderId) => request(PRODUCTION_URL, `/api/orders/${orderId}/print-printer-label`, { method: 'POST' }),
+  scanByCode: (code) => request(PRODUCTION_URL, `/api/printer-recurring-items/by-code/${encodeURIComponent(code)}`),
+  qrCodeBlobUrl: async (recurringItemId) => {
+    const token = getToken()
+    const res = await fetch(`${PRODUCTION_URL}/api/printer-recurring-items/${recurringItemId}/qr.png`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+    if (!res.ok) throw new ApiError('failed to load QR code', res.status)
+    const blob = await res.blob()
+    return URL.createObjectURL(blob)
+  },
+}
+
+// Склад/инвентарь (Фаза 5) — каталог запчастей, партии со своей
+// себестоимостью (FIFO-списание), серийные единицы для is_serialized частей.
+// reverseMovement — общий для parts/orders/cartridges, поэтому не внутри
+// parts (движение может относиться к любой из карточек).
+export const parts = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/parts?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/parts/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/parts', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/parts/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  receive: (id, body) => request(PRODUCTION_URL, `/api/parts/${id}/receive`, { method: 'POST', body: JSON.stringify(body) }),
+  adjust: (id, body) => request(PRODUCTION_URL, `/api/parts/${id}/adjust`, { method: 'POST', body: JSON.stringify(body) }),
+  // KPI tiles at the top of Склад (internal/inventory.Summary).
+  summary: () => request(PRODUCTION_URL, '/api/parts/summary'),
+  // Distinct shelf-location strings already in use — powers the location filter.
+  locations: () => request(PRODUCTION_URL, '/api/parts/locations'),
+  // Find-or-create — idempotent, same shape as cartridges.printLabel.
+  generateBarcode: (id) => request(PRODUCTION_URL, `/api/parts/${id}/barcode`, { method: 'POST' }),
+  // Bulk-create parts from a supplier CSV price list — existing SKUs are
+  // skipped, not overwritten (internal/inventory.ImportCSV).
+  importCsv: (file) => {
+    const form = new FormData()
+    form.append('file', file)
+    return request(PRODUCTION_URL, '/api/parts/import-csv', { method: 'POST', body: form })
+  },
+}
+
+// Инвентаризация (internal/inventory/stocktake.go) — a count session:
+// create snapshots expected_qty per part, setLineCount records what staff
+// actually found, complete posts one adjustment per discrepant
+// non-serialized part.
+export const stocktakes = {
+  list: () => request(PRODUCTION_URL, '/api/stocktakes'),
+  create: (body) => request(PRODUCTION_URL, '/api/stocktakes', { method: 'POST', body: JSON.stringify(body) }),
+  get: (id) => request(PRODUCTION_URL, `/api/stocktakes/${id}`),
+  setLineCount: (id, lineId, countedQty) =>
+    request(PRODUCTION_URL, `/api/stocktakes/${id}/lines/${lineId}`, { method: 'PATCH', body: JSON.stringify({ counted_qty: countedQty }) }),
+  complete: (id) => request(PRODUCTION_URL, `/api/stocktakes/${id}/complete`, { method: 'POST' }),
+}
+
+export const serviceCategories = {
+  list: () => request(PRODUCTION_URL, '/api/service-categories'),
+  create: (body) => request(PRODUCTION_URL, '/api/service-categories', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/service-categories/${id}`, { method: 'DELETE' }),
+}
+
+export const services = {
+  list: (categoryId = '') => request(PRODUCTION_URL, `/api/services?category_id=${encodeURIComponent(categoryId)}`),
+  create: (body) => request(PRODUCTION_URL, '/api/services', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/services/${id}`, { method: 'DELETE' }),
+}
+
+export const orderServices = {
+  list: (orderId) => request(PRODUCTION_URL, `/api/orders/${orderId}/services`),
+  add: (orderId, body) => request(PRODUCTION_URL, `/api/orders/${orderId}/services`, { method: 'POST', body: JSON.stringify(body) }),
+  update: (itemId, body) => request(PRODUCTION_URL, `/api/order-services/${itemId}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  remove: (itemId) => request(PRODUCTION_URL, `/api/order-services/${itemId}`, { method: 'DELETE' }),
+}
+
+export const sales = {
+  list: () => request(PRODUCTION_URL, '/api/sales'),
+  create: (body) => request(PRODUCTION_URL, '/api/sales', { method: 'POST', body: JSON.stringify(body) }),
+}
+
+export const partCategories = {
+  list: () => request(PRODUCTION_URL, '/api/part-categories'),
+  create: (body) => request(PRODUCTION_URL, '/api/part-categories', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/part-categories/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  remove: (id) => request(PRODUCTION_URL, `/api/part-categories/${id}`, { method: 'DELETE' }),
+}
+
+// Поставщики (Фаза 14) — тонкий контакт-лист, привязывается к приходу
+// (stock_batches.supplier_id) и как источник по умолчанию для запчасти
+// (parts.default_supplier_id), используется в reorder-предложениях.
+export const suppliers = {
+  list: (q = '') => request(PRODUCTION_URL, `/api/suppliers?q=${encodeURIComponent(q)}`),
+  get: (id) => request(PRODUCTION_URL, `/api/suppliers/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/suppliers', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/suppliers/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+}
+
+// Purchase Orders / GRN (Фаза 15) — draft -> ordered -> partially_received/
+// received (или cancelled из draft/ordered/partially_received). receive()
+// — сама приёмка (GRN), создаёт реальные stock_batches через ту же логику,
+// что и ручной приход на складе (Фаза 5/14).
+export const purchaseOrders = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/purchase-orders?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/purchase-orders/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/purchase-orders', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/purchase-orders/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  updateStatus: (id, status) =>
+    request(PRODUCTION_URL, `/api/purchase-orders/${id}/status`, { method: 'PATCH', body: JSON.stringify({ status }) }),
+  receive: (id, body) => request(PRODUCTION_URL, `/api/purchase-orders/${id}/receive`, { method: 'POST', body: JSON.stringify(body) }),
+}
+
+// AI-приёмка (Фаза 6) — свободный текст -> поля формы заявки. Никогда не
+// создаёт/не ищет клиента и не создаёт заказ сама — только предзаполняет
+// поля формы, staff проверяет перед сохранением как при ручном вводе.
+// RMA (Фаза 16) — возврат брака поставщику. draft -> sent (списывает
+// реальный остаток) -> resolved (refund/replacement/credit) или cancelled
+// (восстанавливает остаток, если уже был списан).
+export const rma = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/rma?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/rma/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/rma', { method: 'POST', body: JSON.stringify(body) }),
+  updateStatus: (id, body) => request(PRODUCTION_URL, `/api/rma/${id}/status`, { method: 'PATCH', body: JSON.stringify(body) }),
+}
+
+// Внутренняя доставка (internal/delivery) — courier assignment + delivery
+// status tracking for existing orders.
+export const deliveries = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/deliveries?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/deliveries/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/deliveries', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/deliveries/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  updateStatus: (id, status) =>
+    request(PRODUCTION_URL, `/api/deliveries/${id}/status`, { method: 'PATCH', body: JSON.stringify({ status }) }),
+  // blob is the signature-pad canvas exported as a PNG (see SignaturePad.jsx).
+  uploadSignature: (id, blob) => {
+    const form = new FormData()
+    form.append('file', blob, 'signature.png')
+    return request(PRODUCTION_URL, `/api/deliveries/${id}/signature`, { method: 'POST', body: form })
+  },
+}
+
+export const aiIntake = {
+  extract: (text) => request(PRODUCTION_URL, '/api/ai-intake', { method: 'POST', body: JSON.stringify({ text }) }),
+}
+
+// Касса (Фаза 7) — ручной денежный леджер: нал/карта на месте, безнал-счёт
+// юрлицам, расходы, зарплата. Отдельно от online-store продаж (internal/sale,
+// свой платёжный рельс через T-Bank) и от прихода на склад (internal/inventory,
+// себестоимость запчастей не создаёт кассовую запись автоматически).
+export const cash = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/cash-transactions?${params.toString()}`)
+  },
+  create: (body) => request(PRODUCTION_URL, '/api/cash-transactions', { method: 'POST', body: JSON.stringify(body) }),
+  summary: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/cash-summary?${params.toString()}`)
+  },
+  listForOrder: (id) => request(PRODUCTION_URL, `/api/orders/${id}/cash-transactions`),
+  listForCartridgeBatch: (id) => request(PRODUCTION_URL, `/api/cartridge-batches/${id}/cash-transactions`),
+  transfer: (body) => request(PRODUCTION_URL, '/api/cash-transfers', { method: 'POST', body: JSON.stringify(body) }),
+  confirm: (id) => request(PRODUCTION_URL, `/api/cash-transactions/${id}/confirm`, { method: 'POST' }),
+  expectedReady: () => request(PRODUCTION_URL, '/api/cash-expected-ready'),
+}
+
+// Именованные кассы, каждая может держать один или несколько типов денег
+// одновременно (types: ['cash','card',...]) — internal/cash's registers.go.
+// Balances/pending ride along on every list() row (computed server-side,
+// one figure per accepted type), not a separate summary call.
+export const registers = {
+  list: () => request(PRODUCTION_URL, '/api/registers'),
+  create: (body) => request(PRODUCTION_URL, '/api/registers', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/registers/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  archive: (id, isArchived) => request(PRODUCTION_URL, `/api/registers/${id}`, { method: 'PATCH', body: JSON.stringify({ is_archived: isArchived }) }),
+}
+
+// Зарплата (internal/payroll) — ставка за смену + % от прибыли заявки +
+// поштучная ставка за картриджи, снапшотится в "начисление" за период,
+// выплата проводится через кассу (см. cash.RecordPayroll на бэкенде).
+export const payroll = {
+  listRates: () => request(PRODUCTION_URL, '/api/payroll/rates'),
+  upsertRate: (staffId, body) => request(PRODUCTION_URL, `/api/payroll/rates/${staffId}`, { method: 'PUT', body: JSON.stringify(body) }),
+  listCartridgeRates: () => request(PRODUCTION_URL, '/api/payroll/cartridge-rates'),
+  upsertCartridgeRate: (modelId, rate) =>
+    request(PRODUCTION_URL, `/api/payroll/cartridge-rates/${modelId}`, { method: 'PUT', body: JSON.stringify({ rate }) }),
+  listRuns: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/payroll/runs?${params.toString()}`)
+  },
+  getRun: (id) => request(PRODUCTION_URL, `/api/payroll/runs/${id}`),
+  createRun: (body) => request(PRODUCTION_URL, '/api/payroll/runs', { method: 'POST', body: JSON.stringify(body) }),
+  deleteRun: (id) => request(PRODUCTION_URL, `/api/payroll/runs/${id}`, { method: 'DELETE' }),
+  addAdjustment: (runId, body) => request(PRODUCTION_URL, `/api/payroll/runs/${runId}/adjustments`, { method: 'POST', body: JSON.stringify(body) }),
+  deleteAdjustment: (id) => request(PRODUCTION_URL, `/api/payroll/adjustments/${id}`, { method: 'DELETE' }),
+  payRun: (id, registerId, method) => request(PRODUCTION_URL, `/api/payroll/runs/${id}/pay`, { method: 'POST', body: JSON.stringify({ register_id: registerId, method }) }),
+  summary: (staffId) => request(PRODUCTION_URL, `/api/payroll/summary/${staffId}`),
+  mySummary: () => request(PRODUCTION_URL, '/api/payroll/my-summary'),
+}
+
+// Смены — daily "are you working today?" attendance (internal/shifts).
+export const shifts = {
+  mine: (date) => request(PRODUCTION_URL, `/api/shifts/mine?date=${date}`),
+  answer: (body) => request(PRODUCTION_URL, '/api/shifts', { method: 'POST', body: JSON.stringify(body) }),
+  answerFor: (staffId, body) => request(PRODUCTION_URL, `/api/shifts/${staffId}`, { method: 'POST', body: JSON.stringify(body) }),
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/shifts?${params.toString()}`)
+  },
+}
+
+export function reverseMovement(movementId) {
+  return request(PRODUCTION_URL, `/api/stock-movements/${movementId}/reverse`, { method: 'POST' })
+}
+
+export function track(token) {
+  return request(PRODUCTION_URL, `/api/track/${token}`)
+}
+
+// Unauthenticated business-identity subset for public pages (privacy
+// policy, booking-form consent text) — see settings.PublicInfo's own doc
+// comment for why this is a separate, narrower endpoint than api.settings.
+export const public_ = {
+  businessInfo: () => request(PRODUCTION_URL, '/api/public/business-info'),
+}
+export { public_ as public }
+
+// Онлайн-запись на приём (Фаза 13) — create — публичная, вызывается с
+// неавторизованной страницы /book (запрос без токена, request() просто не
+// добавит заголовок). list/confirm/decline — staff-facing очередь заявок.
+// Trade-in / выкуп техники (Фаза 17) — pending -> completed (payout: касса
+// cash/card, или баллы лояльности) или rejected.
+export const tradeIns = {
+  list: (filters = {}) => {
+    const params = new URLSearchParams(filters)
+    return request(PRODUCTION_URL, `/api/trade-ins?${params.toString()}`)
+  },
+  get: (id) => request(PRODUCTION_URL, `/api/trade-ins/${id}`),
+  create: (body) => request(PRODUCTION_URL, '/api/trade-ins', { method: 'POST', body: JSON.stringify(body) }),
+  complete: (id) => request(PRODUCTION_URL, `/api/trade-ins/${id}/complete`, { method: 'POST' }),
+  reject: (id, note) => request(PRODUCTION_URL, `/api/trade-ins/${id}/reject`, { method: 'POST', body: JSON.stringify({ note }) }),
+  addPhoto: (id, file) => {
+    const form = new FormData()
+    form.append('file', file)
+    return request(PRODUCTION_URL, `/api/trade-ins/${id}/photos`, { method: 'POST', body: form })
+  },
+  listPhotos: (id) => request(PRODUCTION_URL, `/api/trade-ins/${id}/photos`),
+  listForSale: (id, salePrice) =>
+    request(PRODUCTION_URL, `/api/trade-ins/${id}/list-for-sale`, { method: 'POST', body: JSON.stringify({ sale_price: salePrice }) }),
+  // Read-only AI suggestion (Gemini + Google Search grounding) — not tied
+  // to a trade-in id since it's called from the draft form before one
+  // exists yet.
+  estimate: (body) => request(PRODUCTION_URL, '/api/trade-ins/estimate', { method: 'POST', body: JSON.stringify(body) }),
+}
+
+// PC-конструктор (internal/pcbuilder) — компоненты каталога и проверка
+// совместимости. pcComponents/pcBuildCheckPublic are unauthenticated
+// (public /pc-builder page, and the site repo linking here); pcBuildCheck
+// is the staff-authenticated counterpart the CRM's own /pc-configurator
+// page uses (same handler server-side, just the CRM's own rate limit).
+export const pcComponents = {
+  list: (type) => request(PRODUCTION_URL, `/api/public/pc-components?type=${encodeURIComponent(type)}`),
+}
+// multiSelection: {"ram": [{id, qty}], "storage": [{id, qty}]} — the two
+// multi-quantity slots, see pcbuilder.checkInput's own doc comment.
+export const pcBuildCheckPublic = (selection, multiSelection) =>
+  request(PRODUCTION_URL, '/api/public/pc-builds/check', { method: 'POST', body: JSON.stringify({ selection, multi_selection: multiSelection }) })
+export const pcBuildCheck = (selection, multiSelection) =>
+  request(PRODUCTION_URL, '/api/pc-builds/check', { method: 'POST', body: JSON.stringify({ selection, multi_selection: multiSelection }) })
+// Manual trigger for internal/scraper's external_components refresh (catalogsPerm) —
+// same refresh scraper.StartPeriodic also runs unattended every 6h.
+export const pcBuilderRefreshExternal = () =>
+  request(PRODUCTION_URL, '/api/pc-builder/refresh-external', { method: 'POST' })
+
+// Popular-build quick-select (internal/pcbuilder/presets.go) — list is any
+// staff, create/update/delete catalogsPerm-gated on the backend.
+export const pcBuildPresets = {
+  list: () => request(PRODUCTION_URL, '/api/pc-build-presets'),
+  create: (body) => request(PRODUCTION_URL, '/api/pc-build-presets', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/pc-build-presets/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/pc-build-presets/${id}`, { method: 'DELETE' }),
+}
+
+export const bookings = {
+  create: (body) => request(PRODUCTION_URL, '/api/bookings', { method: 'POST', body: JSON.stringify(body) }),
+  // Staff-authenticated counterpart of create — see booking.CreateByStaff's
+  // own doc comment (on-site repair requests, or staff taking a call
+  // directly instead of pointing the caller at /book).
+  staffCreate: (body) => request(PRODUCTION_URL, '/api/bookings/staff-create', { method: 'POST', body: JSON.stringify(body) }),
+  list: (status = '') => request(PRODUCTION_URL, `/api/bookings?status=${encodeURIComponent(status)}`),
+  confirm: (id) => request(PRODUCTION_URL, `/api/bookings/${id}/confirm`, { method: 'POST' }),
+  decline: (id, note) => request(PRODUCTION_URL, `/api/bookings/${id}/decline`, { method: 'POST', body: JSON.stringify({ note }) }),
+}
+
+// Задачи — internal staff to-do board, every role sees it (no permission
+// gate server-side, see main.go).
+export const tasks = {
+  list: () => request(PRODUCTION_URL, '/api/tasks'),
+  create: (body) => request(PRODUCTION_URL, '/api/tasks', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  updateStatus: (id, status) => request(PRODUCTION_URL, `/api/tasks/${id}/status`, { method: 'PATCH', body: JSON.stringify({ status }) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/tasks/${id}`, { method: 'DELETE' }),
+}
+
+// Аналитика (Фаза 9) — owner/manager only на бэкенде (тот же RequireRole,
+// что и касса). from/to — YYYY-MM-DD или пусто (без границы), interval —
+// day/week/month.
+export const analytics = {
+  revenue: (params = {}) => request(PRODUCTION_URL, `/api/analytics/revenue?${new URLSearchParams(params)}`),
+  operations: (params = {}) => request(PRODUCTION_URL, `/api/analytics/operations?${new URLSearchParams(params)}`),
+  inventory: (params = {}) => request(PRODUCTION_URL, `/api/analytics/inventory?${new URLSearchParams(params)}`),
+  aiSummary: (params = {}) => request(PRODUCTION_URL, `/api/analytics/ai-summary?${new URLSearchParams(params)}`),
+  // Магазин (Фаза 9) — revenue/sales count + top categories/parts scoped to
+  // POS retail checkouts only, kept as its own endpoint rather than a filter
+  // on /analytics/revenue so it never double-counts against the service
+  // side's aggregate.
+  shop: (params = {}) => request(PRODUCTION_URL, `/api/analytics/shop?${new URLSearchParams(params)}`),
+  dashboard: () => request(PRODUCTION_URL, '/api/analytics/dashboard'),
+}
+
+// Настройки — owner-only на бэкенде. Реквизиты бизнеса, Gemini-ключ,
+// телеграм-бот, IMEI-ключ, редактируемые через UI вместо .env.
+export const settings = {
+  get: () => request(PRODUCTION_URL, '/api/settings'),
+  update: (body) => request(PRODUCTION_URL, '/api/settings', { method: 'PUT', body: JSON.stringify(body) }),
+}
+
+// Кастомные поля приёмки — owner добавляет свои вопросы к форме заявки
+// (пломба цела? с зарядкой? и т.п.) без правки кода. list() — активные,
+// для формы заявки, доступен всем ролям; listAll() — включая архивные,
+// owner-only, для страницы управления.
+export const customFields = {
+  list: () => request(PRODUCTION_URL, '/api/order-fields'),
+  listAll: () => request(PRODUCTION_URL, '/api/order-fields/all'),
+  create: (body) => request(PRODUCTION_URL, '/api/order-fields', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/order-fields/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+}
+
+// Редактор блоков Счёта/Акта — owner-only. update() всегда шлёт полный
+// список блоков (не частичный патч, в отличие от orders/settings) —
+// редактор на фронте всегда держит весь текущий список в состоянии.
+export const documentTemplates = {
+  get: (kind) => request(PRODUCTION_URL, `/api/document-templates/${kind}`),
+  update: (kind, blocks) => request(PRODUCTION_URL, `/api/document-templates/${kind}`, { method: 'PUT', body: JSON.stringify(blocks) }),
+}
+
+// EventSource (used by lib/realtime.js for Kanban push updates) can't set
+// an Authorization header either — same constraint as fetchFileBlobUrl
+// below, different workaround since EventSource can't do a manual fetch +
+// blob. The token rides in the query string instead, validated the same
+// way as the header everywhere else (see internal/realtime's package doc
+// for the tradeoff this accepts).
+export function realtimeUrl() {
+  const token = getToken()
+  return `${PRODUCTION_URL}/api/events?token=${encodeURIComponent(token || '')}`
+}
+
+// <img src> can't send an Authorization header, so photos are fetched as
+// blobs and turned into object URLs. Caller must URL.revokeObjectURL() when
+// done (PhotoThumb below handles this).
+export async function fetchFileBlobUrl(key) {
+  const token = getToken()
+  const res = await fetch(`${PRODUCTION_URL}/api/files/${key}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  })
+  if (!res.ok) throw new ApiError('failed to load file', res.status)
+  const blob = await res.blob()
+  return URL.createObjectURL(blob)
+}
+
+// Справочники устройств (Фаза 18) — группы (owner-only, несёт явный
+// префикс номера заказа, см. internal/ordernum) и бренды (любой staff
+// может добавить, это просто метка). Оба фида питают выбор в форме
+// создания заявки.
+// Owner-toggleable business sections (Магазин/Справочники/Картриджи) —
+// separate from `modules` above (core's external service registry, which is
+// where the *actual* online store lives — see internal/registry). GET is
+// open to any staff (nav needs it every login), PATCH is settingsPerm-gated
+// on the backend.
+export const featureModules = {
+  list: () => request(PRODUCTION_URL, '/api/feature-modules'),
+  set: (key, enabled) =>
+    request(PRODUCTION_URL, `/api/feature-modules/${key}`, { method: 'PATCH', body: JSON.stringify({ enabled }) }),
+}
+
+export const deviceGroups = {
+  list: () => request(PRODUCTION_URL, '/api/device-groups'),
+  create: (body) => request(PRODUCTION_URL, '/api/device-groups', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/device-groups/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/device-groups/${id}`, { method: 'DELETE' }),
+}
+
+export const deviceBrands = {
+  list: () => request(PRODUCTION_URL, '/api/device-brands'),
+  create: (body) => request(PRODUCTION_URL, '/api/device-brands', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/device-brands/${id}`, { method: 'DELETE' }),
+  recentModels: (brandId) => request(PRODUCTION_URL, `/api/device-models/recent?brand_id=${encodeURIComponent(brandId)}`),
+}
+
+// Quick-pick problem descriptions shown as buttons under "Описание
+// проблемы" — same flat, any-staff-can-add shape as deviceBrands above.
+export const commonFaults = {
+  list: () => request(PRODUCTION_URL, '/api/common-faults'),
+  create: (label) => request(PRODUCTION_URL, '/api/common-faults', { method: 'POST', body: JSON.stringify({ label }) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/common-faults/${id}`, { method: 'DELETE' }),
+}
+
+// Generic owner-defined catalogs (internal/gencatalog) — separate from
+// deviceGroups/deviceBrands above, which stay tied to order-number
+// prefixing. types = structural (catalogsPerm on write), entries = a plain
+// growable list under a type.
+// Generic raw-part -> finished-part conversion recipes (internal/manufacture)
+// — separate from catalogTypes above. produce() runs one conversion.
+export const productionRecipes = {
+  list: () => request(PRODUCTION_URL, '/api/production-recipes'),
+  create: (body) => request(PRODUCTION_URL, '/api/production-recipes', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/production-recipes/${id}`, { method: 'DELETE' }),
+  produce: (id, body) => request(PRODUCTION_URL, `/api/production-recipes/${id}/produce`, { method: 'POST', body: JSON.stringify(body) }),
+  // 404 (thrown as ApiError) means this cartridge model has no linked
+  // recipe — the normal case for most models, callers should catch and
+  // fall back to the plain no-toner-tracking flow, not treat it as a
+  // real error.
+  getByCartridgeModel: (modelId) => request(PRODUCTION_URL, `/api/cartridge-models/${modelId}/recipe`),
+}
+
+// In-app notification inbox (internal/notification) — separate from
+// clientNotify above, which is outbound-to-client SMS/Telegram history, not
+// a staff-facing inbox. action() runs an actionable notification's
+// registered executor (e.g. "Подтвердить производство") and marks it
+// resolved; markRead() just dismisses it without running anything.
+export const notifications = {
+  list: () => request(PRODUCTION_URL, '/api/notifications'),
+  markRead: (id) => request(PRODUCTION_URL, `/api/notifications/${id}/read`, { method: 'POST' }),
+  action: (id) => request(PRODUCTION_URL, `/api/notifications/${id}/action`, { method: 'POST' }),
+  dismiss: (id) => request(PRODUCTION_URL, `/api/notifications/${id}`, { method: 'DELETE' }),
+}
+
+export const catalogTypes = {
+  list: () => request(PRODUCTION_URL, '/api/catalog-types'),
+  create: (body) => request(PRODUCTION_URL, '/api/catalog-types', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/catalog-types/${id}`, { method: 'DELETE' }),
+}
+
+export const catalogEntries = {
+  list: (catalogTypeId) => request(PRODUCTION_URL, `/api/catalog-entries?catalog_type_id=${encodeURIComponent(catalogTypeId)}`),
+  create: (body) => request(PRODUCTION_URL, '/api/catalog-entries', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/catalog-entries/${id}`, { method: 'DELETE' }),
+}
+
+export const cartridgeBrands = {
+  list: () => request(PRODUCTION_URL, '/api/cartridge-brands'),
+  create: (body) => request(PRODUCTION_URL, '/api/cartridge-brands', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/cartridge-brands/${id}`, { method: 'DELETE' }),
+}
+
+export const cartridgeModels = {
+  list: (brandId) => request(PRODUCTION_URL, `/api/cartridge-models?brand_id=${encodeURIComponent(brandId)}`),
+  create: (body) => request(PRODUCTION_URL, '/api/cartridge-models', { method: 'POST', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/cartridge-models/${id}`, { method: 'DELETE' }),
+}
+
+// Конструктор сайта (internal/sitecontent) — settingsPerm-gated CRUD behind
+// Настройки → Конструктор сайта. page defaults to 'home' server-side too;
+// passed explicitly here only so a future second page doesn't need this
+// file touched.
+export const siteBlocks = {
+  list: (page = 'home') => request(PRODUCTION_URL, `/api/site-blocks?page=${encodeURIComponent(page)}`),
+  create: (body) => request(PRODUCTION_URL, '/api/site-blocks', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => request(PRODUCTION_URL, `/api/site-blocks/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  delete: (id) => request(PRODUCTION_URL, `/api/site-blocks/${id}`, { method: 'DELETE' }),
+  reorder: (page, ids) => request(PRODUCTION_URL, '/api/site-blocks/reorder', { method: 'POST', body: JSON.stringify({ page, ids }) }),
+}
+
+// "Что нового" — reads backend/CHANGELOG.md, see internal/changelog's own
+// package doc for why it's a file, not a table.
+export const changelog = {
+  list: () => request(PRODUCTION_URL, '/api/changelog'),
+}
+
+// Deploy-agent proxy (internal/selfupdate) — owner-only on the backend.
+// apply() can take minutes (git pull + docker compose build + up) — request()
+// has no client-side timeout of its own (plain fetch, waits for whatever the
+// server sends), which is exactly what's needed here.
+export const selfupdate = {
+  check: () => request(PRODUCTION_URL, '/api/selfupdate/check'),
+  apply: () => request(PRODUCTION_URL, '/api/selfupdate/apply', { method: 'POST' }),
+  history: () => request(PRODUCTION_URL, '/api/selfupdate/history'),
+}
diff --git a/production/web/src/lib/checklistTemplates.js b/production/web/src/lib/checklistTemplates.js
new file mode 100644
index 0000000..965f427
--- /dev/null
+++ b/production/web/src/lib/checklistTemplates.js
@@ -0,0 +1,140 @@
+// Device-type-keyed checklist templates — frontend constant, no DB-backed
+// template system needed for something this small (see
+// migrations/026_tradein_checklist_photos.sql's doc comment, the backend
+// still treats `checklist` as opaque JSONB). Matched by substring against
+// whatever the staff typed into "Тип техники", same loose matching
+// device_type already gets elsewhere in this app (no device_groups FK
+// requirement here).
+//
+// Structure mirrors standard trade-in/resale inspection checklists
+// (screen/battery/ports/etc. per device class): `checks` are functional
+// items with a three-way answer (исправно/неисправно/не проверялось) plus
+// an optional note; `completeness` is what's included in the box — plain
+// yes/no.
+const PHONE_TEMPLATE = {
+  checks: [
+    // Identity/lock checks first — the highest-risk items to skip: a
+    // blacklisted or account-locked phone is often stolen and exposes the
+    // business to buying (and later reselling) a device the real owner can
+    // remotely brick or reclaim. IMEI blacklist ≠ Find My/FRP — a factory
+    // reset clears the device but never clears an iCloud/Google account
+    // lock, so both need their own check.
+    { key: 'imei_blacklist', label: 'IMEI не в чёрном списке (не числится украденным/утерянным, нет кредитных обязательств)' },
+    { key: 'account_lock', label: 'Активационная блокировка снята (Find My / iCloud, FRP на Android)' },
+    { key: 'carrier_lock', label: 'Не залочен под оператора' },
+    { key: 'factory_reset', label: 'Сброшен до заводских настроек, аккаунты отвязаны' },
+    { key: 'screen', label: 'Экран (трещины, царапины, битые пиксели, отклик сенсора)' },
+    { key: 'body', label: 'Корпус (вмятины, погнутость)' },
+    { key: 'battery', label: 'Аккумулятор (держит заряд, нет просадки)' },
+    { key: 'camera', label: 'Камеры (фронтальная и основная, фокусировка)' },
+    { key: 'buttons', label: 'Кнопки (питание, громкость, домой)' },
+    { key: 'speaker', label: 'Динамик и микрофон' },
+    { key: 'charging_port', label: 'Разъём зарядки' },
+    { key: 'biometric', label: 'Face ID / Touch ID / сканер отпечатка' },
+    { key: 'connectivity', label: 'Wi-Fi / Bluetooth / сотовая связь' },
+    { key: 'sim_tray', label: 'Лоток SIM' },
+    { key: 'water', label: 'Индикатор попадания влаги' },
+    { key: 'burn_in', label: 'Прожиг экрана (для OLED)' },
+  ],
+  completeness: [
+    { key: 'box', label: 'Коробка' },
+    { key: 'charger', label: 'Зарядное устройство' },
+    { key: 'cable', label: 'Кабель' },
+    { key: 'docs', label: 'Документы / чек' },
+    { key: 'case', label: 'Чехол / защитные аксессуары' },
+  ],
+}
+
+const LAPTOP_TEMPLATE = {
+  checks: [
+    { key: 'account_lock', label: 'Активационная блокировка снята (Find My Mac / учётная запись Windows)' },
+    { key: 'factory_reset', label: 'Данные стёрты, учётные записи отвязаны, нет пароля BIOS/EFI' },
+    { key: 'screen', label: 'Экран (трещины, битые пиксели, петли)' },
+    { key: 'keyboard', label: 'Клавиатура (все клавиши)' },
+    { key: 'trackpad', label: 'Тачпад' },
+    { key: 'battery', label: 'Аккумулятор (ёмкость, износ)' },
+    { key: 'ports', label: 'Порты (USB, HDMI, зарядка)' },
+    { key: 'speakers', label: 'Динамики и микрофон' },
+    { key: 'webcam', label: 'Веб-камера' },
+    { key: 'connectivity', label: 'Wi-Fi / Bluetooth' },
+    { key: 'cooling', label: 'Охлаждение (посторонний шум)' },
+    { key: 'body', label: 'Состояние корпуса' },
+    { key: 'boots', label: 'Загружается ОС' },
+  ],
+  completeness: [
+    { key: 'charger', label: 'Зарядное устройство' },
+    { key: 'box', label: 'Коробка' },
+    { key: 'docs', label: 'Документы / чек' },
+    { key: 'bag', label: 'Чехол / сумка' },
+  ],
+}
+
+const TABLET_TEMPLATE = {
+  checks: [
+    ...PHONE_TEMPLATE.checks,
+    { key: 'stylus_support', label: 'Поддержка стилуса (если применимо)' },
+  ],
+  completeness: [...PHONE_TEMPLATE.completeness, { key: 'stylus', label: 'Стилус' }],
+}
+
+const PC_TEMPLATE = {
+  checks: [
+    { key: 'factory_reset', label: 'Данные стёрты, нет пароля BIOS/UEFI' },
+    { key: 'boots', label: 'Включается и загружается ОС' },
+    { key: 'ram', label: 'Оперативная память' },
+    { key: 'storage', label: 'Накопитель' },
+    { key: 'ports', label: 'Порты' },
+    { key: 'cooling', label: 'Охлаждение (посторонний шум)' },
+    { key: 'video_audio', label: 'Видео / звук' },
+    { key: 'body', label: 'Состояние корпуса' },
+  ],
+  completeness: [
+    { key: 'cables', label: 'Кабели питания' },
+    { key: 'docs', label: 'Документы / чек' },
+  ],
+}
+
+export const CHECKLIST_TEMPLATES = {
+  'телефон': PHONE_TEMPLATE,
+  'смартфон': PHONE_TEMPLATE,
+  'ноутбук': LAPTOP_TEMPLATE,
+  'планшет': TABLET_TEMPLATE,
+  'компьютер': PC_TEMPLATE,
+  'пк': PC_TEMPLATE,
+}
+
+const DEFAULT_TEMPLATE = {
+  checks: [{ key: 'appearance', label: 'Внешний вид' }, { key: 'function', label: 'Работоспособность' }],
+  completeness: [{ key: 'complete', label: 'Комплектность' }],
+}
+
+export function templateForDeviceType(deviceType) {
+  const lower = (deviceType || '').toLowerCase()
+  const key = Object.keys(CHECKLIST_TEMPLATES).find((k) => lower.includes(k))
+  return CHECKLIST_TEMPLATES[key] || DEFAULT_TEMPLATE
+}
+
+// Builds the initial answer state for a template — every check starts
+// 'unchecked' (staff hasn't looked at it yet), every completeness item
+// starts absent (false) rather than assumed present.
+export function initChecklistState(template) {
+  return {
+    checks: template.checks.map((c) => ({ key: c.key, label: c.label, status: 'unchecked', note: '' })),
+    completeness: template.completeness.map((c) => ({ key: c.key, label: c.label, present: false })),
+  }
+}
+
+export const CHECK_STATUS_LABELS = { ok: 'Исправно', defect: 'Неисправно', unchecked: 'Не проверялось' }
+
+// Drives the "Провести осмотр" button's label in OrderModal — a plain
+// unchanged-template checklist reads as "not started" (button stays a
+// neutral call to action), any answered check flips it to a progress
+// readout so staff can tell at a glance whether the inspection actually
+// happened without opening the modal.
+export function checklistSummary(checklist) {
+  if (!checklist) return null
+  const total = checklist.checks.length
+  const checked = checklist.checks.filter((c) => c.status !== 'unchecked').length
+  const defects = checklist.checks.filter((c) => c.status === 'defect').length
+  return { total, checked, defects, started: checked > 0 }
+}
diff --git a/production/web/src/lib/color.js b/production/web/src/lib/color.js
new file mode 100644
index 0000000..573f4d2
--- /dev/null
+++ b/production/web/src/lib/color.js
@@ -0,0 +1,80 @@
+// Small color-math helpers backing the accent-color contrast fix (see
+// useAccentColor.js / useShopAccentColor.js). The bug this exists to fix:
+// a user-picked accent hex was used unchanged both as a background AND as
+// text color, and as button text against a fixed near-black
+// --color-text-inverse — fine for the default acid-lime-on-dark-text
+// pairing DESIGN.md specifies, but unreadable once the hue/lightness is
+// anything else (a bright lime as text-on-white, or black text on a
+// medium-dark violet button).
+
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16)
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }
+}
+
+function rgbToHex({ r, g, b }) {
+  const c = (v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, '0')
+  return `#${c(r)}${c(g)}${c(b)}`
+}
+
+function rgbToHsl({ r, g, b }) {
+  r /= 255; g /= 255; b /= 255
+  const max = Math.max(r, g, b), min = Math.min(r, g, b)
+  let h = 0, s = 0
+  const l = (max + min) / 2
+  const d = max - min
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1))
+    switch (max) {
+      case r: h = ((g - b) / d) % 6; break
+      case g: h = (b - r) / d + 2; break
+      default: h = (r - g) / d + 4
+    }
+    h *= 60
+    if (h < 0) h += 360
+  }
+  return { h, s, l }
+}
+
+function hslToRgb({ h, s, l }) {
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0, g = 0, b = 0
+  if (h < 60) [r, g, b] = [c, x, 0]
+  else if (h < 120) [r, g, b] = [x, c, 0]
+  else if (h < 180) [r, g, b] = [0, c, x]
+  else if (h < 240) [r, g, b] = [0, x, c]
+  else if (h < 300) [r, g, b] = [x, 0, c]
+  else [r, g, b] = [c, 0, x]
+  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }
+}
+
+// WCAG relative luminance — https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+function relativeLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex)
+  const lin = (v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+}
+
+// Text color for content sitting directly on a background of `hex` (e.g.
+// .btn-primary) — near-black or near-white, whichever contrasts more.
+export function readableTextOn(hex) {
+  return relativeLuminance(hex) > 0.42 ? '#08090a' : '#ffffff'
+}
+
+// Same hue/saturation as `hex`, but with lightness clamped into a range
+// that stays legible as small TEXT on the given theme's surface — light
+// theme needs it dark enough to read on a near-white surface, dark theme
+// needs it light enough to read on a near-black one. Hue/saturation are
+// preserved so it still reads as "the chosen accent", not a random color.
+export function accentForegroundOn(hex, theme) {
+  const hsl = rgbToHsl(hexToRgb(hex))
+  const l = theme === 'dark'
+    ? Math.max(hsl.l, 0.6)
+    : Math.min(hsl.l, 0.42)
+  return rgbToHex(hslToRgb({ h: hsl.h, s: Math.max(hsl.s, 0.35), l }))
+}
diff --git a/production/web/src/lib/contactLinks.js b/production/web/src/lib/contactLinks.js
new file mode 100644
index 0000000..abb5b4f
--- /dev/null
+++ b/production/web/src/lib/contactLinks.js
@@ -0,0 +1,24 @@
+// Best-effort wa.me/t.me deep links from a free-typed phone field — clients
+// are entered as plain text (see client.createBody), no stored E.164
+// normalization, so this just strips everything but digits and assumes a
+// leading 8 is the Russian trunk prefix for 7 (same assumption Russian
+// phone UIs commonly make; a number already starting 7/9xx-with-10-digits
+// passes through as-is). Good enough for a one-click "open a chat" link,
+// not a validator — a wrong guess just opens a chat with the wrong contact,
+// caught immediately, not a silent bad state anywhere.
+export function digitsOnlyPhone(phone) {
+  let digits = (phone || '').replace(/\D/g, '')
+  if (digits.length === 11 && digits.startsWith('8')) digits = '7' + digits.slice(1)
+  if (digits.length === 10) digits = '7' + digits
+  return digits
+}
+
+export function whatsappLink(phone) {
+  const digits = digitsOnlyPhone(phone)
+  return digits ? `https://wa.me/${digits}` : null
+}
+
+export function telegramLink(phone) {
+  const digits = digitsOnlyPhone(phone)
+  return digits ? `https://t.me/+${digits}` : null
+}
diff --git a/production/web/src/lib/dateRange.js b/production/web/src/lib/dateRange.js
new file mode 100644
index 0000000..9a1e089
--- /dev/null
+++ b/production/web/src/lib/dateRange.js
@@ -0,0 +1,38 @@
+// Every backend period/date-range endpoint (internal/analytics' revenue/
+// operations/inventory/shop, internal/payroll's CreateRun) treats its "to"
+// boundary as exclusive — `created_at < to`. A plain `<input type="date">`
+// picks the LAST day the user wants included, so the value sent over the
+// wire has to be one day past it, or that day silently drops out of the
+// range (an order completed on the picked end date would vanish from a
+// payroll run or an analytics chart). Parsed/formatted in UTC so this
+// never shifts by a day depending on the browser's local timezone.
+export function exclusiveEndDate(dateStr) {
+  if (!dateStr) return dateStr
+  const d = new Date(dateStr + 'T00:00:00Z')
+  d.setUTCDate(d.getUTCDate() + 1)
+  return d.toISOString().slice(0, 10)
+}
+
+// The inverse of exclusiveEndDate — for displaying a period_to that was
+// already stored pre-shifted (e.g. payroll_runs.period_to, written via
+// exclusiveEndDate at CreateRun time). Rendering that value as-is shows the
+// user a last day one day past what they actually picked; this undoes the
+// shift so the displayed range matches what they selected.
+export function inclusiveEndDate(dateStr) {
+  if (!dateStr) return dateStr
+  const d = new Date(dateStr + 'T00:00:00Z')
+  d.setUTCDate(d.getUTCDate() - 1)
+  return d.toISOString().slice(0, 10)
+}
+
+// The staff member's own local calendar day — deliberately NOT UTC, unlike
+// exclusiveEndDate above. "Are you working today?" (useShiftPrompt) and the
+// shift log mean the day on the wall clock the staff member is standing in
+// front of, not a UTC-normalized date that could roll over hours before or
+// after their actual midnight.
+export function localDateString(date = new Date()) {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
diff --git a/production/web/src/lib/realtime.js b/production/web/src/lib/realtime.js
new file mode 100644
index 0000000..49e5814
--- /dev/null
+++ b/production/web/src/lib/realtime.js
@@ -0,0 +1,40 @@
+import { realtimeUrl } from './api'
+
+// One shared EventSource per browser tab, not one per hook — Kanban's order
+// board and cartridge board (useOrders.js/useCartridgeBatches.js) each want
+// "something changed" pushes, but should share a single SSE connection
+// rather than opening a second stream to the same endpoint. Ref-counted so
+// the connection closes once nothing is listening (e.g. after logout) and
+// reopens on the next subscribe (e.g. after a fresh login sets a new token).
+let source = null
+let refCount = 0
+const listeners = new Set()
+
+function ensureConnected() {
+  if (source) return
+  source = new EventSource(realtimeUrl())
+  source.onmessage = (e) => {
+    for (const fn of listeners) fn(e.data)
+  }
+  // No custom reconnect/backoff: EventSource retries on its own after a
+  // transient drop. A stale/invalid token just means the retries keep
+  // failing quietly — cheap enough (one attempt every few seconds) to leave
+  // to the browser rather than hand-rolling backoff for a staff-only,
+  // best-effort push channel that a fallback poll already backstops.
+}
+
+// subscribe(onEvent) calls onEvent(topic) for every server-pushed event
+// while at least one caller is subscribed. Returns an unsubscribe function.
+export function subscribeRealtime(onEvent) {
+  ensureConnected()
+  refCount++
+  listeners.add(onEvent)
+  return () => {
+    listeners.delete(onEvent)
+    refCount--
+    if (refCount <= 0 && source) {
+      source.close()
+      source = null
+    }
+  }
+}
diff --git a/production/web/src/lib/warranty.js b/production/web/src/lib/warranty.js
new file mode 100644
index 0000000..a35d0a4
--- /dev/null
+++ b/production/web/src/lib/warranty.js
@@ -0,0 +1,64 @@
+// Shared "how much warranty is left" formatting — used on the public
+// tracking page and the staff-facing client card, both gated by the
+// caller on status === 'completed' (warranty only makes sense once the
+// device has actually been handed back).
+
+function pluralDays(n) {
+  const mod100 = n % 100
+  if (mod100 >= 11 && mod100 <= 14) return 'дней'
+  const mod10 = n % 10
+  if (mod10 === 1) return 'день'
+  if (mod10 >= 2 && mod10 <= 4) return 'дня'
+  return 'дней'
+}
+
+// Whole days between today and warrantyUntil (negative once past). Shared
+// by formatWarranty/isWarrantyExpired/warrantyStatus below so the "what
+// counts as today" clock-reset (setHours(0,0,0,0)) only lives in one place.
+function daysUntil(warrantyUntil) {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const until = new Date(warrantyUntil)
+  return Math.round((until - today) / 86400000)
+}
+
+// Returns null when there's nothing to show, otherwise a plain-language
+// string: "Осталось N дней (до DD.MM.YYYY)" while active, "Истекает
+// сегодня" on the last day, "Истекла DD.MM.YYYY" once past.
+export function formatWarranty(warrantyUntil) {
+  if (!warrantyUntil) return null
+  const dateStr = new Date(warrantyUntil).toLocaleDateString('ru-RU')
+  const days = daysUntil(warrantyUntil)
+
+  if (days < 0) return `Истекла ${dateStr}`
+  if (days === 0) return `Истекает сегодня (${dateStr})`
+  return `Осталось ${days} ${pluralDays(days)} (до ${dateStr})`
+}
+
+export function isWarrantyExpired(warrantyUntil) {
+  if (!warrantyUntil) return false
+  return daysUntil(warrantyUntil) < 0
+}
+
+// Traffic-light window: a warranty inside this many days of expiring reads
+// as "expiring" (yellow) rather than "active" (green) — long enough to be
+// an actionable heads-up, short enough not to spend most of a typical
+// 30-90 day warranty looking like it's about to lapse.
+export const WARRANTY_EXPIRING_SOON_DAYS = 7
+
+// null when there's no warranty date at all (caller decides whether to
+// render anything); otherwise one of 'active' | 'expiring' | 'expired' —
+// see WarrantyBadge.jsx (orders/) for the colored-dot rendering of this.
+export function warrantyStatus(warrantyUntil) {
+  if (!warrantyUntil) return null
+  const days = daysUntil(warrantyUntil)
+  if (days < 0) return 'expired'
+  if (days <= WARRANTY_EXPIRING_SOON_DAYS) return 'expiring'
+  return 'active'
+}
+
+export const WARRANTY_STATUS_COLORS = {
+  active: 'var(--color-success)',
+  expiring: 'var(--color-warn)',
+  expired: 'var(--color-danger)',
+}
diff --git a/production/web/src/main.jsx b/production/web/src/main.jsx
new file mode 100644
index 0000000..89f91e5
--- /dev/null
+++ b/production/web/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/production/web/src/manufacture/ProductionRecipesPage.jsx b/production/web/src/manufacture/ProductionRecipesPage.jsx
new file mode 100644
index 0000000..f47e017
--- /dev/null
+++ b/production/web/src/manufacture/ProductionRecipesPage.jsx
@@ -0,0 +1,170 @@
+import { useState } from 'react'
+import { Plus, Trash2, Factory } from 'lucide-react'
+import * as api from '../lib/api'
+import { useProductionRecipes } from './useProductionRecipes'
+import { useParts } from '../inventory/useParts'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Owner-only page (gated by catalogsPerm, same tier as device/cartridge
+// catalog management — see main.go) for internal/manufacture's generic
+// raw-part -> finished-part conversion recipes. Not toner/cartridge
+// specific despite that being the motivating example — any two existing
+// bulk (non-serialized) parts can be linked.
+
+function CreateRecipeForm({ parts, onCreated }) {
+  const [form, setForm] = useState({ name: '', raw_part_id: '', finished_part_id: '', ratio: 1, trigger_mode: 'confirm' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.productionRecipes.create(form)
+      setForm({ name: '', raw_part_id: '', finished_part_id: '', ratio: 1, trigger_mode: 'confirm' })
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="glass-panel" style={{ padding: '18px', marginBottom: '18px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 100px', gap: '10px', alignItems: 'flex-end' }}>
+      <div>
+        <label style={labelStyle}>Название рецепта *</label>
+        <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Тонер 1010" style={inputStyle} required />
+      </div>
+      <div>
+        <label style={labelStyle}>Сырьё (списывается) *</label>
+        <select value={form.raw_part_id} onChange={(e) => setForm((f) => ({ ...f, raw_part_id: e.target.value }))} style={inputStyle} required>
+          <option value="">— выбрать —</option>
+          {parts.map((p) => <option key={p.id} value={p.id}>{p.name} ({p.unit})</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Готовое (приходуется) *</label>
+        <select value={form.finished_part_id} onChange={(e) => setForm((f) => ({ ...f, finished_part_id: e.target.value }))} style={inputStyle} required>
+          <option value="">— выбрать —</option>
+          {parts.map((p) => <option key={p.id} value={p.id}>{p.name} ({p.unit})</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Пропорция</label>
+        <input
+          type="number" step="0.01" min="0.01"
+          value={form.ratio}
+          onChange={(e) => setForm((f) => ({ ...f, ratio: Number(e.target.value) }))}
+          style={inputStyle}
+          title="Сколько сырья списывается за 1 единицу готового"
+        />
+      </div>
+      <div style={{ gridColumn: '1 / -1', display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Создать рецепт
+        </button>
+        {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)' }}>{error}</span>}
+      </div>
+    </form>
+  )
+}
+
+function ProduceForm({ recipe, onProduced }) {
+  const [qty, setQty] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState(null)
+
+  const submit = async (e) => {
+    e.preventDefault()
+    const n = Number(qty)
+    if (!n || n <= 0) return
+    setBusy(true)
+    setError('')
+    setResult(null)
+    try {
+      const res = await api.productionRecipes.produce(recipe.id, { qty: n })
+      setResult(res)
+      setQty('')
+      onProduced()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap' }}>
+      <input
+        type="number" min="1" placeholder={`Кол-во, ${recipe.finished_part_unit}`}
+        value={qty} onChange={(e) => setQty(e.target.value)}
+        style={{ ...inputStyle, width: '140px', fontSize: '0.82rem', padding: '7px 10px' }}
+      />
+      <button type="submit" disabled={busy} className="btn-primary" style={{ padding: '7px 12px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '5px' }}>
+        <Factory size={13} /> Произвести
+      </button>
+      {result && <span style={{ flexBasis: '100%', fontSize: '0.76rem', color: 'var(--accent-green)' }}>Готово: −{result.raw_qty_consumed} сырья, +{result.finished_qty_produced} готового</span>}
+      {error && <span style={{ flexBasis: '100%', fontSize: '0.76rem', color: 'var(--accent-red)' }}>{error}</span>}
+    </form>
+  )
+}
+
+const ProductionRecipesPage = () => {
+  const { recipes, loading, reload } = useProductionRecipes()
+  const { parts } = useParts('', false)
+  const [deleteError, setDeleteError] = useState('')
+
+  const remove = async (id) => {
+    if (!window.confirm('Удалить рецепт? Уже произведённое не отменяется.')) return
+    setDeleteError('')
+    try {
+      await api.productionRecipes.delete(id)
+      reload()
+    } catch (err) {
+      setDeleteError(err.message)
+    }
+  }
+
+  return (
+    <div>
+      <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem', marginBottom: '10px' }}>Производство</h1>
+      <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)', marginBottom: '18px' }}>
+        Рецепты конвертации своих запчастей в другие свои запчасти — например сырьевой тонер в расфасованный под конкретную модель.
+        Не только тонер: любые две позиции склада.
+      </p>
+
+      <CreateRecipeForm parts={parts} onCreated={reload} />
+
+      {deleteError && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginBottom: '10px' }}>{deleteError}</p>}
+
+      {loading ? (
+        <p style={{ color: 'var(--color-text-muted)' }}>Загрузка...</p>
+      ) : recipes.length === 0 ? (
+        <p style={{ color: 'var(--color-text-muted)' }}>Рецептов пока нет</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {recipes.map((r) => (
+            <div key={r.id} style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '14px' }}>
+              <div style={{ flex: '1 1 260px', minWidth: '220px' }}>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{r.name}</p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)' }}>
+                  {r.raw_part_name} → {r.finished_part_name} (пропорция {r.ratio}:1)
+                  {r.trigger_mode === 'auto' && <span style={{ marginLeft: '6px' }}>· авто</span>}
+                </p>
+              </div>
+              <ProduceForm recipe={r} onProduced={reload} />
+              <button type="button" onClick={() => remove(r.id)} style={{ background: 'none', color: 'var(--accent-red)', padding: '6px' }} title="Удалить рецепт">
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProductionRecipesPage
diff --git a/production/web/src/manufacture/useProductionRecipes.js b/production/web/src/manufacture/useProductionRecipes.js
new file mode 100644
index 0000000..861b779
--- /dev/null
+++ b/production/web/src/manufacture/useProductionRecipes.js
@@ -0,0 +1,28 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import * as api from '../lib/api'
+
+export function useProductionRecipes() {
+  const [recipes, setRecipes] = useState([])
+  const [loading, setLoading] = useState(true)
+  // Only the first fetch should show the page's "Загрузка..." state — a
+  // later reload() (after produce/create/delete) must update the list
+  // quietly. Flipping loading back to true on every reload made the page's
+  // loading guard unmount the whole list on every action, including an
+  // in-flight ProduceForm's just-set success message — same bug already
+  // found and fixed this way in modules/useModules.js.
+  const loadedOnce = useRef(false)
+
+  const load = useCallback(async () => {
+    if (!loadedOnce.current) setLoading(true)
+    try {
+      setRecipes(await api.productionRecipes.list())
+    } finally {
+      loadedOnce.current = true
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { (async () => { await load() })() }, [load])
+
+  return { recipes, loading, reload: load }
+}
diff --git a/production/web/src/modules/ModulesPage.jsx b/production/web/src/modules/ModulesPage.jsx
new file mode 100644
index 0000000..4b153a6
--- /dev/null
+++ b/production/web/src/modules/ModulesPage.jsx
@@ -0,0 +1,309 @@
+import { useState } from 'react'
+import { Plus, X, RotateCw, ShieldOff, Shield, Trash2, Copy, Check, ExternalLink, Pencil } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useModules } from './useModules'
+
+// Owner-only page (gated by Sidebar's roles; the backend enforces the same
+// restriction independently via ownerOnly on every /api/modules* route).
+// Restart/maintenance actually reach the module itself, not just a registry
+// flag — see core's internal/registry package doc for the safety reasoning
+// (short timeout, isolated per-module failure, core never touches Docker).
+const STATUS_LABELS = { healthy: 'Работает', unhealthy: 'Не отвечает', maintenance: 'Обслуживание', unknown: 'Неизвестно' }
+const STATUS_COLORS = {
+  healthy: { bg: 'rgba(39, 166, 68, 0.14)', fg: '#27a644' },
+  unhealthy: { bg: 'rgba(235, 87, 87, 0.14)', fg: '#eb5757' },
+  maintenance: { bg: 'rgba(201, 138, 63, 0.16)', fg: '#c98a3f' },
+  unknown: { bg: 'rgba(255, 255, 255, 0.05)', fg: 'var(--text-muted)' },
+}
+
+function StatusBadge({ status }) {
+  const colors = STATUS_COLORS[status] || STATUS_COLORS.unknown
+  return (
+    <span style={{ fontSize: '0.74rem', fontWeight: 510, padding: '2px 9px', borderRadius: '50px', background: colors.bg, color: colors.fg }}>
+      {STATUS_LABELS[status] || status}
+    </span>
+  )
+}
+
+function TokenField({ label, value }) {
+  const [copied, setCopied] = useState(false)
+  const copy = () => {
+    navigator.clipboard.writeText(value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+  return (
+    <div>
+      <label style={labelStyle}>{label}</label>
+      <div style={{ display: 'flex', gap: '6px' }}>
+        <input readOnly value={value} style={{ ...inputStyle, fontFamily: 'monospace', fontSize: '0.78rem' }} onFocus={(e) => e.target.select()} />
+        <button type="button" onClick={copy} className="btn-outline" style={{ padding: '0 12px' }} aria-label="Скопировать">
+          {copied ? <Check size={14} /> : <Copy size={14} />}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function CreateModuleForm({ onClose, onCreated }) {
+  const [form, setForm] = useState({ name: '', base_url: '', health_path: '/health', nav_label: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [created, setCreated] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      const body = {
+        name: form.name,
+        base_url: form.base_url,
+        health_path: form.health_path || undefined,
+        metadata: form.nav_label ? { nav_label: form.nav_label } : undefined,
+      }
+      const result = await api.modules.create(body)
+      setCreated(result)
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (created) {
+    return (
+      <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Модуль зарегистрирован</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        <p style={{ fontSize: '0.82rem', color: 'var(--accent-red)' }}>
+          Оба значения показываются только сейчас — скопируйте их в .env модуля. Закрыв это окно, посмотреть их снова будет нельзя.
+        </p>
+        <TokenField label="MODULE_TOKEN" value={created.token} />
+        <TokenField label="CORE_CONTROL_TOKEN" value={created.control_token} />
+        <button type="button" onClick={onClose} className="btn-primary" style={{ padding: '11px' }}>Готово</button>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Новый модуль</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+      </div>
+      <div>
+        <label style={labelStyle}>Имя (уникальное, как в MODULE_NAME) *</label>
+        <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required />
+      </div>
+      <div>
+        <label style={labelStyle}>Base URL (внутренний адрес в docker-сети) *</label>
+        <input value={form.base_url} onChange={(e) => setForm((f) => ({ ...f, base_url: e.target.value }))} placeholder="http://имя-сервиса:3000" style={{ ...inputStyle, width: '100%' }} required />
+      </div>
+      <div>
+        <label style={labelStyle}>Health path</label>
+        <input value={form.health_path} onChange={(e) => setForm((f) => ({ ...f, health_path: e.target.value }))} style={{ ...inputStyle, width: '100%' }} />
+      </div>
+      <div>
+        <label style={labelStyle}>Название для отображения</label>
+        <input value={form.nav_label} onChange={(e) => setForm((f) => ({ ...f, nav_label: e.target.value }))} style={{ ...inputStyle, width: '100%' }} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+        {saving ? 'Регистрируем...' : 'Зарегистрировать'}
+      </button>
+    </form>
+  )
+}
+
+// public_url is the human-facing address (opens in a new tab) — separate
+// from base_url, which is the internal docker-network address used for
+// health checks/restart and would 404/refuse-to-connect from a browser.
+// Editable inline since it's the one field on an already-registered module
+// that's expected to change (a domain gets picked after registration, not
+// before — see core's migrations/005_modules_public_url.sql).
+function PublicURLField({ module, onChanged }) {
+  const [editing, setEditing] = useState(false)
+  const [value, setValue] = useState(module.public_url || '')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.modules.update(module.name, { public_url: value.trim() })
+      setEditing(false)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (editing) {
+    return (
+      <div style={{ display: 'flex', gap: '6px', alignItems: 'center', marginTop: '4px', flexWrap: 'wrap' }}>
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="https://..."
+          style={{ ...inputStyle, fontSize: '0.78rem', padding: '5px 8px', width: '220px' }}
+          autoFocus
+        />
+        <button type="button" onClick={handleSave} disabled={saving} className="btn-outline" style={{ padding: '4px 10px', fontSize: '0.76rem' }}>
+          {saving ? '...' : 'Сохранить'}
+        </button>
+        <button
+          type="button"
+          onClick={() => { setEditing(false); setValue(module.public_url || ''); setError('') }}
+          style={{ background: 'none', color: 'var(--text-muted)', padding: '4px' }}
+        >
+          <X size={14} />
+        </button>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.74rem', width: '100%' }}>{error}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '4px' }}>
+      {module.public_url ? (
+        <a
+          href={module.public_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="btn-outline"
+          style={{ padding: '5px 10px', fontSize: '0.76rem', display: 'flex', alignItems: 'center', gap: '5px', textDecoration: 'none' }}
+        >
+          <ExternalLink size={12} /> Перейти
+        </a>
+      ) : (
+        <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>Публичный URL не указан</p>
+      )}
+      <button type="button" onClick={() => setEditing(true)} aria-label="Изменить публичный URL" title="Изменить публичный URL" style={{ background: 'none', color: 'var(--text-muted)', padding: '4px' }}>
+        <Pencil size={12} />
+      </button>
+    </div>
+  )
+}
+
+function ModuleRow({ module, onChanged }) {
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const handleRestart = async () => {
+    if (!window.confirm(`Перезапустить «${module.name}»? Модуль будет недоступен несколько секунд.`)) return
+    setBusy(true)
+    setError('')
+    try {
+      await api.modules.restart(module.name)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleToggleMaintenance = async () => {
+    const enabling = module.status !== 'maintenance'
+    if (enabling && !window.confirm(`Перевести «${module.name}» в режим обслуживания? Модуль перестанет отвечать на все запросы, кроме /health.`)) return
+    setBusy(true)
+    setError('')
+    try {
+      await api.modules.setMaintenance(module.name, enabling)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!window.confirm(`Удалить регистрацию «${module.name}» из реестра? Сам модуль продолжит работать, но core перестанет его отслеживать, и restart/обслуживание отсюда станут недоступны.`)) return
+    setBusy(true)
+    setError('')
+    try {
+      await api.modules.remove(module.name)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px' }}>
+      <div style={{ flex: '1 1 220px', minWidth: '180px' }}>
+        <p style={{ fontWeight: 510, fontSize: '0.92rem', display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {module.metadata?.nav_label || module.name}
+          <StatusBadge status={module.status} />
+        </p>
+        <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{module.base_url}</p>
+        <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>
+          {module.last_heartbeat_at ? `Последний heartbeat: ${new Date(module.last_heartbeat_at).toLocaleString('ru-RU')}` : 'Heartbeat ещё не получен'}
+        </p>
+        <PublicURLField module={module} onChanged={onChanged} />
+      </div>
+      <button type="button" onClick={handleRestart} disabled={busy} className="btn-outline" style={{ padding: '7px 12px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '5px' }}>
+        <RotateCw size={13} /> Перезапустить
+      </button>
+      <button
+        type="button"
+        onClick={handleToggleMaintenance}
+        disabled={busy}
+        className="btn-outline"
+        style={{ padding: '7px 12px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '5px' }}
+      >
+        {module.status === 'maintenance' ? <><Shield size={13} /> Включить</> : <><ShieldOff size={13} /> Обслуживание</>}
+      </button>
+      <button type="button" onClick={handleDelete} disabled={busy} className="btn-outline" style={{ padding: '7px' }} aria-label="Удалить" title="Удалить регистрацию">
+        <Trash2 size={14} />
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+const ModulesPage = () => {
+  const { moduleList, loading, error, refetch } = useModules()
+  const [showCreate, setShowCreate] = useState(false)
+
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (error && moduleList.length === 0) return <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Модули</h1>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Модуль
+        </button>
+      </div>
+
+      <div className="glass-panel" style={{ overflow: 'hidden' }}>
+        {moduleList.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Модули не зарегистрированы</p>}
+        {moduleList.map((m) => (
+          <ModuleRow key={m.id} module={m} onChanged={refetch} />
+        ))}
+      </div>
+
+      {showCreate && (
+        <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={() => setShowCreate(false)}>
+          <div className="glass-panel modal-panel" style={{ width: '100%', maxWidth: '420px' }} onClick={(e) => e.stopPropagation()}>
+            <CreateModuleForm onClose={() => { setShowCreate(false); refetch() }} onCreated={refetch} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ModulesPage
diff --git a/production/web/src/modules/useModules.js b/production/web/src/modules/useModules.js
new file mode 100644
index 0000000..b8f4eb6
--- /dev/null
+++ b/production/web/src/modules/useModules.js
@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import * as api from '../lib/api'
+
+export function useModules() {
+  const [moduleList, setModuleList] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  // Only the very first fetch should show the page's full "Загрузка..."
+  // state — a later refetch() (after restart/maintenance/create) must
+  // update the list quietly. Flipping loading back to true on every
+  // refetch made the page's own `if (loading) return <p>...</p>` guard
+  // unmount the whole tree on every action, including an open create-module
+  // modal mid-way through showing its one-time tokens — confirmed live via
+  // Playwright: the token screen vanished back to a blank form the instant
+  // the post-create refetch fired.
+  const loadedOnce = useRef(false)
+
+  const fetchModules = useCallback(async () => {
+    if (!loadedOnce.current) setLoading(true)
+    try {
+      setModuleList(await api.modules.list())
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      loadedOnce.current = true
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => {
+      await fetchModules()
+    })()
+  }, [fetchModules])
+
+  return { moduleList, loading, error, refetch: fetchModules }
+}
diff --git a/production/web/src/orderfields/OrderFieldsPage.jsx b/production/web/src/orderfields/OrderFieldsPage.jsx
new file mode 100644
index 0000000..c5ca3d6
--- /dev/null
+++ b/production/web/src/orderfields/OrderFieldsPage.jsx
@@ -0,0 +1,231 @@
+import { useState } from 'react'
+import { Plus, X, ArrowUp, ArrowDown } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useOrderFields } from './useOrderFields'
+import { useCatalogTypes } from '../catalogs/useGenCatalogs'
+
+// Owner-only page (gated by Sidebar's roles; the backend enforces the same
+// restriction independently via ownerOnly on every /api/order-fields*
+// route except the plain GET every role needs for the intake form itself).
+const TYPE_LABELS = { text: 'Текст', number: 'Число', select: 'Список', checkbox: 'Флажок' }
+
+function CreateFieldForm({ onClose, onCreated }) {
+  const [label, setLabel] = useState('')
+  const [fieldType, setFieldType] = useState('text')
+  const [optionsSource, setOptionsSource] = useState('list') // 'list' | 'catalog' — select fields only
+  const [optionsText, setOptionsText] = useState('')
+  const [catalogTypeId, setCatalogTypeId] = useState('')
+  const [required, setRequired] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { types: catalogTypes, loading: catalogTypesLoading } = useCatalogTypes()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (fieldType === 'select' && optionsSource === 'catalog' && !catalogTypeId) {
+      setError('Выберите справочник')
+      return
+    }
+    setSaving(true)
+    setError('')
+    try {
+      const useCatalog = fieldType === 'select' && optionsSource === 'catalog'
+      const options = useCatalog ? [] : optionsText.split('\n').map((s) => s.trim()).filter(Boolean)
+      await api.customFields.create({
+        label, field_type: fieldType, options, required,
+        catalog_type_id: useCatalog ? catalogTypeId : undefined,
+      })
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <form onClick={(e) => e.stopPropagation()} onSubmit={handleSubmit} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Новое поле приёмки</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        <div>
+          <label style={labelStyle}>Название вопроса *</label>
+          <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Пломба цела?" style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Тип</label>
+          <select value={fieldType} onChange={(e) => setFieldType(e.target.value)} style={{ ...inputStyle, width: '100%' }}>
+            <option value="text">Текст</option>
+            <option value="number">Число</option>
+            <option value="select">Список</option>
+            <option value="checkbox">Флажок (да/нет)</option>
+          </select>
+        </div>
+        {fieldType === 'select' && (
+          <>
+            <div>
+              <label style={labelStyle}>Источник вариантов</label>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <button
+                  type="button"
+                  onClick={() => setOptionsSource('list')}
+                  className={optionsSource === 'list' ? 'btn-primary' : 'btn-outline'}
+                  style={{ flex: 1, padding: '8px', fontSize: '0.82rem' }}
+                >
+                  Свой список
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setOptionsSource('catalog')}
+                  className={optionsSource === 'catalog' ? 'btn-primary' : 'btn-outline'}
+                  style={{ flex: 1, padding: '8px', fontSize: '0.82rem' }}
+                >
+                  Справочник
+                </button>
+              </div>
+            </div>
+            {optionsSource === 'list' ? (
+              <div>
+                <label style={labelStyle}>Варианты (по одному на строку) *</label>
+                <textarea value={optionsText} onChange={(e) => setOptionsText(e.target.value)} rows={4} placeholder={'Цел\nПовреждён\nНет пломбы'} style={{ ...inputStyle, width: '100%', resize: 'vertical' }} required />
+              </div>
+            ) : (
+              <div>
+                <label style={labelStyle}>Справочник *</label>
+                {catalogTypesLoading ? (
+                  <p style={{ color: 'var(--text-muted)', fontSize: '0.82rem' }}>Загрузка...</p>
+                ) : catalogTypes.length === 0 ? (
+                  <p style={{ color: 'var(--text-muted)', fontSize: '0.82rem' }}>
+                    Справочников пока нет — создайте на вкладке «Справочники → Свои справочники».
+                  </p>
+                ) : (
+                  <select value={catalogTypeId} onChange={(e) => setCatalogTypeId(e.target.value)} style={{ ...inputStyle, width: '100%' }} required>
+                    <option value="">— выбрать —</option>
+                    {catalogTypes.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
+                  </select>
+                )}
+              </div>
+            )}
+          </>
+        )}
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+          <input type="checkbox" checked={required} onChange={(e) => setRequired(e.target.checked)} />
+          Обязательное поле
+        </label>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Создаём...' : 'Создать'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function FieldRow({ field, isFirst, isLast, onSwap, onChanged }) {
+  const [error, setError] = useState('')
+  const { types: catalogTypes } = useCatalogTypes()
+  const catalogName = field.catalog_type_id ? catalogTypes.find((t) => t.id === field.catalog_type_id)?.name : null
+
+  const update = async (body) => {
+    setError('')
+    try {
+      await api.customFields.update(field.id, body)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <button type="button" onClick={() => onSwap(-1)} disabled={isFirst} className="btn-outline" style={{ padding: '2px', opacity: isFirst ? 0.3 : 1 }} aria-label="Выше">
+          <ArrowUp size={13} />
+        </button>
+        <button type="button" onClick={() => onSwap(1)} disabled={isLast} className="btn-outline" style={{ padding: '2px', marginTop: '2px', opacity: isLast ? 0.3 : 1 }} aria-label="Ниже">
+          <ArrowDown size={13} />
+        </button>
+      </div>
+      <div style={{ flex: '1 1 200px', minWidth: '160px' }}>
+        <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>
+          {field.label}
+          {field.required && <span style={{ color: 'var(--accent-red)' }}> *</span>}
+          {!field.is_active && <span style={{ color: 'var(--text-muted)', fontWeight: 400, fontSize: '0.78rem' }}> · архив</span>}
+        </p>
+        <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+          {TYPE_LABELS[field.field_type] || field.field_type}
+          {field.field_type === 'select' && field.catalog_type_id
+            ? `: справочник «${catalogName || '...'}»`
+            : field.field_type === 'select' && field.options?.length
+              ? `: ${field.options.join(', ')}`
+              : ''}
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={() => update({ is_active: !field.is_active })}
+        className={field.is_active ? 'btn-outline' : 'btn-primary'}
+        style={{ padding: '7px 12px', fontSize: '0.8rem' }}
+      >
+        {field.is_active ? 'В архив' : 'Вернуть'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+const OrderFieldsPage = () => {
+  const { fields, loading, error, refetch } = useOrderFields(true)
+  const [showCreate, setShowCreate] = useState(false)
+
+  const handleSwap = async (index, direction) => {
+    const other = fields[index + direction]
+    const self = fields[index]
+    if (!other) return
+    await Promise.all([
+      api.customFields.update(self.id, { position: other.position }),
+      api.customFields.update(other.id, { position: self.position }),
+    ])
+    refetch()
+  }
+
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (error && fields.length === 0) return <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Поля приёмки</h1>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Поле
+        </button>
+      </div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '18px' }}>
+        Дополнительные вопросы для формы новой заявки — сверх типа/модели/серийного номера/проблемы.
+      </p>
+
+      <div className="glass-panel" style={{ overflow: 'hidden' }}>
+        {fields.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Пока нет дополнительных полей</p>}
+        {fields.map((f, i) => (
+          <FieldRow
+            key={f.id}
+            field={f}
+            isFirst={i === 0}
+            isLast={i === fields.length - 1}
+            onSwap={(direction) => handleSwap(i, direction)}
+            onChanged={refetch}
+          />
+        ))}
+      </div>
+
+      {showCreate && (
+        <CreateFieldForm onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); refetch() }} />
+      )}
+    </div>
+  )
+}
+
+export default OrderFieldsPage
diff --git a/production/web/src/orderfields/useOrderFields.js b/production/web/src/orderfields/useOrderFields.js
new file mode 100644
index 0000000..2a0e029
--- /dev/null
+++ b/production/web/src/orderfields/useOrderFields.js
@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// includeArchived=true is the management page's own list (owner-only,
+// api.customFields.listAll); false is what the intake form itself renders
+// (api.customFields.list, active only, any staff role).
+export function useOrderFields(includeArchived) {
+  const [fields, setFields] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const fetchFields = useCallback(async () => {
+    setLoading(true)
+    try {
+      setFields((await (includeArchived ? api.customFields.listAll() : api.customFields.list())) || [])
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [includeArchived])
+
+  useEffect(() => {
+    (async () => {
+      await fetchFields()
+    })()
+  }, [fetchFields])
+
+  return { fields, loading, error, refetch: fetchFields }
+}
diff --git a/production/web/src/orders/AIDiagnosisPanel.jsx b/production/web/src/orders/AIDiagnosisPanel.jsx
new file mode 100644
index 0000000..05ef261
--- /dev/null
+++ b/production/web/src/orders/AIDiagnosisPanel.jsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Sparkles, ExternalLink, Search } from 'lucide-react'
+import * as api from '../lib/api'
+
+// On-demand, same explicit-trigger shape as AiIntakeBox (Phase 6) and
+// analytics/AISummaryPanel (Phase 9) — an LLM+search call has real cost and
+// latency, so it never fires automatically. Shown only when the order has
+// at least one uploaded photo (see EditForm's hasPhoto check) — the backend
+// reads the order's latest photo itself, there's nothing to pick here.
+//
+// Renders the backend's structured {observation, causes[]} instead of one
+// prose paragraph — each cause is its own card with a title/description,
+// so "what's broken" and "why, per source N" read as a scannable list
+// rather than something staff have to parse out of running text.
+const AIDiagnosisPanel = ({ orderId }) => {
+  const [result, setResult] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleDiagnose = async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await api.orders.diagnose(orderId)
+      setResult(res)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'space-between', alignItems: 'center', marginBottom: result || error ? '10px' : 0 }}>
+        <h3 style={{ fontSize: '0.95rem' }}>AI-диагностика по фото</h3>
+        <button
+          type="button"
+          onClick={handleDiagnose}
+          disabled={loading}
+          className="btn-outline"
+          style={{ padding: '7px 14px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+        >
+          <Sparkles size={13} /> {loading ? 'Анализируем...' : result ? 'Повторить' : 'Проанализировать'}
+        </button>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+
+      {result && (
+        <div style={{ fontSize: '0.85rem', lineHeight: 1.5 }}>
+          {result.observation && <p style={{ whiteSpace: 'pre-line', marginBottom: '10px' }}>{result.observation}</p>}
+
+          {result.causes?.length > 0 && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '10px' }}>
+              {result.causes.map((c, i) => (
+                <div
+                  key={i}
+                  style={{ display: 'flex', gap: '8px', padding: '8px 10px', borderRadius: '8px', background: 'var(--color-surface-sunken)' }}
+                >
+                  <Search size={14} style={{ flexShrink: 0, marginTop: '2px', color: 'var(--color-accent-fg)' }} />
+                  <div>
+                    <p style={{ fontWeight: 590 }}>{c.title}</p>
+                    {c.description && <p style={{ color: 'var(--text-muted)', marginTop: '2px' }}>{c.description}</p>}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {result.price_history && (
+            <p style={{ marginTop: '8px', color: 'var(--text-muted)' }}>
+              По истории заказов ({result.price_history.count} шт.): в среднем{' '}
+              <strong style={{ color: 'var(--text-main)' }}>{Number(result.price_history.avg_price).toLocaleString('ru-RU')} ₽</strong>
+            </p>
+          )}
+
+          {result.sources?.length > 0 && (
+            <div style={{ marginTop: '10px' }}>
+              <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>Источники:</p>
+              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                {result.sources.map((s, i) => (
+                  <li key={i}>
+                    <a
+                      href={s.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{ fontSize: '0.8rem', color: 'var(--color-accent-fg)', display: 'flex', alignItems: 'center', gap: '4px' }}
+                    >
+                      <ExternalLink size={11} /> {s.title || s.url}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AIDiagnosisPanel
diff --git a/production/web/src/orders/AiIntakeBox.jsx b/production/web/src/orders/AiIntakeBox.jsx
new file mode 100644
index 0000000..d295783
--- /dev/null
+++ b/production/web/src/orders/AiIntakeBox.jsx
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { Sparkles } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from './formStyles'
+
+// Collapsed-by-default helper embedded in OrderModal's CreateForm — staff
+// pastes free text (a phone note, chat message), Gemini extracts
+// device/problem/price fields plus a client name/phone hint, and
+// onExtracted hands the result up to CreateForm to merge into its own form
+// state. This component never touches client_id or submits the order
+// itself — by design (see internal/aiintake package doc), it's a typing
+// shortcut a human still reviews, not an autonomous intake path.
+const AiIntakeBox = ({ onExtracted }) => {
+  const [open, setOpen] = useState(false)
+  const [text, setText] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleExtract = async () => {
+    if (!text.trim()) return
+    setLoading(true)
+    setError('')
+    try {
+      const fields = await api.aiIntake.extract(text)
+      onExtracted(fields)
+      setOpen(false)
+      setText('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="btn-outline"
+        style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px', alignSelf: 'flex-start' }}
+      >
+        <Sparkles size={14} /> AI-заполнить
+      </button>
+    )
+  }
+
+  return (
+    <div style={{ border: '1.5px solid var(--border-light)', borderRadius: '8px', padding: '14px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={4}
+        placeholder="Вставьте текст заявки от клиента — звонок, чат, заметка. AI распознает технику, проблему, имя и телефон для поиска клиента"
+        style={{ ...inputStyle, resize: 'vertical' }}
+        autoFocus
+      />
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.8rem' }}>{error}</p>}
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <button type="button" onClick={handleExtract} disabled={loading || !text.trim()} className="btn-primary" style={{ padding: '8px 16px', fontSize: '0.82rem' }}>
+          {loading ? 'Распознаём...' : 'Распознать'}
+        </button>
+        <button type="button" onClick={() => { setOpen(false); setError('') }} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.82rem' }}>
+          Отмена
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default AiIntakeBox
diff --git a/production/web/src/orders/CatalogPickerModal.jsx b/production/web/src/orders/CatalogPickerModal.jsx
new file mode 100644
index 0000000..d6dab34
--- /dev/null
+++ b/production/web/src/orders/CatalogPickerModal.jsx
@@ -0,0 +1,231 @@
+import { useState, useEffect, useMemo } from 'react'
+import { X, Search } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from './formStyles'
+import { useServices, useServiceCategories } from '../servicecatalog/useServiceCatalog'
+import Tabs, { TabPanel } from '../ui/Tabs'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 300,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '620px',
+  boxShadow: 'var(--shadow-elevated)', display: 'flex', flexDirection: 'column', maxHeight: '85vh',
+}
+
+function groupBy(items, keyFn, fallbackLabel) {
+  const groups = new Map()
+  for (const it of items) {
+    const key = keyFn(it) || fallbackLabel
+    if (!groups.has(key)) groups.set(key, [])
+    groups.get(key).push(it)
+  }
+  return [...groups.entries()].sort(([a], [b]) => a.localeCompare(b, 'ru'))
+}
+
+// Bulk picker — "Прайс-лист" button in the "Работы и запчасти" tab. Search-
+// and-add-one-at-a-time (ServiceItemsSection/PartsUsedSection's own forms)
+// stays the fast path for a single known item; this is for staff working
+// off a printed/mental price list who want to tick off several services
+// and parts in one pass instead of repeating that flow N times.
+//
+// Services and parts are fundamentally different additions (a services line
+// item vs. a stock-consuming movement), so "Добавить" below fires the same
+// per-item calls those two sections already use, in sequence — not a new
+// bulk endpoint. A serialized part needs one specific unit's serial number
+// (see PartsUsedSection's AddPartForm), which a checkbox-and-qty row can't
+// express, so serialized parts are shown but not selectable here.
+const CatalogPickerModal = ({ orderId, onClose, onAdded }) => {
+  const [activeTab, setActiveTab] = useState('services')
+  const { services } = useServices('')
+  const { categories: serviceCategories } = useServiceCategories()
+  const categoryName = useMemo(
+    () => Object.fromEntries(serviceCategories.map((c) => [c.id, c.name])),
+    [serviceCategories],
+  )
+
+  const [serviceQuery, setServiceQuery] = useState('')
+  const [selectedServices, setSelectedServices] = useState({}) // id -> { price, qty }
+
+  const [partQuery, setPartQuery] = useState('')
+  const [parts, setParts] = useState([])
+  useEffect(() => {
+    const id = setTimeout(() => {
+      api.parts.list({ q: partQuery }).then(setParts).catch(() => {})
+    }, 250)
+    return () => clearTimeout(id)
+  }, [partQuery])
+  const [selectedParts, setSelectedParts] = useState({}) // id -> { qty }
+
+  const [saving, setSaving] = useState(false)
+  const [errors, setErrors] = useState([])
+
+  const filteredServices = services.filter((s) => s.name.toLowerCase().includes(serviceQuery.toLowerCase()))
+  const serviceGroups = groupBy(filteredServices, (s) => categoryName[s.category_id], 'Без категории')
+  const partGroups = groupBy(parts, (p) => p.category, 'Без категории')
+
+  const toggleService = (s) => {
+    setSelectedServices((sel) => {
+      const next = { ...sel }
+      if (next[s.id]) delete next[s.id]
+      else next[s.id] = { price: s.default_price || '', qty: 1 }
+      return next
+    })
+  }
+  const toggleService_updatePrice = (id, price) => setSelectedServices((sel) => ({ ...sel, [id]: { ...sel[id], price } }))
+  const toggleService_updateQty = (id, qty) => setSelectedServices((sel) => ({ ...sel, [id]: { ...sel[id], qty } }))
+
+  const togglePart = (p) => {
+    if (p.is_serialized) return
+    setSelectedParts((sel) => {
+      const next = { ...sel }
+      if (next[p.id]) delete next[p.id]
+      else next[p.id] = { qty: 1 }
+      return next
+    })
+  }
+  const togglePart_updateQty = (id, qty) => setSelectedParts((sel) => ({ ...sel, [id]: { qty } }))
+
+  const totalSelected = Object.keys(selectedServices).length + Object.keys(selectedParts).length
+
+  const handleAdd = async () => {
+    setSaving(true)
+    setErrors([])
+    const failures = []
+    const succeededServiceIds = []
+    const succeededPartIds = []
+    for (const [id, { price, qty }] of Object.entries(selectedServices)) {
+      const s = services.find((x) => x.id === id)
+      try {
+        await api.orderServices.add(orderId, { service_id: id, description: s.name, price: String(price), qty: Number(qty) || 1 })
+        succeededServiceIds.push(id)
+      } catch (err) {
+        failures.push(`${s?.name || id}: ${err.message}`)
+      }
+    }
+    for (const [id, { qty }] of Object.entries(selectedParts)) {
+      const p = parts.find((x) => x.id === id)
+      try {
+        await api.orders.consumeParts(orderId, { part_id: id, qty: Number(qty) || 1, note: 'Прайс-лист' })
+        succeededPartIds.push(id)
+      } catch (err) {
+        failures.push(`${p?.name || id}: ${err.message}`)
+      }
+    }
+    setSaving(false)
+
+    const anySucceeded = succeededServiceIds.length > 0 || succeededPartIds.length > 0
+    if (anySucceeded) {
+      setSelectedServices((sel) => Object.fromEntries(Object.entries(sel).filter(([id]) => !succeededServiceIds.includes(id))))
+      setSelectedParts((sel) => Object.fromEntries(Object.entries(sel).filter(([id]) => !succeededPartIds.includes(id))))
+      onAdded()
+    }
+    if (failures.length > 0) {
+      setErrors(failures)
+      return
+    }
+    onClose()
+  }
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '20px 24px 0' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.1rem' }}>Прайс-лист</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+
+        <Tabs
+          tabs={[{ key: 'services', label: 'Услуги' }, { key: 'parts', label: 'Запчасти' }]}
+          activeTab={activeTab}
+          onChange={setActiveTab}
+        />
+
+        <div style={{ overflowY: 'auto', flex: 1 }}>
+          <TabPanel tabKey="services" activeTab={activeTab}>
+            <div style={{ padding: '16px 24px' }}>
+              <div style={{ position: 'relative', marginBottom: '12px' }}>
+                <Search size={14} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-text-muted)' }} />
+                <input value={serviceQuery} onChange={(e) => setServiceQuery(e.target.value)} placeholder="Поиск по услугам..." style={{ ...inputStyle, paddingLeft: '32px' }} />
+              </div>
+              {serviceGroups.map(([group, rows]) => (
+                <div key={group} style={{ marginBottom: '14px' }}>
+                  <p style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: '6px' }}>{group}</p>
+                  {rows.map((s) => {
+                    const sel = selectedServices[s.id]
+                    return (
+                      <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0' }}>
+                        <input type="checkbox" checked={!!sel} onChange={() => toggleService(s)} style={{ flexShrink: 0 }} />
+                        <span style={{ flex: 1, fontSize: '0.86rem', cursor: 'pointer' }} onClick={() => toggleService(s)}>{s.name}</span>
+                        {sel ? (
+                          <>
+                            <input type="number" value={sel.price} onChange={(e) => toggleService_updatePrice(s.id, e.target.value)} style={{ ...inputStyle, width: '80px', padding: '6px 8px' }} />
+                            <input type="number" min="1" value={sel.qty} onChange={(e) => toggleService_updateQty(s.id, e.target.value)} style={{ ...inputStyle, width: '54px', padding: '6px 8px' }} />
+                          </>
+                        ) : (
+                          s.default_price && <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', width: '80px', textAlign: 'right' }}>{Number(s.default_price).toLocaleString('ru-RU')} ₽</span>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              ))}
+              {filteredServices.length === 0 && <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Ничего не найдено</p>}
+            </div>
+          </TabPanel>
+
+          <TabPanel tabKey="parts" activeTab={activeTab}>
+            <div style={{ padding: '16px 24px' }}>
+              <div style={{ position: 'relative', marginBottom: '12px' }}>
+                <Search size={14} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-text-muted)' }} />
+                <input value={partQuery} onChange={(e) => setPartQuery(e.target.value)} placeholder="Поиск по названию/артикулу..." style={{ ...inputStyle, paddingLeft: '32px' }} />
+              </div>
+              {partGroups.map(([group, rows]) => (
+                <div key={group} style={{ marginBottom: '14px' }}>
+                  <p style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: '6px' }}>{group}</p>
+                  {rows.map((p) => {
+                    const sel = selectedParts[p.id]
+                    return (
+                      <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0', opacity: p.is_serialized ? 0.55 : 1 }}>
+                        <input type="checkbox" checked={!!sel} disabled={p.is_serialized} onChange={() => togglePart(p)} style={{ flexShrink: 0 }} />
+                        <span style={{ flex: 1, fontSize: '0.86rem', cursor: p.is_serialized ? 'default' : 'pointer' }} onClick={() => togglePart(p)}>
+                          {p.name} <span style={{ color: 'var(--color-text-muted)' }}>· {p.sku} · доступно {p.qty_on_hand}</span>
+                          {p.is_serialized && <span style={{ color: 'var(--color-text-muted)' }}> · серийная, добавьте по одной ниже</span>}
+                        </span>
+                        {sel && (
+                          <input type="number" min="1" max={p.qty_on_hand} value={sel.qty} onChange={(e) => togglePart_updateQty(p.id, e.target.value)} style={{ ...inputStyle, width: '54px', padding: '6px 8px' }} />
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              ))}
+              {parts.length === 0 && <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Ничего не найдено</p>}
+            </div>
+          </TabPanel>
+        </div>
+
+        <div style={{ padding: '16px 24px', borderTop: '1px solid var(--color-border)' }}>
+          {errors.length > 0 && (
+            <div style={{ marginBottom: '10px', fontSize: '0.8rem', color: 'var(--color-danger)' }}>
+              {errors.map((e, i) => <p key={i} style={{ margin: 0 }}>{e}</p>)}
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={handleAdd}
+            disabled={saving || totalSelected === 0}
+            className="btn-primary"
+            style={{ width: '100%', padding: '11px 16px', fontSize: '0.9rem' }}
+          >
+            {saving ? 'Добавляем...' : `Добавить (${totalSelected})`}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CatalogPickerModal
diff --git a/production/web/src/orders/ChecklistModal.jsx b/production/web/src/orders/ChecklistModal.jsx
new file mode 100644
index 0000000..e5a7601
--- /dev/null
+++ b/production/web/src/orders/ChecklistModal.jsx
@@ -0,0 +1,44 @@
+import { X } from 'lucide-react'
+import ChecklistSection from './ChecklistSection'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 300,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '620px',
+  boxShadow: 'var(--shadow-elevated)', padding: '24px',
+}
+
+// Осмотр при приёмке, moved behind an explicit "Провести осмотр" button
+// (see CreateForm/EditForm in OrderModal.jsx) instead of an inline section
+// that only appeared once "Тип техники" had a value — staff kept reporting
+// "there's no checklist" because nothing was visible yet at that point in
+// the form. A button that's always there, with a modal behind it, can't be
+// missed the same way.
+function ChecklistModal({ checklist, onCycleStatus, onSetNote, onToggleCompleteness, onClose }) {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" onClick={(e) => e.stopPropagation()} style={panelStyle}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Осмотр при приёмке</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <ChecklistSection
+            checklist={checklist}
+            onCycleStatus={onCycleStatus}
+            onSetNote={onSetNote}
+            onToggleCompleteness={onToggleCompleteness}
+          />
+        </div>
+        <button type="button" onClick={onClose} className="btn-primary" style={{ marginTop: '18px', padding: '10px 16px' }}>
+          Готово
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default ChecklistModal
diff --git a/production/web/src/orders/ChecklistSection.jsx b/production/web/src/orders/ChecklistSection.jsx
new file mode 100644
index 0000000..9bbfd3f
--- /dev/null
+++ b/production/web/src/orders/ChecklistSection.jsx
@@ -0,0 +1,72 @@
+import { CHECK_STATUS_LABELS } from '../lib/checklistTemplates'
+import { inputStyle, labelStyle } from './formStyles'
+
+// Осмотр при приёмке — the actual checklist markup, rendered inside
+// ChecklistModal (opened via the "Провести осмотр" button in both
+// CreateForm and EditForm in OrderModal.jsx) rather than inline in either
+// form. Kept as its own component since ChecklistModal is just a shell
+// around it — no other reason to split it out anymore.
+function ChecklistSection({ checklist, onCycleStatus, onSetNote, onToggleCompleteness }) {
+  if (!checklist) return null
+  return (
+    <>
+      {checklist.checks.length > 0 && (
+        <div>
+          <label style={labelStyle}>Осмотр при приёмке</label>
+          <div style={{ border: '1.5px solid var(--color-border)', borderRadius: '8px', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {checklist.checks.map((c, idx) => {
+              const color = { ok: 'var(--color-success)', defect: 'var(--color-danger)', unchecked: 'var(--color-text-muted)' }[c.status]
+              return (
+                <div key={c.key} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                  <button
+                    type="button"
+                    onClick={() => onCycleStatus(idx)}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', minWidth: '260px',
+                      background: 'none', color: 'var(--color-text)', textAlign: 'left', padding: '2px 0',
+                    }}
+                  >
+                    <span style={{
+                      flexShrink: 0, fontSize: '0.68rem', fontWeight: 590, padding: '2px 8px', borderRadius: '50px',
+                      background: color, color: '#fff', minWidth: '92px', textAlign: 'center',
+                    }}>
+                      {CHECK_STATUS_LABELS[c.status]}
+                    </span>
+                    {c.label}
+                  </button>
+                  {c.status === 'defect' && (
+                    <input
+                      value={c.note}
+                      onChange={(e) => onSetNote(idx, e.target.value)}
+                      placeholder="Что не так..."
+                      style={{ ...inputStyle, flex: 1, padding: '6px 10px' }}
+                    />
+                  )}
+                </div>
+              )
+            })}
+          </div>
+          <p style={{ fontSize: '0.76rem', color: 'var(--color-text-muted)', marginTop: '4px' }}>
+            Печатается в квитанции. Непроверенные пункты попадут в неё как «не проверено».
+          </p>
+        </div>
+      )}
+
+      {checklist.completeness.length > 0 && (
+        <div>
+          <label style={labelStyle}>Комплектация</label>
+          <div style={{ border: '1.5px solid var(--color-border)', borderRadius: '8px', padding: '10px 12px', display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+            {checklist.completeness.map((c, idx) => (
+              <label key={c.key} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.85rem' }}>
+                <input type="checkbox" checked={c.present} onChange={() => onToggleCompleteness(idx)} />
+                {c.label}
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ChecklistSection
diff --git a/production/web/src/orders/ClientPicker.jsx b/production/web/src/orders/ClientPicker.jsx
new file mode 100644
index 0000000..4f6fe2c
--- /dev/null
+++ b/production/web/src/orders/ClientPicker.jsx
@@ -0,0 +1,195 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+import { inputStyle } from './formStyles'
+import MessengerButtons from '../ui/MessengerButtons'
+
+const money = (v) => `${Number(v).toLocaleString('ru-RU')} ₽`
+
+// Search existing clients or switch to a small inline "new client" form —
+// used by OrderModal's create form and tradein/TradeInModal's create form.
+// initialQuery seeds the search box from AiIntakeBox's extracted client
+// name/phone hint — a search-query suggestion only, never an auto-selection
+// (client_id stays a real FK staff must pick or create explicitly).
+const ClientPicker = ({ selectedClient, onSelect, initialQuery = '' }) => {
+  const [query, setQuery] = useState(initialQuery)
+  const [lastInitialQuery, setLastInitialQuery] = useState(initialQuery)
+  const [results, setResults] = useState([])
+  const [creatingNew, setCreatingNew] = useState(false)
+  const [newClient, setNewClient] = useState({ type: 'individual', name: '', phone: '', email: '', inn: '', kpp: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [debt, setDebt] = useState(null)
+
+  useEffect(() => {
+    // No client selected: nothing to do — the debt line only renders inside
+    // the selectedClient block below, so a stale value sitting unused in
+    // state is harmless, and skipping the reset here avoids a synchronous
+    // setState in the effect body (react-hooks/set-state-in-effect).
+    if (!selectedClient?.id) return
+    let cancelled = false
+    api.clients.debt(selectedClient.id).then((r) => { if (!cancelled) setDebt(Number(r.debt)) }).catch(() => {})
+    return () => { cancelled = true }
+  }, [selectedClient?.id])
+
+  const search = useCallback(async (q) => {
+    if (!q) { setResults([]); return }
+    try {
+      setResults(await api.clients.list(q))
+    } catch {
+      setResults([])
+    }
+  }, [])
+
+  // initialQuery arrives after mount (AI extraction happens later, on
+  // demand) — adjusted during render (React's documented pattern for
+  // "reset state when a prop changes", same as AdminLayout.jsx's
+  // lastPathname) rather than an effect, so a later prop change still
+  // overrides whatever the user typed, without the extra render tick or
+  // the react-hooks/set-state-in-effect lint flag an effect would trigger.
+  if (initialQuery && initialQuery !== lastInitialQuery) {
+    setLastInitialQuery(initialQuery)
+    setQuery(initialQuery)
+  }
+
+  useEffect(() => {
+    const id = setTimeout(() => search(query), 300)
+    return () => clearTimeout(id)
+  }, [query, search])
+
+  const handleCreate = async (e) => {
+    e.preventDefault()
+    if (!newClient.name || !newClient.phone) return
+    if (newClient.type === 'company' && !newClient.inn) {
+      setError('Для юрлица нужен ИНН')
+      return
+    }
+    setSaving(true)
+    setError('')
+    try {
+      const { id } = await api.clients.create(newClient)
+      onSelect({ id, ...newClient })
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (selectedClient) {
+    return (
+      <div style={{
+        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+        padding: '10px 12px', background: 'var(--color-surface-sunken)', borderRadius: '8px', border: '1.5px solid var(--border-light)',
+      }}>
+        <div>
+          <p style={{ fontWeight: 510, fontSize: '0.9rem', color: 'var(--text-main)' }}>{selectedClient.name}</p>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{selectedClient.phone}</p>
+            <MessengerButtons phone={selectedClient.phone} />
+          </div>
+          {debt > 0 && (
+            <p style={{ fontSize: '0.78rem', color: 'var(--accent-red)', fontWeight: 510, marginTop: '2px' }}>
+              Нам должны: {money(debt)}
+            </p>
+          )}
+        </div>
+        <button type="button" className="btn-outline" style={{ padding: '5px 12px', fontSize: '0.78rem' }} onClick={() => onSelect(null)}>
+          Сменить
+        </button>
+      </div>
+    )
+  }
+
+  if (creatingNew) {
+    return (
+      <div style={{ border: '1.5px solid var(--border-light)', borderRadius: '8px', padding: '14px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            type="button"
+            onClick={() => setNewClient((c) => ({ ...c, type: 'individual' }))}
+            className={newClient.type === 'individual' ? 'btn-primary' : 'btn-outline'}
+            style={{ padding: '6px 14px', fontSize: '0.8rem', flex: 1 }}
+          >
+            Физлицо
+          </button>
+          <button
+            type="button"
+            onClick={() => setNewClient((c) => ({ ...c, type: 'company' }))}
+            className={newClient.type === 'company' ? 'btn-primary' : 'btn-outline'}
+            style={{ padding: '6px 14px', fontSize: '0.8rem', flex: 1 }}
+          >
+            Юрлицо
+          </button>
+        </div>
+        <input
+          placeholder={newClient.type === 'company' ? 'Название организации' : 'ФИО'}
+          value={newClient.name}
+          onChange={(e) => setNewClient((c) => ({ ...c, name: e.target.value }))}
+          style={inputStyle}
+        />
+        <input
+          placeholder="Телефон"
+          value={newClient.phone}
+          onChange={(e) => setNewClient((c) => ({ ...c, phone: e.target.value }))}
+          style={inputStyle}
+        />
+        {newClient.type === 'company' && (
+          <input
+            placeholder="ИНН"
+            value={newClient.inn}
+            onChange={(e) => setNewClient((c) => ({ ...c, inn: e.target.value }))}
+            style={inputStyle}
+          />
+        )}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.8rem' }}>{error}</p>}
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button type="button" onClick={handleCreate} disabled={saving} className="btn-primary" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+            {saving ? 'Создаём...' : 'Создать и выбрать'}
+          </button>
+          <button type="button" onClick={() => setCreatingNew(false)} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+            Отмена
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <input
+        placeholder="Поиск по имени или телефону..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        style={inputStyle}
+      />
+      {results.length > 0 && (
+        <div style={{ marginTop: '6px', border: '1.5px solid var(--border-light)', borderRadius: '8px', overflow: 'hidden' }}>
+          {results.map((c) => (
+            <button
+              key={c.id}
+              type="button"
+              onClick={() => onSelect(c)}
+              style={{
+                display: 'block', width: '100%', textAlign: 'left',
+                padding: '10px 12px', background: 'var(--color-surface)', color: 'var(--text-main)', borderBottom: '1px solid var(--border-light)',
+                fontFamily: 'var(--font-body)', fontWeight: 400,
+              }}
+            >
+              <span style={{ fontWeight: 510, fontSize: '0.88rem' }}>{c.name}</span>
+              <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '8px' }}>{c.phone}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={() => setCreatingNew(true)}
+        style={{ marginTop: '8px', background: 'none', color: 'var(--color-accent-fg)', fontSize: '0.82rem', padding: 0 }}
+      >
+        + Новый клиент
+      </button>
+    </div>
+  )
+}
+
+export default ClientPicker
diff --git a/production/web/src/orders/CommonFaultsPicker.jsx b/production/web/src/orders/CommonFaultsPicker.jsx
new file mode 100644
index 0000000..049f1b9
--- /dev/null
+++ b/production/web/src/orders/CommonFaultsPicker.jsx
@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react'
+import { Plus } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from './formStyles'
+
+const chipStyle = {
+  display: 'inline-flex', alignItems: 'center', gap: '4px', padding: '4px 10px',
+  borderRadius: '50px', fontSize: '0.78rem', border: '1px solid var(--color-border)',
+  background: 'var(--color-surface-sunken)', color: 'var(--color-text)', whiteSpace: 'nowrap',
+}
+
+// Quick-pick buttons under "Описание проблемы" — click appends the fault's
+// label to the field instead of typing it out every time; "+" lets any
+// staff grow the list inline (common_faults, migrations/061), same
+// grow-the-catalog-as-you-go shape as CreateForm's "+ Добавить нового
+// производителя". This is deliberately the whole "autocomplete" story for
+// problem_description rather than a separate typeahead — a free-text
+// textarea has no native <datalist> equivalent, and picking from a curated
+// button list is faster than typing-and-matching for the common cases
+// anyway.
+function CommonFaultsPicker({ value, onChange }) {
+  const [faults, setFaults] = useState([])
+  const [adding, setAdding] = useState(false)
+  const [newLabel, setNewLabel] = useState('')
+  const [error, setError] = useState('')
+
+  const load = () => api.commonFaults.list().then(setFaults).catch(() => {})
+  useEffect(() => { load() }, [])
+
+  const handlePick = (label) => {
+    const current = value.trim()
+    if (!current) { onChange(label); return }
+    if (current.includes(label)) return
+    onChange(`${current}, ${label}`)
+  }
+
+  const handleAdd = async () => {
+    if (!newLabel.trim()) return
+    setError('')
+    try {
+      await api.commonFaults.create(newLabel.trim())
+      setNewLabel('')
+      setAdding(false)
+      load()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', marginTop: '6px' }}>
+      {faults.map((f) => (
+        <button key={f.id} type="button" onClick={() => handlePick(f.label)} style={chipStyle}>
+          {f.label}
+        </button>
+      ))}
+      {adding ? (
+        <span style={{ display: 'inline-flex', gap: '4px' }}>
+          <input
+            value={newLabel}
+            onChange={(e) => setNewLabel(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAdd() } }}
+            placeholder="Новая неисправность"
+            autoFocus
+            style={{ ...inputStyle, padding: '4px 10px', fontSize: '0.78rem', width: '160px' }}
+          />
+          <button type="button" onClick={handleAdd} className="btn-outline" style={{ padding: '0 10px', fontSize: '0.78rem' }}>Ок</button>
+          <button type="button" onClick={() => { setAdding(false); setNewLabel('') }} style={{ background: 'none', color: 'var(--text-muted)', padding: '0 4px' }}>✕</button>
+        </span>
+      ) : (
+        <button type="button" onClick={() => setAdding(true)} style={{ ...chipStyle, cursor: 'pointer' }} title="Добавить неисправность в список">
+          <Plus size={12} /> Добавить
+        </button>
+      )}
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--color-danger)' }}>{error}</span>}
+    </div>
+  )
+}
+
+export default CommonFaultsPicker
diff --git a/production/web/src/orders/CustomFieldsSection.jsx b/production/web/src/orders/CustomFieldsSection.jsx
new file mode 100644
index 0000000..2f32918
--- /dev/null
+++ b/production/web/src/orders/CustomFieldsSection.jsx
@@ -0,0 +1,57 @@
+import { inputStyle, labelStyle } from './formStyles'
+
+// Renders whatever active custom fields (internal/customfields) the owner
+// has configured — same component for CreateForm and EditForm, since both
+// just need "definitions in, values in, onChange out". Archived fields
+// never render here (the fields prop only ever holds active ones, fetched
+// via api.customFields.list — see useOrderFields(false)), matching the
+// backend's own rule that an archived field is never a valid write target.
+function FieldInput({ field, value, onChange }) {
+  switch (field.field_type) {
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={value ?? ''}
+          onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
+          style={inputStyle}
+        />
+      )
+    case 'checkbox':
+      return <input type="checkbox" checked={!!value} onChange={(e) => onChange(e.target.checked)} />
+    case 'select':
+      return (
+        <select value={value ?? ''} onChange={(e) => onChange(e.target.value)} style={{ ...inputStyle, width: '100%' }}>
+          <option value="" disabled>Выберите...</option>
+          {(field.options || []).map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+        </select>
+      )
+    default:
+      return <input type="text" value={value ?? ''} onChange={(e) => onChange(e.target.value)} style={inputStyle} />
+  }
+}
+
+const CustomFieldsSection = ({ fields, values, onChange }) => {
+  if (!fields?.length) return null
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+      {fields.map((f) => (
+        <div key={f.field_key}>
+          {f.field_type === 'checkbox' ? (
+            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem', height: '100%' }}>
+              <FieldInput field={f} value={values[f.field_key]} onChange={(v) => onChange(f.field_key, v)} />
+              {f.label}{f.required && ' *'}
+            </label>
+          ) : (
+            <>
+              <label style={labelStyle}>{f.label}{f.required && ' *'}</label>
+              <FieldInput field={f} value={values[f.field_key]} onChange={(v) => onChange(f.field_key, v)} />
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default CustomFieldsSection
diff --git a/production/web/src/orders/IssueOrderModal.jsx b/production/web/src/orders/IssueOrderModal.jsx
new file mode 100644
index 0000000..827a1c7
--- /dev/null
+++ b/production/web/src/orders/IssueOrderModal.jsx
@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react'
+import { X, Wallet, Loader2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from './formStyles'
+import { METHOD_LABELS, ALL_METHODS } from '../cash/paymentMethods'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  padding: '16px', zIndex: 300,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '400px',
+  boxShadow: 'var(--shadow-elevated)', padding: '24px',
+}
+
+// Fires when staff clicks "Выдать заявку" on an already-validated order
+// (see OrderModal's own pre-check, mirrored server-side by
+// order.assertReadyToIssue). Collects the remaining balance as a real cash
+// transaction — which is also the one and only trigger point for a
+// KkmServer fiscal receipt (internal/cash calls kkm.Registrar.Send after
+// every non-pending income row; see internal/kkm/kkmserver's package
+// doc) — then moves the order to "Выдано". Payment recording and the
+// status flip are two separate requests with no shared transaction, same
+// non-atomic best-effort shape UpdateStatus's own loyalty/inventory side
+// effects already use elsewhere in this codebase; a failure between them
+// leaves the payment recorded but the order not yet marked handed over,
+// which is recoverable (retry "Выдать", or record the visible error) rather
+// than silently duplicated.
+const IssueOrderModal = ({ orderId, orderNumber, finalPrice, onClose, onIssued }) => {
+  const [paidSoFar, setPaidSoFar] = useState(null)
+  const [method, setMethod] = useState('cash')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    (async () => {
+      const rows = await api.cash.listForOrder(orderId)
+      const paid = (rows || [])
+        .filter((t) => t.type === 'income' && !t.is_pending)
+        .reduce((sum, t) => sum + Number(t.amount), 0)
+      setPaidSoFar(paid)
+    })()
+  }, [orderId])
+
+  const total = Number(finalPrice) || 0
+  const due = paidSoFar === null ? null : Math.max(0, total - paidSoFar)
+
+  const handleConfirm = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      if (due > 0) {
+        await api.cash.create({
+          type: 'income',
+          method,
+          amount: String(due),
+          order_id: orderId,
+          note: `Выдача заявки №${orderNumber || orderId}`,
+        })
+      }
+      await api.orders.updateStatus(orderId, 'completed')
+      onIssued()
+      onClose()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <div style={{
+              width: '36px', height: '36px', borderRadius: '10px', background: 'var(--color-accent-soft)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+            }}>
+              <Wallet size={17} color="var(--color-accent-fg)" />
+            </div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.1rem' }}>Выдать заявку</h2>
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+
+        {paidSoFar === null ? (
+          <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <Loader2 size={14} style={{ animation: 'spin 0.7s linear infinite' }} /> Загрузка...
+          </p>
+        ) : (
+          <>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '16px', fontSize: '0.85rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-muted)' }}>Итоговая цена</span>
+                <span>{total.toLocaleString('ru-RU')} ₽</span>
+              </div>
+              {paidSoFar > 0 && (
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <span style={{ color: 'var(--text-muted)' }}>Уже оплачено</span>
+                  <span>{paidSoFar.toLocaleString('ru-RU')} ₽</span>
+                </div>
+              )}
+              <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 590, fontSize: '0.95rem', marginTop: '4px' }}>
+                <span>{due > 0 ? 'К оплате' : 'Доплата не требуется'}</span>
+                {due > 0 && <span style={{ color: 'var(--color-accent-fg)' }}>{due.toLocaleString('ru-RU')} ₽</span>}
+              </div>
+            </div>
+
+            {due > 0 && (
+              <div style={{ marginBottom: '16px' }}>
+                <label style={labelStyle}>Способ оплаты</label>
+                <select value={method} onChange={(e) => setMethod(e.target.value)} style={inputStyle}>
+                  {ALL_METHODS.map((v) => <option key={v} value={v}>{METHOD_LABELS[v]}</option>)}
+                </select>
+              </div>
+            )}
+
+            {error && <p style={{ fontSize: '0.82rem', color: 'var(--color-danger)', marginBottom: '12px' }}>{error}</p>}
+
+            <button
+              type="button"
+              onClick={handleConfirm}
+              disabled={saving}
+              className="btn-primary"
+              style={{ width: '100%', padding: '11px 16px', fontSize: '0.9rem' }}
+            >
+              {saving ? 'Оформляем...' : due > 0 ? 'Оплатить и выдать' : 'Выдать'}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default IssueOrderModal
diff --git a/production/web/src/orders/KanbanBoard.jsx b/production/web/src/orders/KanbanBoard.jsx
new file mode 100644
index 0000000..f111524
--- /dev/null
+++ b/production/web/src/orders/KanbanBoard.jsx
@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import { DndContext, closestCorners, DragOverlay, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { useOutletContext } from 'react-router-dom'
+import { useOrders } from './useOrders'
+import { useIsMobile } from '../hooks/useIsMobile'
+import KanbanColumn from './KanbanColumn'
+import OrderCard from './OrderCard'
+import OrderModal from './OrderModal'
+import KanbanFilterBar from './KanbanFilterBar'
+import KanbanBoardSwitcher from './KanbanBoardSwitcher'
+import { useOrderStatuses } from './statuses'
+
+const EMPTY_KANBAN_FILTERS = { assigned_master_id: '', date_from: '', date_to: '' }
+
+const KanbanBoard = () => {
+  const { statuses: STATUSES } = useOrderStatuses()
+  const { ordersByStatus, loading, updateStatus, refetch } = useOrders()
+  const { showNewOrder, setShowNewOrder } = useOutletContext() || {}
+  const isMobile = useIsMobile()
+  const [activeOrder, setActiveOrder] = useState(null)
+  const [selectedOrder, setSelectedOrder] = useState(null)
+  const [localOverrides, setLocalOverrides] = useState({})
+  const [filters, setFilters] = useState(EMPTY_KANBAN_FILTERS)
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  const findOrderStatus = (orderId) => {
+    if (localOverrides[orderId]) return localOverrides[orderId]
+    for (const status of STATUSES) {
+      if (ordersByStatus[status]?.find((o) => o.id === orderId)) return status
+    }
+    return null
+  }
+
+  const handleDragStart = ({ active }) => {
+    const status = findOrderStatus(active.id)
+    if (status) setActiveOrder(ordersByStatus[status]?.find((o) => o.id === active.id))
+  }
+
+  const handleDragEnd = async ({ active, over }) => {
+    setActiveOrder(null)
+    if (!over) return
+
+    const targetStatus = STATUSES.includes(over.id) ? over.id : findOrderStatus(over.id)
+    const sourceStatus = findOrderStatus(active.id)
+
+    if (targetStatus && sourceStatus !== targetStatus) {
+      setLocalOverrides((prev) => ({ ...prev, [active.id]: targetStatus }))
+      const { error } = await updateStatus(active.id, targetStatus)
+      setLocalOverrides((prev) => {
+        const next = { ...prev }
+        delete next[active.id]
+        return next
+      })
+      if (error) console.error('Status update failed:', error)
+    }
+  }
+
+  const matchesFilters = (o) => {
+    if (filters.assigned_master_id && o.assigned_master_id !== filters.assigned_master_id) return false
+    if (filters.date_from && o.created_at < filters.date_from) return false
+    if (filters.date_to && o.created_at.slice(0, 10) > filters.date_to) return false
+    return true
+  }
+
+  const effectiveOrdersByStatus = STATUSES.reduce((acc, status) => {
+    const base = (ordersByStatus[status] || []).filter(
+      (o) => (!localOverrides[o.id] || localOverrides[o.id] === status) && matchesFilters(o)
+    )
+    const overrideOrders = Object.entries(localOverrides)
+      .filter(([, s]) => s === status)
+      .map(([id]) => Object.values(ordersByStatus).flat().find((o) => o.id === id))
+      .filter(Boolean)
+    acc[status] = [...base, ...overrideOrders]
+    return acc
+  }, {})
+
+  if (loading) {
+    return (
+      <>
+        <KanbanBoardSwitcher />
+        <div style={{ textAlign: 'center', padding: '60px', color: 'var(--text-muted)', fontFamily: 'var(--font-heading)' }}>
+          Загрузка заказов...
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <KanbanBoardSwitcher />
+      <KanbanFilterBar filters={filters} onChange={setFilters} />
+      <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+        <div style={{
+          display: 'flex', gap: '14px', alignItems: 'flex-start',
+          overflowX: isMobile ? 'auto' : 'visible',
+          WebkitOverflowScrolling: 'touch',
+          paddingBottom: isMobile ? '12px' : '20px',
+          minWidth: 'min-content',
+        }}>
+          {STATUSES.map((status) => (
+            <KanbanColumn
+              key={status}
+              status={status}
+              orders={effectiveOrdersByStatus[status] || []}
+              onCardClick={setSelectedOrder}
+              isMobile={isMobile}
+            />
+          ))}
+        </div>
+        <DragOverlay>
+          {activeOrder && <OrderCard order={activeOrder} onClick={() => {}} />}
+        </DragOverlay>
+      </DndContext>
+
+      {selectedOrder && (
+        <OrderModal
+          orderId={selectedOrder.id}
+          mode="edit"
+          onClose={() => { setSelectedOrder(null); refetch() }}
+        />
+      )}
+
+      {showNewOrder && (
+        <OrderModal
+          mode="create"
+          onClose={() => setShowNewOrder(false)}
+          onSaved={() => { setShowNewOrder(false); refetch() }}
+        />
+      )}
+    </>
+  )
+}
+
+export default KanbanBoard
diff --git a/production/web/src/orders/KanbanBoardSwitcher.jsx b/production/web/src/orders/KanbanBoardSwitcher.jsx
new file mode 100644
index 0000000..f732a84
--- /dev/null
+++ b/production/web/src/orders/KanbanBoardSwitcher.jsx
@@ -0,0 +1,56 @@
+import { useNavigate, useLocation } from 'react-router-dom'
+import { LayoutDashboard, Droplet, CalendarCheck } from 'lucide-react'
+
+// Same icon choices as Sidebar/navItems.js's own SERVICE_GROUPS entries for
+// Канбан/Картриджи/Заявки на запись, so this switcher reads as "the same
+// three things" rather than inventing a parallel iconography.
+const BOARDS = [
+  { path: '/kanban', label: 'Сервис', icon: LayoutDashboard },
+  { path: '/cartridges', label: 'Заправка', icon: Droplet },
+  { path: '/onsite-kanban', label: 'Выездной ремонт', icon: CalendarCheck },
+]
+
+// Shared by KanbanBoard.jsx, CartridgeKanbanBoard.jsx, and
+// OnsiteKanbanBoard.jsx — lets staff flip between all three boards without
+// leaving the kanban surface. Deliberately kept as three distinct routes
+// (not one route + a ?board= query param): /cartridges already has its own
+// sidebar entry, its own "+Партия" header button, and its own `?new=1`
+// auto-open handling from the "+Заявка" type-selector — consolidating would
+// mean re-threading all of that. React Router's client-side navigation
+// between routes is already instant (no full page reload), which is what
+// "one click, no reload" actually requires; the URL itself is the
+// persisted state (browser back/forward already remembers it), so this
+// doesn't need its own separate localStorage-backed preference the way
+// useOrdersView does for the different /kanban-vs-/orders choice.
+const KanbanBoardSwitcher = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  return (
+    <div style={{ display: 'flex', border: '1.5px solid var(--color-border)', borderRadius: '10px', overflow: 'hidden', width: 'fit-content', marginBottom: '16px' }}>
+      {BOARDS.map((board) => {
+        const active = location.pathname === board.path
+        return (
+          <button
+            key={board.path}
+            type="button"
+            onClick={() => navigate(board.path)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '6px', padding: '9px 14px',
+              fontSize: '0.82rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+              background: active ? 'var(--color-accent)' : 'var(--color-surface)',
+              color: active ? 'var(--color-text-inverse)' : 'var(--color-text-muted)',
+              transition: 'background 0.15s, color 0.15s',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <board.icon size={14} />
+            {board.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default KanbanBoardSwitcher
diff --git a/production/web/src/orders/KanbanColumn.jsx b/production/web/src/orders/KanbanColumn.jsx
new file mode 100644
index 0000000..85c3b76
--- /dev/null
+++ b/production/web/src/orders/KanbanColumn.jsx
@@ -0,0 +1,58 @@
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import OrderCard from './OrderCard'
+import { useOrderStatuses } from './statuses'
+
+const KanbanColumn = ({ status, orders, onCardClick, isMobile }) => {
+  const { colors: STATUS_COLORS, labels: STATUS_LABELS } = useOrderStatuses()
+  const { setNodeRef, isOver } = useDroppable({ id: status })
+
+  return (
+    <div style={{
+      flex: isMobile ? '0 0 260px' : '1 1 200px',
+      minWidth: isMobile ? '260px' : '215px',
+      maxWidth: isMobile ? '260px' : '270px',
+      display: 'flex', flexDirection: 'column', gap: '10px',
+    }}>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: '8px',
+        padding: '11px 14px',
+        background: 'var(--color-surface)', borderRadius: '12px',
+        border: '1px solid var(--color-border)',
+        borderTop: `3px solid ${STATUS_COLORS[status]}`,
+        boxShadow: 'var(--shadow-card)',
+      }}>
+        <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '0.87rem', flex: 1, letterSpacing: '-0.005em' }}>
+          {STATUS_LABELS[status]}
+        </span>
+        <span style={{
+          background: STATUS_COLORS[status], color: '#fff',
+          borderRadius: '50px', padding: '1px 8px',
+          fontSize: '0.72rem', fontWeight: 590,
+        }}>
+          {orders.length}
+        </span>
+      </div>
+
+      <div
+        ref={setNodeRef}
+        style={{
+          flex: 1, minHeight: '180px',
+          display: 'flex', flexDirection: 'column', gap: '8px',
+          padding: '6px', borderRadius: '12px',
+          background: isOver ? 'var(--color-accent-soft)' : 'transparent',
+          border: isOver ? '2px dashed var(--color-accent)' : '2px dashed transparent',
+          transition: 'all 0.15s',
+        }}
+      >
+        <SortableContext items={orders.map((o) => o.id)} strategy={verticalListSortingStrategy}>
+          {orders.map((order) => (
+            <OrderCard key={order.id} order={order} onClick={() => onCardClick(order)} />
+          ))}
+        </SortableContext>
+      </div>
+    </div>
+  )
+}
+
+export default KanbanColumn
diff --git a/production/web/src/orders/KanbanFilterBar.jsx b/production/web/src/orders/KanbanFilterBar.jsx
new file mode 100644
index 0000000..1d1bb0e
--- /dev/null
+++ b/production/web/src/orders/KanbanFilterBar.jsx
@@ -0,0 +1,100 @@
+import { Pin, X } from 'lucide-react'
+import { useAssignableStaff } from './useAssignableStaff'
+import { useFilterPresets } from '../hooks/useFilterPresets'
+import { inputStyle, labelStyle } from './formStyles'
+
+// Master + date range only — no status filter here, unlike OrdersListPage's
+// bar, since a status is what a kanban column already is; narrowing that
+// too would just mean hiding whole columns. Shares OrdersListPage's own
+// localStorage preset list (useFilterPresets) so a filter pinned on either
+// page shows up on both — applying one saved with a status here simply
+// ignores that field, the same tolerant read applyPreset there already
+// does for fields it doesn't have.
+const KanbanFilterBar = ({ filters, onChange }) => {
+  const assignableStaff = useAssignableStaff()
+  const { presets, save: savePreset, remove: removePreset } = useFilterPresets()
+  const hasActiveFilters = filters.assigned_master_id || filters.date_from || filters.date_to
+
+  const setFilter = (key) => (e) => onChange((f) => ({ ...f, [key]: e.target.value }))
+
+  const handlePin = () => {
+    const name = window.prompt('Название фильтра:')
+    if (!name) return
+    savePreset(name, filters)
+  }
+
+  const applyPreset = (p) => onChange({
+    assigned_master_id: p.assigned_master_id || '', date_from: p.date_from || '', date_to: p.date_to || '',
+  })
+
+  return (
+    <div style={{ marginBottom: '14px' }}>
+      {presets.length > 0 && (
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '10px' }}>
+          {presets.map((p) => (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => applyPreset(p)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '6px',
+                padding: '6px 8px 6px 12px', borderRadius: '20px', fontSize: '0.8rem',
+                background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)', fontWeight: 510,
+              }}
+            >
+              {p.name}
+              <span
+                role="button"
+                tabIndex={0}
+                onClick={(e) => { e.stopPropagation(); removePreset(p.id) }}
+                style={{ display: 'flex', padding: '2px', borderRadius: '50%' }}
+                title="Удалить фильтр"
+              >
+                <X size={12} />
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))', gap: '10px', alignItems: 'flex-end' }}>
+        <div>
+          <label style={labelStyle}>Мастер</label>
+          <select value={filters.assigned_master_id} onChange={setFilter('assigned_master_id')} style={inputStyle}>
+            <option value="">Все мастера</option>
+            {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>С даты</label>
+          <input type="date" value={filters.date_from} onChange={setFilter('date_from')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>По дату</label>
+          <input type="date" value={filters.date_to} onChange={setFilter('date_to')} style={inputStyle} />
+        </div>
+        {hasActiveFilters && (
+          <div style={{ display: 'flex', gap: '8px', gridColumn: '1 / -1' }}>
+            <button
+              type="button"
+              className="btn-outline"
+              style={{ padding: '9px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+              onClick={handlePin}
+            >
+              <Pin size={13} /> Закрепить
+            </button>
+            <button
+              type="button"
+              className="btn-outline"
+              style={{ padding: '9px 14px', fontSize: '0.82rem' }}
+              onClick={() => onChange({ assigned_master_id: '', date_from: '', date_to: '' })}
+            >
+              Сбросить
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default KanbanFilterBar
diff --git a/production/web/src/orders/MultiIntakeModal.jsx b/production/web/src/orders/MultiIntakeModal.jsx
new file mode 100644
index 0000000..21b400f
--- /dev/null
+++ b/production/web/src/orders/MultiIntakeModal.jsx
@@ -0,0 +1,298 @@
+import { useState } from 'react'
+import { X, Plus, Trash2, Smartphone, Droplet, CheckCircle2, XCircle, Loader2 } from 'lucide-react'
+import * as api from '../lib/api'
+import ClientPicker from './ClientPicker'
+import { inputStyle, labelStyle } from './formStyles'
+import { useDeviceCatalog } from './useDeviceCatalog'
+import CartridgeItemRow from '../cartridges/CartridgeItemRow'
+import { MAX_ITEMS, emptyCartridgeItem } from '../cartridges/cartridgeItem'
+import { useCartridgeCatalog } from '../cartridges/useCartridgeCatalog'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', color: 'var(--text-main)', borderRadius: '16px', width: '100%', maxWidth: '680px',
+  boxShadow: 'var(--shadow-elevated)',
+}
+
+const MAX_DEVICES = 20
+
+const emptyDevice = () => ({
+  _id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+  device_type: '', device_brand: '', device_model: '', problem_description: '', price_estimate: '',
+})
+
+// A lighter-weight device row than OrderModal.CreateForm's full form —
+// deliberately: IMEI lookup, AI intake, warranty claims, prepayment, and
+// custom fields all stay on the single-device flow. This is for the "client
+// dropped off a phone AND a laptop AND some cartridges" case, where the
+// point is getting several tickets logged fast; anything a specific device
+// needs beyond that gets filled in by opening its own order afterward.
+function DeviceRow({ index, device, groups, onChange, onRemove, canRemove }) {
+  return (
+    <div style={{ border: '1.5px solid var(--border-light)', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.78rem', fontWeight: 590, color: 'var(--text-muted)' }}>Устройство {index + 1}</span>
+        {canRemove && (
+          <button type="button" onClick={onRemove} style={{ background: 'none', color: 'var(--accent-red)', padding: '2px', display: 'flex' }}>
+            <Trash2 size={15} />
+          </button>
+        )}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '8px' }}>
+        <div>
+          <label style={labelStyle}>Тип *</label>
+          <input
+            list={`device-groups-${index}`}
+            value={device.device_type}
+            onChange={(e) => onChange('device_type', e.target.value)}
+            placeholder="Телефон, ноутбук..."
+            style={inputStyle}
+            required
+          />
+          <datalist id={`device-groups-${index}`}>
+            {groups.map((g) => <option key={g.id} value={g.name} />)}
+          </datalist>
+        </div>
+        <div>
+          <label style={labelStyle}>Бренд</label>
+          <input value={device.device_brand} onChange={(e) => onChange('device_brand', e.target.value)} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Модель</label>
+          <input value={device.device_model} onChange={(e) => onChange('device_model', e.target.value)} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Оценка, ₽</label>
+          <input type="number" value={device.price_estimate} onChange={(e) => onChange('price_estimate', e.target.value)} style={inputStyle} />
+        </div>
+      </div>
+      <div>
+        <label style={labelStyle}>Проблема *</label>
+        <textarea value={device.problem_description} onChange={(e) => onChange('problem_description', e.target.value)} rows={2} style={{ ...inputStyle, resize: 'vertical' }} required />
+      </div>
+    </div>
+  )
+}
+
+// Result summary after submit — per-ticket outcome, since a multi-item
+// intake is N+1 independent API calls (one per device order, one shared
+// cartridge batch if any cartridge rows were filled) with no shared
+// transaction across them. Partial failure is expected to happen sometimes
+// (a required custom field this quick form doesn't collect, e.g.) — the
+// staff member sees exactly which tickets landed and which didn't, rather
+// than an all-or-nothing outcome that would either lose the good ones or
+// block them behind the one row that needs fixing.
+function ResultList({ results }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {results.map((r, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+          {r.ok ? <CheckCircle2 size={16} color="var(--color-success)" style={{ flexShrink: 0 }} /> : <XCircle size={16} color="var(--color-danger)" style={{ flexShrink: 0 }} />}
+          <span style={{ flex: 1 }}>
+            {r.label}
+            {r.ok && r.number ? ` — № ${r.number}` : ''}
+            {!r.ok && <span style={{ color: 'var(--color-danger)' }}> — {r.error}</span>}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// "Несколько устройств" entry type (see NewEntryTypeModal) — one client,
+// several things dropped off in one visit. Each repair device becomes its
+// own order (a different department may work each one, on a different
+// timeline), while all cartridge rows collapse into a single batch — same
+// as picking "Картридж" would create, since a batch already IS the "several
+// cartridges, one ticket" shape. Two independent creation paths under one
+// intake screen, not a new backend concept.
+const MultiIntakeModal = ({ onClose, onSaved }) => {
+  const [client, setClient] = useState(null)
+  const [devices, setDevices] = useState([emptyDevice()])
+  const [cartridgeItems, setCartridgeItems] = useState([])
+  const { groups } = useDeviceCatalog()
+  const { brands: cartridgeBrands, addBrand: addCartridgeBrand } = useCartridgeCatalog()
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [results, setResults] = useState(null)
+
+  const updateDevice = (index, field, value) => setDevices((prev) => prev.map((d, i) => (i === index ? { ...d, [field]: value } : d)))
+  const addDevice = () => setDevices((prev) => (prev.length >= MAX_DEVICES ? prev : [...prev, emptyDevice()]))
+  const removeDevice = (index) => setDevices((prev) => prev.filter((_, i) => i !== index))
+
+  const updateCartridgeItem = (index, field, value) => setCartridgeItems((prev) => prev.map((it, i) => (i === index ? { ...it, [field]: value } : it)))
+  const addCartridgeItem = () => setCartridgeItems((prev) => (prev.length >= MAX_ITEMS ? prev : [...prev, emptyCartridgeItem()]))
+  const removeCartridgeItem = (index) => setCartridgeItems((prev) => prev.filter((_, i) => i !== index))
+
+  const filledDevices = devices.filter((d) => d.device_type.trim() && d.problem_description.trim())
+  const filledCartridges = cartridgeItems.filter((it) => it.model.trim())
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!client) { setError('Выберите или создайте клиента'); return }
+    if (filledDevices.length === 0 && filledCartridges.length === 0) {
+      setError('Добавьте хотя бы одно устройство или картридж')
+      return
+    }
+    setSaving(true)
+    setError('')
+
+    const out = []
+    for (const d of filledDevices) {
+      const label = `${d.device_type}${d.device_brand ? ` · ${d.device_brand}` : ''}${d.device_model ? ` ${d.device_model}` : ''}`
+      try {
+        const created = await api.orders.create({
+          client_id: client.id,
+          device_type: d.device_type,
+          device_brand: d.device_brand || undefined,
+          device_model: d.device_model || undefined,
+          problem_description: d.problem_description,
+          price_estimate: d.price_estimate || null,
+        })
+        out.push({ ok: true, label, number: created?.order_number })
+      } catch (err) {
+        out.push({ ok: false, label, error: err.message })
+      }
+    }
+    if (filledCartridges.length > 0) {
+      const label = `Партия картриджей (${filledCartridges.length} шт.)`
+      try {
+        const created = await api.cartridges.create({
+          client_id: client.id,
+          items: filledCartridges.map((it) => ({
+            model: it.model,
+            color: it.color || null,
+            tag: it.tag || null,
+            refill_count: it.refill_count === '' ? 0 : Number(it.refill_count),
+            price: it.price === '' ? null : it.price,
+            note: it.note || null,
+            cartridge_brand_id: it.cartridge_brand_id || undefined,
+            cartridge_model_id: it.cartridge_model_id || undefined,
+          })),
+        })
+        out.push({ ok: true, label, number: created?.order_number })
+      } catch (err) {
+        out.push({ ok: false, label, error: err.message })
+      }
+    }
+
+    setSaving(false)
+    setResults(out)
+    if (out.every((r) => r.ok)) onSaved()
+  }
+
+  if (results) {
+    const anyFailed = results.some((r) => !r.ok)
+    return (
+      <div style={overlayStyle} onClick={anyFailed ? undefined : onClose}>
+        <div style={panelStyle} onClick={(e) => e.stopPropagation()}>
+          <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Приёмка завершена</h2>
+              <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+            </div>
+            <ResultList results={results} />
+            {anyFailed && (
+              <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
+                Успешно созданные заявки уже сохранены. Для неудачных — откройте обычную форму приёмки отдельно.
+              </p>
+            )}
+            <button type="button" onClick={onClose} className="btn-primary" style={{ padding: '11px 16px', fontSize: '0.9rem' }}>
+              Готово
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px', maxHeight: '85vh', overflowY: 'auto' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Приём нескольких устройств</h2>
+            <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+          </div>
+          <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginTop: '-8px' }}>
+            Один клиент, несколько вещей за один визит — каждое устройство станет отдельной заявкой на ремонт, все картриджи объединятся в одну партию на заправку.
+          </p>
+
+          <div>
+            <label style={labelStyle}>Клиент *</label>
+            <ClientPicker selectedClient={client} onSelect={setClient} />
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Smartphone size={15} color="var(--color-accent-fg)" />
+              <label style={labelStyle}>Устройства в ремонт</label>
+            </div>
+            {devices.map((device, index) => (
+              <DeviceRow
+                key={device._id}
+                index={index}
+                device={device}
+                groups={groups}
+                onChange={(field, value) => updateDevice(index, field, value)}
+                onRemove={() => removeDevice(index)}
+                canRemove={devices.length > 0}
+              />
+            ))}
+            <button
+              type="button"
+              onClick={addDevice}
+              disabled={devices.length >= MAX_DEVICES}
+              className="btn-outline"
+              style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px', justifyContent: 'center', opacity: devices.length >= MAX_DEVICES ? 0.5 : 1 }}
+            >
+              <Plus size={14} /> Добавить устройство
+            </button>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Droplet size={15} color="var(--color-accent-fg)" />
+              <label style={labelStyle}>Картриджи (необязательно)</label>
+            </div>
+            {cartridgeItems.map((item, index) => (
+              <CartridgeItemRow
+                key={item._id}
+                index={index}
+                item={item}
+                clientId={client?.id}
+                brands={cartridgeBrands}
+                addBrand={addCartridgeBrand}
+                onChange={(field, value) => updateCartridgeItem(index, field, value)}
+                onRemove={() => removeCartridgeItem(index)}
+                canRemove
+              />
+            ))}
+            <button
+              type="button"
+              onClick={addCartridgeItem}
+              disabled={cartridgeItems.length >= MAX_ITEMS}
+              className="btn-outline"
+              style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px', justifyContent: 'center', opacity: cartridgeItems.length >= MAX_ITEMS ? 0.5 : 1 }}
+            >
+              <Plus size={14} /> Добавить картридж
+            </button>
+          </div>
+
+          {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+
+          <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', opacity: saving ? 0.7 : 1 }}>
+            {saving && <Loader2 size={15} style={{ animation: 'spin 0.7s linear infinite' }} />}
+            {saving ? 'Создаём заявки...' : 'Оформить приёмку'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default MultiIntakeModal
diff --git a/production/web/src/orders/NewEntryTypeModal.jsx b/production/web/src/orders/NewEntryTypeModal.jsx
new file mode 100644
index 0000000..f0b61f1
--- /dev/null
+++ b/production/web/src/orders/NewEntryTypeModal.jsx
@@ -0,0 +1,50 @@
+import { Wrench, Droplet, Car, Layers } from 'lucide-react'
+import Modal from '../ui/Modal'
+
+const OPTIONS = [
+  { key: 'repair', icon: Wrench, label: 'Ремонт', hint: 'Обычная заявка на приём в ремонт' },
+  { key: 'cartridge', icon: Droplet, label: 'Картридж', hint: 'Заправка/перепрошивка — партия картриджей' },
+  { key: 'onsite', icon: Car, label: 'Выездной ремонт', hint: 'Мастер едет к клиенту — попадёт в «Заявки на запись»' },
+  { key: 'multi', icon: Layers, label: 'Несколько устройств', hint: 'Клиент принёс сразу несколько вещей — заявки разойдутся по своим отделам' },
+]
+
+// The "+Заявка" header button's first step — a fork rather than always
+// opening OrderModal directly, since a cartridge batch, an on-site repair
+// request, and a multi-item intake are all structurally different things
+// (a batch of items vs. a single device; a booking-queue entry vs. an
+// order; N separate tickets vs. one). See AdminLayout.jsx's
+// handleNewClick for what each choice actually does.
+const NewEntryTypeModal = ({ onClose, onChoose }) => {
+  return (
+    <Modal title="Что создать?" onClose={onClose} maxWidth="420px">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {OPTIONS.map(({ key, icon: Icon, label, hint }) => (
+          <button
+            key={key}
+            type="button"
+            onClick={() => onChoose(key)}
+            className="btn-outline"
+            style={{
+              display: 'flex', alignItems: 'center', gap: '12px', padding: '12px 14px',
+              textAlign: 'left', width: '100%', fontWeight: 400,
+            }}
+          >
+            <span style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+              width: '36px', height: '36px', borderRadius: '8px',
+              background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+            }}>
+              <Icon size={17} />
+            </span>
+            <span>
+              <span style={{ display: 'block', fontSize: '0.9rem', fontWeight: 510, color: 'var(--color-text)' }}>{label}</span>
+              <span style={{ display: 'block', fontSize: '0.76rem', color: 'var(--color-text-muted)', marginTop: '1px' }}>{hint}</span>
+            </span>
+          </button>
+        ))}
+      </div>
+    </Modal>
+  )
+}
+
+export default NewEntryTypeModal
diff --git a/production/web/src/orders/NotifyClientButton.jsx b/production/web/src/orders/NotifyClientButton.jsx
new file mode 100644
index 0000000..323dbbd
--- /dev/null
+++ b/production/web/src/orders/NotifyClientButton.jsx
@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import * as api from '../lib/api'
+
+// Manual "send now" from OrderModal — reuses the same test-notify endpoint
+// as ClientNotificationsSection (there's no order-specific message on the
+// backend yet, so this is a way for staff to nudge/verify a client's
+// channel without waiting for the next automatic status-change trigger).
+const NotifyClientButton = ({ clientId }) => {
+  const [busy, setBusy] = useState(false)
+  const [result, setResult] = useState(null)
+
+  const handleClick = async () => {
+    setBusy(true)
+    setResult(null)
+    try {
+      const data = await api.clientNotify.test(clientId)
+      setResult({ ok: true, channel: data.channel })
+    } catch (err) {
+      setResult({ ok: false, error: err.message })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!clientId) return null
+
+  return (
+    <>
+      <button type="button" onClick={handleClick} disabled={busy} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+        {busy ? 'Отправляем...' : 'Уведомить клиента'}
+      </button>
+      {result && (
+        <span style={{ fontSize: '0.78rem', color: result.ok ? 'var(--accent-green)' : 'var(--accent-red)' }}>
+          {result.ok ? `Отправлено (${result.channel === 'telegram' ? 'Telegram' : 'SMS'})` : result.error}
+        </span>
+      )}
+    </>
+  )
+}
+
+export default NotifyClientButton
diff --git a/production/web/src/orders/OrderCard.jsx b/production/web/src/orders/OrderCard.jsx
new file mode 100644
index 0000000..63d057f
--- /dev/null
+++ b/production/web/src/orders/OrderCard.jsx
@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, ShieldCheck, Clock } from 'lucide-react'
+import { getOrderAge } from './orderAge'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+import QuickAddDeliveryButton from '../delivery/QuickAddDeliveryButton'
+import { warrantyStatus, WARRANTY_STATUS_COLORS, formatWarranty } from '../lib/warranty'
+
+const OrderCard = ({ order, onClick }) => {
+  const { modules } = useFeatureModules()
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: order.id,
+  })
+  // Hover lift/shadow have to be tracked in state rather than a CSS :hover
+  // rule — dnd-kit already writes `transform`/inline box-shadow-adjacent
+  // state onto this element for drag positioning, and an inline style
+  // attribute always wins over a stylesheet rule, so a CSS hover would
+  // silently never fire.
+  const [hovered, setHovered] = useState(false)
+
+  // Traffic light, not a binary "still valid" check — an expired warranty
+  // used to just vanish here (icon only rendered while >= today); now it
+  // shows red instead, which is the more useful signal on a card someone's
+  // triaging (see lib/warranty.js's warrantyStatus for the three states).
+  const warranty = warrantyStatus(order.warranty_until)
+  const price = order.final_price || order.price_estimate
+  const age = getOrderAge(order)
+
+  return (
+    <div
+      ref={setNodeRef}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        transform: isDragging ? CSS.Transform.toString(transform) : (hovered ? 'translateY(-2px)' : CSS.Transform.toString(transform)),
+        transition: isDragging ? transition : `${transition ? transition + ', ' : ''}transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease`,
+        opacity: isDragging ? 0.45 : 1,
+        background: 'var(--color-surface)',
+        border: `1px solid ${hovered ? 'var(--color-accent)' : 'var(--color-border)'}`,
+        borderRadius: '12px',
+        padding: '14px',
+        cursor: 'pointer',
+        boxShadow: isDragging ? 'var(--shadow-elevated)' : (hovered ? 'var(--shadow-elevated)' : 'var(--shadow-card)'),
+        display: 'flex',
+        gap: '9px',
+        userSelect: 'none',
+      }}
+      onClick={onClick}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        style={{ color: 'var(--text-muted)', cursor: 'grab', paddingTop: '2px', flexShrink: 0 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <GripVertical size={15} />
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {order.order_number && (
+          <p style={{ fontSize: '0.68rem', color: 'var(--text-muted)', fontWeight: 510, letterSpacing: '0.03em', marginBottom: '3px' }}>
+            № {order.order_number}
+          </p>
+        )}
+        <p style={{
+          fontWeight: 510, fontFamily: 'var(--font-heading)',
+          fontSize: '0.96rem', marginBottom: '4px',
+          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        }}>
+          {order.device_type}{order.device_brand ? ` · ${order.device_brand}` : ''}
+        </p>
+        <p style={{
+          fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '8px',
+          overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box',
+          WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
+        }}>
+          {order.problem_description}
+        </p>
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', alignItems: 'center' }}>
+          {order.assigned_master_name && (
+            <span style={{
+              fontSize: '0.72rem', background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+              padding: '2px 8px', borderRadius: '50px', fontWeight: 510,
+            }}>
+              {order.assigned_master_name}
+            </span>
+          )}
+          {warranty && (
+            <span title={formatWarranty(order.warranty_until)} style={{ display: 'flex' }}>
+              <ShieldCheck size={13} color={WARRANTY_STATUS_COLORS[warranty]} />
+            </span>
+          )}
+          {modules.delivery !== false && <QuickAddDeliveryButton orderId={order.id} />}
+        </div>
+        {price && (
+          <p style={{ fontFamily: 'var(--font-heading)', fontSize: '0.9rem', fontWeight: 510, color: 'var(--color-accent-fg)', marginTop: '8px' }}>
+            {Number(price).toLocaleString('ru-RU')} ₽
+          </p>
+        )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '6px' }}>
+          <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>
+            {new Date(order.created_at).toLocaleDateString('ru-RU')}
+          </p>
+          {age && (
+            <span style={{
+              display: 'flex', alignItems: 'center', gap: '3px',
+              fontSize: '0.68rem', fontWeight: 590, color: age.color,
+            }}>
+              <Clock size={10} /> {age.days} дн. без изменений
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OrderCard
diff --git a/production/web/src/orders/OrderModal.jsx b/production/web/src/orders/OrderModal.jsx
new file mode 100644
index 0000000..dab7f47
--- /dev/null
+++ b/production/web/src/orders/OrderModal.jsx
@@ -0,0 +1,1176 @@
+import { useState, useEffect } from 'react'
+import { X, MessageSquare, Camera, RefreshCw, Copy, Check, Smartphone, Wrench, Wallet, Truck, History, PackageCheck, ListPlus, Trash2, ClipboardCheck, QrCode } from 'lucide-react'
+import * as api from '../lib/api'
+import { useAuth } from '../auth/AuthContext'
+import { useOrderStatuses } from './statuses'
+import ClientPicker from './ClientPicker'
+import AiIntakeBox from './AiIntakeBox'
+import PhotoThumb from './PhotoThumb'
+import { inputStyle, labelStyle } from './formStyles'
+import PartsUsedSection from '../inventory/PartsUsedSection'
+import ServiceItemsSection from './ServiceItemsSection'
+import NotifyClientButton from './NotifyClientButton'
+import CashSection from '../cash/CashSection'
+import DeliverySection from '../delivery/DeliverySection'
+import AIDiagnosisPanel from './AIDiagnosisPanel'
+import CustomFieldsSection from './CustomFieldsSection'
+import { buildCustomFieldsPayload } from './customFieldsPayload'
+import { useOrderFields } from '../orderfields/useOrderFields'
+import WarrantyBadge from './WarrantyBadge'
+import { templateForDeviceType, initChecklistState, checklistSummary } from '../lib/checklistTemplates'
+import ChecklistModal from './ChecklistModal'
+import CommonFaultsPicker from './CommonFaultsPicker'
+import { useDeviceCatalog } from './useDeviceCatalog'
+import { useAssignableStaff } from './useAssignableStaff'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+import Tabs, { TabPanel } from '../ui/Tabs'
+import StatusPicker from './StatusPicker'
+import IssueOrderModal from './IssueOrderModal'
+import CatalogPickerModal from './CatalogPickerModal'
+import PrinterQrScanField from './PrinterQrScanField'
+import PrinterLabelPrint from './PrinterLabelPrint'
+import MessengerButtons from '../ui/MessengerButtons'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '640px',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+}
+
+const EDIT_TABS = [
+  { key: 'device', label: 'Клиент и устройство', icon: Smartphone },
+  { key: 'work', label: 'Работы и запчасти', icon: Wrench },
+  { key: 'payment', label: 'Оплата', icon: Wallet },
+  { key: 'delivery', label: 'Доставка', icon: Truck },
+  { key: 'history', label: 'История', icon: History },
+]
+
+// Shown in place of the create form the instant a new order lands —
+// staff walked away from a physical intake desk with a device in hand;
+// the natural next step is a printed receipt for the client, right then,
+// not three clicks later after re-opening the card from the Kanban board.
+// onDone both closes this modal and triggers the board's refetch (see
+// KanbanBoard.jsx's own onSaved wiring) — deferred until here rather than
+// fired immediately on create, since that would have closed the modal
+// before this screen ever got a chance to render.
+function CreatedDocumentsPrompt({ order, onDone }) {
+  const [error, setError] = useState('')
+  const handlePrint = async (kind) => {
+    setError('')
+    try {
+      await api.orders.openDocument(order.id, kind)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+  return (
+    <div style={{ padding: '32px 24px', display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center', textAlign: 'center' }}>
+      <div style={{
+        width: '48px', height: '48px', borderRadius: '12px', background: 'var(--color-accent-soft)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}>
+        <Check size={22} color="var(--color-accent-fg)" />
+      </div>
+      <div>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.15rem' }}>
+          Заявка {order.order_number ? `№ ${order.order_number}` : ''} создана
+        </h2>
+        <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginTop: '4px' }}>Какие документы распечатать?</p>
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', justifyContent: 'center' }}>
+        <button type="button" onClick={() => handlePrint('receipt')} className="btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+          Квитанция
+        </button>
+        <button type="button" onClick={() => handlePrint('act')} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+          Акт приёма
+        </button>
+        <button type="button" onClick={() => handlePrint('invoice')} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+          Счёт
+        </button>
+      </div>
+      {error && <p style={{ fontSize: '0.8rem', color: 'var(--color-danger)' }}>{error}</p>}
+      <button type="button" onClick={onDone} style={{ background: 'none', color: 'var(--color-text-muted)', fontSize: '0.82rem', textDecoration: 'underline' }}>
+        Пропустить, готово
+      </button>
+    </div>
+  )
+}
+
+function CreateForm({ onClose, onSaved }) {
+  const { staff } = useAuth()
+  const [client, setClient] = useState(null)
+  const [form, setForm] = useState({ device_type: '', device_brand: '', device_model: '', serial_number: '', problem_description: '', price_estimate: '' })
+  const [deviceGroupId, setDeviceGroupId] = useState('')
+  const [deviceBrandId, setDeviceBrandId] = useState('')
+  const [newBrandName, setNewBrandName] = useState('')
+  const [addingBrand, setAddingBrand] = useState(false)
+  const { groups, brands, addBrand } = useDeviceCatalog()
+  const { modules } = useFeatureModules()
+  const catalogsEnabled = modules.catalogs !== false
+  const assignableStaff = useAssignableStaff()
+  const [assignedMasterId, setAssignedMasterId] = useState('')
+  const [prepaymentAmount, setPrepaymentAmount] = useState('')
+  const [prepaymentMethod, setPrepaymentMethod] = useState('cash')
+  const [loyaltyBalance, setLoyaltyBalance] = useState(null)
+  const [redeemPoints, setRedeemPoints] = useState('')
+  const [clientQueryHint, setClientQueryHint] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [created, setCreated] = useState(null)
+  const [imeiLoading, setImeiLoading] = useState(false)
+  const [imeiError, setImeiError] = useState('')
+  const { fields: customFieldDefs } = useOrderFields(false)
+  const [customFieldValues, setCustomFieldValues] = useState({})
+  const setCustomField = (key, value) => setCustomFieldValues((v) => ({ ...v, [key]: value }))
+
+  // Тип техники и группа устройства — по сути один и тот же выбор
+  // ("Группа устройства" в справочнике это и есть тип: Ноутбуки, Телефоны
+  // и т.д.), поэтому это единственное поле — текстовый input с datalist из
+  // справочника групп. Ввод произвольного текста остаётся возможным
+  // (группа создаётся только владельцем — см. main.go ownerOnly), но при
+  // совпадении с именем группы (без учёта регистра) мы всё равно
+  // проставляем device_group_id для FK-связи.
+  const [recentModels, setRecentModels] = useState([])
+
+  // Осмотр при приёмке — same device-type-keyed template + don't-clobber-
+  // touched-answers pattern as TradeInModal (see ../lib/checklistTemplates.js's
+  // doc comment). Initialized eagerly with the generic template (empty
+  // device type) rather than staying null until "Тип техники" gets a first
+  // keystroke — staff kept reporting "there's no checklist" because the
+  // section used to render nothing at all until that field had a value.
+  // Now "Провести осмотр" is always clickable; deriveChecklist still
+  // re-templates it for the real device type the moment that's known, as
+  // long as nothing's been answered yet.
+  const [checklist, setChecklist] = useState(() => initChecklistState(templateForDeviceType('')))
+  const [showChecklistModal, setShowChecklistModal] = useState(false)
+  const isChecklistUntouched = (cl) =>
+    !cl || (cl.checks.every((c) => c.status === 'unchecked' && !c.note) && cl.completeness.every((c) => !c.present))
+  const deriveChecklist = (deviceType) => {
+    if (isChecklistUntouched(checklist)) setChecklist(initChecklistState(templateForDeviceType(deviceType)))
+  }
+  const cycleCheckStatus = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      checks: prev.checks.map((c, i) => {
+        if (i !== idx) return c
+        const next = { unchecked: 'ok', ok: 'defect', defect: 'unchecked' }[c.status]
+        return { ...c, status: next }
+      }),
+    }))
+  const setCheckNote = (idx, note) =>
+    setChecklist((prev) => ({ ...prev, checks: prev.checks.map((c, i) => (i === idx ? { ...c, note } : c)) }))
+  const toggleCompleteness = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      completeness: prev.completeness.map((c, i) => (i === idx ? { ...c, present: !c.present } : c)),
+    }))
+
+  const handleDeviceTypeChange = (e) => {
+    const value = e.target.value
+    setForm((f) => ({ ...f, device_type: value }))
+    setDeviceGroupId(matchGroupID(value))
+    deriveChecklist(value)
+  }
+  const handleSelectBrand = (e) => {
+    const id = e.target.value
+    if (id === '__add__') { setAddingBrand(true); return }
+    setDeviceBrandId(id)
+    const b = brands.find((x) => x.id === id)
+    if (b) setForm((f) => ({ ...f, device_brand: b.name }))
+  }
+  const handleAddBrand = async () => {
+    if (!newBrandName.trim()) return
+    try {
+      const b = await addBrand(newBrandName.trim())
+      setDeviceBrandId(b.id)
+      setForm((f) => ({ ...f, device_brand: b.name }))
+      setNewBrandName('')
+      setAddingBrand(false)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  // Гарантийный случай — доступен только когда выбран клиент с прошлыми
+  // заказами (см. клиент/history ниже). isWarrantyClaim=true требует
+  // originalOrderId — оба сбрасываются при смене клиента.
+  const [clientOrders, setClientOrders] = useState([])
+  const [isWarrantyClaim, setIsWarrantyClaim] = useState(false)
+  const [originalOrderId, setOriginalOrderId] = useState('')
+
+  const handleSelectClient = (c) => {
+    setClient(c)
+    setIsWarrantyClaim(false)
+    setOriginalOrderId('')
+    setClientOrders([])
+    setRedeemPoints('')
+    setLoyaltyBalance(null)
+    if (c) {
+      api.clients.get(c.id).then((data) => setClientOrders(data.orders || [])).catch(() => {})
+      api.loyalty.get(c.id).then((data) => setLoyaltyBalance(data.balance)).catch(() => {})
+    }
+  }
+
+  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }))
+
+  // Best-effort catalog match for text that arrived from IMEI lookup or AI
+  // extraction — exact, case-insensitive only. No match just leaves the
+  // picker unselected; staff can still pick manually, the text field
+  // itself is unaffected either way.
+  const matchBrandID = (name) => brands.find((b) => b.name.toLowerCase() === (name || '').toLowerCase())?.id || ''
+  const matchGroupID = (name) => groups.find((g) => g.name.toLowerCase() === (name || '').toLowerCase())?.id || ''
+
+  // Datalist suggestions for "Модель" — models already seen on past orders
+  // for this brand, since there's no models catalog table (see
+  // devicecatalog.Handler.RecentModels doc comment).
+  useEffect(() => {
+    if (!deviceBrandId) { setRecentModels([]); return }
+    api.deviceBrands.recentModels(deviceBrandId).then(setRecentModels).catch(() => setRecentModels([]))
+  }, [deviceBrandId])
+
+  // Fills device_brand/device_model from the serial number field's current
+  // value (staff pastes the IMEI there — the same field a phone's own
+  // serial number would go). Only overwrites brand/model if the lookup
+  // actually found something; never touches serial_number or device_type
+  // itself (телефон vs the IMEI's own device_type isn't something this
+  // lookup determines — brand/model only).
+  const handleImeiLookup = async () => {
+    if (!form.serial_number.trim()) return
+    setImeiLoading(true)
+    setImeiError('')
+    try {
+      const res = await api.imei.lookup(form.serial_number)
+      if (!res.found) {
+        setImeiError('Модель не найдена по этому IMEI')
+        return
+      }
+      setForm((f) => ({
+        ...f,
+        device_brand: res.brand || f.device_brand,
+        device_model: res.model || f.device_model,
+      }))
+      if (res.brand) setDeviceBrandId(matchBrandID(res.brand))
+    } catch (err) {
+      setImeiError(err.message)
+    } finally {
+      setImeiLoading(false)
+    }
+  }
+
+  // AI only fills device/problem/price fields directly — client_id stays a
+  // real FK staff pick explicitly, so a name/phone hint just seeds
+  // ClientPicker's search box (see ClientPicker's initialQuery prop).
+  const handleAiExtracted = (fields) => {
+    setForm((f) => ({
+      ...f,
+      device_type: fields.device_type || f.device_type,
+      device_brand: fields.device_brand || f.device_brand,
+      device_model: fields.device_model || f.device_model,
+      serial_number: fields.serial_number || f.serial_number,
+      problem_description: fields.problem_description || f.problem_description,
+      price_estimate: fields.price_estimate || f.price_estimate,
+    }))
+    if (fields.device_type) { setDeviceGroupId(matchGroupID(fields.device_type)); deriveChecklist(fields.device_type) }
+    if (fields.device_brand) setDeviceBrandId(matchBrandID(fields.device_brand))
+    setClientQueryHint(fields.client_phone || fields.client_name || '')
+  }
+
+  // Resolves a scanned printer QR label (see PrinterQrScanField) — pre-fills
+  // the device fields and, when the printer belongs to a known client,
+  // auto-selects that client too (same reasoning as handleAiExtracted: this
+  // is what makes "the same physical printer" actually save staff re-typing
+  // instead of just being a lookup). printerScan is kept so handleSubmit can
+  // link the new order to the same recurring_item_id, continuing its history
+  // instead of starting a fresh identity.
+  const [printerScan, setPrinterScan] = useState(null)
+  const handlePrinterResolved = (code, data) => {
+    setPrinterScan(data)
+    setForm((f) => ({
+      ...f,
+      device_type: f.device_type || 'Принтер',
+      device_brand: data.device_brand || f.device_brand,
+      device_model: data.device_model || f.device_model,
+      serial_number: data.serial_number || f.serial_number,
+    }))
+    if (!form.device_type) { setDeviceGroupId(matchGroupID('Принтер')); deriveChecklist('Принтер') }
+    if (data.device_brand) setDeviceBrandId(matchBrandID(data.device_brand))
+    if (data.client_id && (!client || client.id !== data.client_id)) {
+      api.clients.get(data.client_id).then((res) => handleSelectClient(res.client)).catch(() => {})
+    }
+  }
+
+  const redeemAmount = Math.min(Number(redeemPoints) || 0, loyaltyBalance || 0, Math.floor(Number(prepaymentAmount) || 0))
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!client) { setError('Выберите или создайте клиента'); return }
+    if (!form.device_type || !form.problem_description) { setError('Заполните обязательные поля'); return }
+    if (isWarrantyClaim && !originalOrderId) { setError('Выберите исходный заказ для гарантийного случая'); return }
+    if (prepaymentAmount && Number(prepaymentAmount) <= 0) { setError('Предоплата должна быть положительным числом'); return }
+    setSaving(true)
+    setError('')
+    try {
+      const master = assignableStaff.find((s) => s.id === assignedMasterId)
+      const result = await api.orders.create({
+        ...form,
+        client_id: client.id,
+        device_group_id: deviceGroupId || undefined,
+        device_brand_id: deviceBrandId || undefined,
+        price_estimate: form.price_estimate || null,
+        custom_fields: buildCustomFieldsPayload(customFieldValues),
+        checklist: isChecklistUntouched(checklist) ? undefined : checklist,
+        is_warranty_claim: isWarrantyClaim,
+        original_order_id: isWarrantyClaim ? originalOrderId : undefined,
+        assigned_master_id: assignedMasterId || undefined,
+        assigned_master_name: master?.name || undefined,
+        prepayment_amount: prepaymentAmount || undefined,
+        prepayment_method: prepaymentAmount ? prepaymentMethod : undefined,
+        redeem_points: redeemAmount || undefined,
+        printer_recurring_item_id: printerScan?.id || undefined,
+      })
+      setCreated(result)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (created) {
+    return <CreatedDocumentsPrompt order={created} onDone={onSaved} />
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Новая заявка</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <AiIntakeBox onExtracted={handleAiExtracted} />
+
+      <div>
+        <label style={labelStyle}>Клиент *</label>
+        <ClientPicker selectedClient={client} onSelect={handleSelectClient} initialQuery={clientQueryHint} />
+      </div>
+
+      {clientOrders.length > 0 && (
+        <div>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+            <input type="checkbox" checked={isWarrantyClaim} onChange={(e) => { setIsWarrantyClaim(e.target.checked); if (!e.target.checked) setOriginalOrderId('') }} />
+            Гарантийный случай (повторное обращение по прошлому заказу)
+          </label>
+          {isWarrantyClaim && (
+            <select value={originalOrderId} onChange={(e) => setOriginalOrderId(e.target.value)} style={{ ...inputStyle, marginTop: '8px' }} required>
+              <option value="">— выберите исходный заказ —</option>
+              {clientOrders.map((o) => {
+                const warrantyOk = o.warranty_until && new Date(o.warranty_until) >= new Date()
+                const label = `${o.device_type} · ${new Date(o.created_at).toLocaleDateString('ru-RU')}` +
+                  (o.warranty_until ? ` · гарантия ${warrantyOk ? 'до ' + new Date(o.warranty_until).toLocaleDateString('ru-RU') : 'истекла'}` : ' · без гарантии')
+                return <option key={o.id} value={o.id}>{label}</option>
+              })}
+            </select>
+          )}
+        </div>
+      )}
+
+      <div>
+        <label style={labelStyle}>QR-этикетка принтера (если есть)</label>
+        <PrinterQrScanField onResolved={handlePrinterResolved} />
+        {printerScan && (
+          <p style={{ fontSize: '0.78rem', color: 'var(--accent-green)', marginTop: '4px' }}>
+            Найден по этикетке
+            {printerScan.history.length > 0
+              ? ` · был в ремонте ${printerScan.history.length} раз(а), последний — ${new Date(printerScan.history[0].created_at).toLocaleDateString('ru-RU')}`
+              : ' · первый приём по этой этикетке'}
+          </p>
+        )}
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Тип техники *</label>
+          <input
+            list="device-type-options"
+            value={form.device_type}
+            onChange={handleDeviceTypeChange}
+            placeholder="ноутбук, принтер..."
+            style={inputStyle}
+            required
+          />
+          <datalist id="device-type-options">
+            {catalogsEnabled && groups.map((g) => <option key={g.id} value={g.name} />)}
+          </datalist>
+        </div>
+        <div>
+          <label style={labelStyle}>Производитель</label>
+          {!catalogsEnabled ? (
+            <input value={form.device_brand} onChange={set('device_brand')} placeholder="Apple, Samsung..." style={inputStyle} />
+          ) : addingBrand ? (
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <input value={newBrandName} onChange={(e) => setNewBrandName(e.target.value)} placeholder="Новый производитель" style={inputStyle} autoFocus />
+              <button type="button" onClick={handleAddBrand} className="btn-outline" style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>Ок</button>
+              <button type="button" onClick={() => { setAddingBrand(false); setNewBrandName('') }} style={{ background: 'none', color: 'var(--text-muted)', padding: '0 4px' }}>✕</button>
+            </div>
+          ) : (
+            <select value={deviceBrandId} onChange={handleSelectBrand} style={inputStyle}>
+              <option value="">— выбрать из справочника —</option>
+              {brands.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
+              <option value="__add__">+ Добавить нового производителя...</option>
+            </select>
+          )}
+        </div>
+        <div>
+          <label style={labelStyle}>Модель</label>
+          <input list="device-model-options" value={form.device_model} onChange={set('device_model')} style={inputStyle} />
+          <datalist id="device-model-options">
+            {recentModels.map((m) => <option key={m} value={m} />)}
+          </datalist>
+        </div>
+        <div>
+          <label style={labelStyle}>Серийный номер / IMEI</label>
+          <div style={{ display: 'flex', gap: '6px' }}>
+            <input value={form.serial_number} onChange={set('serial_number')} style={inputStyle} />
+            <button
+              type="button"
+              onClick={handleImeiLookup}
+              disabled={imeiLoading || !form.serial_number.trim()}
+              className="btn-outline"
+              style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}
+              title="Определить бренд/модель по IMEI"
+            >
+              {imeiLoading ? '...' : 'IMEI'}
+            </button>
+          </div>
+          {imeiError && <p style={{ color: 'var(--accent-red)', fontSize: '0.76rem', marginTop: '4px' }}>{imeiError}</p>}
+        </div>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Описание проблемы *</label>
+        <textarea value={form.problem_description} onChange={set('problem_description')} rows={3} style={{ ...inputStyle, resize: 'vertical' }} required />
+        <CommonFaultsPicker value={form.problem_description} onChange={(text) => setForm((f) => ({ ...f, problem_description: text }))} />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Предварительная оценка стоимости, ₽</label>
+          <input type="number" value={form.price_estimate} onChange={set('price_estimate')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Мастер</label>
+          <div style={{ display: 'flex', gap: '6px' }}>
+            <select value={assignedMasterId} onChange={(e) => setAssignedMasterId(e.target.value)} style={inputStyle}>
+              <option value="">— не назначен —</option>
+              {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+            <button
+              type="button"
+              className="btn-outline"
+              style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}
+              onClick={() => setAssignedMasterId(staff?.id || '')}
+            >
+              Я
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Предоплата, ₽</label>
+          <input type="number" value={prepaymentAmount} onChange={(e) => setPrepaymentAmount(e.target.value)} style={inputStyle} />
+        </div>
+        {prepaymentAmount && (
+          <div>
+            <label style={labelStyle}>Способ оплаты</label>
+            <select value={prepaymentMethod} onChange={(e) => setPrepaymentMethod(e.target.value)} style={inputStyle}>
+              <option value="cash">Наличные</option>
+              <option value="card">Карта</option>
+              <option value="invoice">Безнал / счёт</option>
+            </select>
+          </div>
+        )}
+      </div>
+
+      {prepaymentAmount && loyaltyBalance > 0 && (
+        <div>
+          <label style={labelStyle}>Списать бонусы клиента (баланс: {loyaltyBalance}) — уменьшит предоплату наличными</label>
+          <input
+            type="number" min="0" max={Math.min(loyaltyBalance, Math.floor(Number(prepaymentAmount) || 0))}
+            value={redeemPoints} onChange={(e) => setRedeemPoints(e.target.value)}
+            placeholder="0" style={inputStyle}
+          />
+          {redeemAmount > 0 && (
+            <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', marginTop: '4px' }}>
+              К оплате наличными: {(Number(prepaymentAmount) - redeemAmount).toLocaleString('ru-RU')} ₽
+            </p>
+          )}
+        </div>
+      )}
+
+      <div>
+        <label style={labelStyle}>Осмотр при приёмке</label>
+        <button
+          type="button"
+          onClick={() => setShowChecklistModal(true)}
+          className="btn-outline"
+          style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 14px', fontSize: '0.85rem' }}
+        >
+          <ClipboardCheck size={16} />
+          {(() => {
+            const s = checklistSummary(checklist)
+            if (!s?.started) return 'Провести осмотр'
+            return `Осмотр проведён (${s.checked}/${s.total}${s.defects > 0 ? `, дефектов: ${s.defects}` : ''})`
+          })()}
+        </button>
+      </div>
+      {showChecklistModal && (
+        <ChecklistModal
+          checklist={checklist}
+          onCycleStatus={cycleCheckStatus}
+          onSetNote={setCheckNote}
+          onToggleCompleteness={toggleCompleteness}
+          onClose={() => setShowChecklistModal(false)}
+        />
+      )}
+
+      <CustomFieldsSection fields={customFieldDefs} values={customFieldValues} onChange={setCustomField} />
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px', opacity: saving ? 0.7 : 1 }}>
+        {saving ? 'Создаём...' : 'Создать заявку'}
+      </button>
+    </form>
+  )
+}
+
+function TimelineItem({ event }) {
+  const { labels: STATUS_LABELS } = useOrderStatuses()
+  const icon = event.type === 'comment' ? <MessageSquare size={14} /> : event.type === 'photo' ? <Camera size={14} /> : <RefreshCw size={14} />
+  return (
+    <div style={{ display: 'flex', gap: '10px', padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ color: 'var(--text-muted)', paddingTop: '2px', flexShrink: 0 }}>{icon}</div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <span style={{ fontSize: '0.8rem', fontWeight: 510 }}>{event.staff_name}</span>
+          <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>
+            {new Date(event.created_at).toLocaleString('ru-RU')}
+          </span>
+          {!event.is_public && (
+            <span style={{ fontSize: '0.68rem', background: 'var(--color-surface-sunken)', color: 'var(--text-muted)', padding: '1px 6px', borderRadius: '4px' }}>
+              внутреннее
+            </span>
+          )}
+        </div>
+        {event.type === 'status_change' && (
+          <p style={{ fontSize: '0.85rem', marginTop: '3px' }}>
+            Статус: <strong>{STATUS_LABELS[event.body] || event.body}</strong>
+          </p>
+        )}
+        {event.type === 'comment' && <p style={{ fontSize: '0.85rem', marginTop: '3px' }}>{event.body}</p>}
+        {event.type === 'photo' && <div style={{ marginTop: '6px' }}><PhotoThumb fileKey={event.file_key} /></div>}
+      </div>
+    </div>
+  )
+}
+
+function EditForm({ orderId, onClose }) {
+  const { statuses: STATUSES, labels: STATUS_LABELS, colors: STATUS_COLORS, requiredPermissions: STATUS_REQUIRED_PERMISSIONS } = useOrderStatuses()
+  const { staff } = useAuth()
+  const [order, setOrder] = useState(null)
+  const [client, setClient] = useState(null)
+  const [events, setEvents] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [fields, setFields] = useState({ assigned_master_id: '', assigned_master_name: '', warranty_until: '', price_estimate: '', final_price: '', work_performed: '' })
+  const assignableStaff = useAssignableStaff()
+  const { fields: customFieldDefs } = useOrderFields(false)
+  const [customFieldValues, setCustomFieldValues] = useState({})
+  const setCustomField = (key, value) => setCustomFieldValues((v) => ({ ...v, [key]: value }))
+  const [comment, setComment] = useState('')
+  const [commentPublic, setCommentPublic] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [docError, setDocError] = useState('')
+  const [fieldsError, setFieldsError] = useState('')
+  const [printerLabel, setPrinterLabel] = useState(null)
+  const [printerLabelError, setPrinterLabelError] = useState('')
+  const handlePrintPrinterLabel = async () => {
+    setPrinterLabelError('')
+    try {
+      const data = await api.printers.printLabel(orderId)
+      setPrinterLabel(data)
+    } catch (err) {
+      setPrinterLabelError(err.message)
+    }
+  }
+  const [activeTab, setActiveTab] = useState('device')
+  const { modules } = useFeatureModules()
+  const editTabs = modules.delivery === false ? EDIT_TABS.filter((t) => t.key !== 'delivery') : EDIT_TABS
+  const [hasServiceItems, setHasServiceItems] = useState(false)
+  const [issuing, setIssuing] = useState(false)
+  const [pickingCatalog, setPickingCatalog] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteError, setDeleteError] = useState('')
+
+  // Осмотр при приёмке, editable after creation too — a checklist recorded
+  // at intake used to be write-only (CreateForm saved it, nothing ever
+  // rendered it back), so staff could never review or correct it once the
+  // order existed. null when this order has none (created before the
+  // feature existed, or its device type never matched a template) — no
+  // template is generated after the fact, unlike CreateForm's derive-on-
+  // device-type-change (backfilling one here would look like real intake
+  // data it isn't).
+  const [checklist, setChecklist] = useState(null)
+  const [showChecklistModal, setShowChecklistModal] = useState(false)
+  const cycleCheckStatus = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      checks: prev.checks.map((c, i) => {
+        if (i !== idx) return c
+        const next = { unchecked: 'ok', ok: 'defect', defect: 'unchecked' }[c.status]
+        return { ...c, status: next }
+      }),
+    }))
+  const setCheckNote = (idx, note) =>
+    setChecklist((prev) => ({ ...prev, checks: prev.checks.map((c, i) => (i === idx ? { ...c, note } : c)) }))
+  const toggleCompleteness = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      completeness: prev.completeness.map((c, i) => (i === idx ? { ...c, present: !c.present } : c)),
+    }))
+
+  const handleDelete = async () => {
+    if (!window.confirm('Удалить эту заявку? Действие нельзя отменить из интерфейса.')) return
+    setDeleting(true)
+    setDeleteError('')
+    try {
+      await api.orders.delete(orderId)
+      onClose()
+    } catch (err) {
+      setDeleteError(err.message)
+      setDeleting(false)
+    }
+  }
+  const [bulkRefreshKey, setBulkRefreshKey] = useState(0)
+
+  const load = async () => {
+    const data = await api.orders.get(orderId)
+    setOrder(data.order)
+    setEvents(data.events || [])
+    setFields({
+      assigned_master_id: data.order.assigned_master_id || '',
+      assigned_master_name: data.order.assigned_master_name || '',
+      warranty_until: data.order.warranty_until || '',
+      price_estimate: data.order.price_estimate || '',
+      final_price: data.order.final_price || '',
+      work_performed: data.order.work_performed || '',
+    })
+    setCustomFieldValues(data.order.custom_fields || {})
+    setChecklist(data.order.checklist || null)
+    setLoading(false)
+    api.clients.get(data.order.client_id).then((c) => setClient(c.client)).catch(() => {})
+    api.orderServices.list(orderId).then((items) => setHasServiceItems((items || []).length > 0)).catch(() => {})
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderId])
+
+  const [statusError, setStatusError] = useState('')
+  const handleStatusChange = async (status) => {
+    // "completed" ("Выдано") goes through the dedicated Выдать-заявку flow
+    // (payment collection, then this same call) instead of a bare status
+    // flip — picking it directly here would hit the same server-side
+    // readiness check (order.assertReadyToIssue) and, unlike the modal,
+    // never records the payment that's supposed to come with it.
+    if (status === 'completed') {
+      setIssuing(true)
+      return
+    }
+    setStatusError('')
+    try {
+      await api.orders.updateStatus(orderId, status)
+      await load()
+    } catch (err) {
+      setStatusError(err.message)
+    }
+  }
+
+  const workReady = hasServiceItems || Boolean(order?.work_performed && order.work_performed.trim())
+  const priceReady = Boolean(order?.final_price && Number(order.final_price) > 0)
+  const completedRequires = STATUS_REQUIRED_PERMISSIONS?.completed
+  const canIssue = !completedRequires || staff?.permissions?.includes(completedRequires)
+  const readyToIssue = workReady && priceReady && canIssue
+
+  const [discountBusy, setDiscountBusy] = useState(false)
+  const [discountError, setDiscountError] = useState('')
+
+  const handleSaveFields = async () => {
+    setBusy(true)
+    setFieldsError('')
+    try {
+      // checklist omitted entirely (not sent as null) when this order never
+      // had one — a literal JSON null in the request would cast to a real
+      // jsonb 'null' value server-side and wipe an existing checklist via
+      // Update's COALESCE, which only skips a true SQL NULL parameter.
+      await api.orders.update(orderId, {
+        ...fields,
+        custom_fields: buildCustomFieldsPayload(customFieldValues),
+        ...(checklist ? { checklist } : {}),
+      })
+      await load()
+    } catch (err) {
+      setFieldsError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleDiscountApproval = async (action) => {
+    setDiscountBusy(true)
+    setDiscountError('')
+    try {
+      await api.orders.discountApproval(orderId, action)
+      await load()
+    } catch (err) {
+      setDiscountError(err.message)
+    } finally {
+      setDiscountBusy(false)
+    }
+  }
+
+  const handleOpenDocument = async (kind) => {
+    setDocError('')
+    try {
+      await api.orders.openDocument(orderId, kind)
+    } catch (err) {
+      setDocError(err.message)
+    }
+  }
+
+  const handleAddComment = async () => {
+    if (!comment.trim()) return
+    setBusy(true)
+    try {
+      await api.orders.addComment(orderId, comment, commentPublic)
+      setComment('')
+      await load()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handlePhotoUpload = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setBusy(true)
+    try {
+      await api.orders.addPhoto(orderId, file, true)
+      await load()
+    } finally {
+      setBusy(false)
+      e.target.value = ''
+    }
+  }
+
+  const trackingUrl = order ? `${window.location.origin}/track/${order.tracking_token}` : ''
+  const copyTracking = () => {
+    navigator.clipboard.writeText(trackingUrl)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  if (loading || !order) {
+    return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+  }
+
+  return (
+    <div>
+      <div style={{ padding: '24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            {order.order_number && (
+              <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', fontWeight: 510, marginBottom: '2px' }}>
+                № {order.order_number}
+              </p>
+            )}
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>
+              {order.device_type}{order.device_brand ? ` · ${order.device_brand}` : ''}{order.device_model ? ` ${order.device_model}` : ''}
+            </h2>
+            {client && (
+              <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                {client.name} · {client.phone}
+                <MessengerButtons phone={client.phone} size={15} />
+              </p>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
+            {staff?.permissions?.includes('delete_orders') && (
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={deleting}
+                title="Удалить заявку"
+                style={{ background: 'none', color: 'var(--color-danger)', opacity: deleting ? 0.5 : 1 }}
+              >
+                <Trash2 size={18} />
+              </button>
+            )}
+            <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+          </div>
+        </div>
+        {deleteError && <p style={{ fontSize: '0.8rem', color: 'var(--color-danger)', marginTop: '8px' }}>{deleteError}</p>}
+        <p style={{ fontSize: '0.85rem', marginTop: '10px', color: 'var(--text-main)' }}>{order.problem_description}</p>
+        <button
+          type="button"
+          onClick={copyTracking}
+          style={{ marginTop: '10px', display: 'flex', alignItems: 'center', gap: '6px', background: 'none', color: 'var(--color-accent-fg)', fontSize: '0.78rem', padding: 0 }}
+        >
+          {copied ? <Check size={13} /> : <Copy size={13} />}
+          Ссылка для клиента
+        </button>
+        {order.device_type?.toLowerCase().includes('принтер') && (
+          <>
+            <button
+              type="button"
+              onClick={handlePrintPrinterLabel}
+              style={{ marginTop: '6px', marginLeft: '16px', display: 'inline-flex', alignItems: 'center', gap: '6px', background: 'none', color: 'var(--color-accent-fg)', fontSize: '0.78rem', padding: 0 }}
+            >
+              <QrCode size={13} />
+              QR-этикетка для принтера
+            </button>
+            {printerLabelError && <p style={{ fontSize: '0.76rem', color: 'var(--color-danger)', marginTop: '4px' }}>{printerLabelError}</p>}
+          </>
+        )}
+      </div>
+      {printerLabel && (
+        <PrinterLabelPrint
+          recurringItemId={printerLabel.id}
+          code={printerLabel.code}
+          deviceBrand={order.device_brand}
+          deviceModel={order.device_model}
+          onClose={() => setPrinterLabel(null)}
+        />
+      )}
+
+      <div style={{ padding: '16px 24px 0', display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
+        <div style={{ flex: 1 }}>
+          <StatusPicker
+            value={order.status}
+            onChange={handleStatusChange}
+            statuses={STATUSES}
+            labels={STATUS_LABELS}
+            colors={STATUS_COLORS}
+            requiredPermissions={STATUS_REQUIRED_PERMISSIONS}
+            staffPermissions={staff?.permissions}
+          />
+        </div>
+        {order.status !== 'completed' && order.status !== 'cancelled' && (
+          <button
+            type="button"
+            onClick={() => setIssuing(true)}
+            disabled={!readyToIssue}
+            className="btn-primary"
+            title={!canIssue ? 'Недостаточно прав для этого статуса' : readyToIssue ? '' : 'Добавьте выполненные работы и итоговую цену, сохраните — затем можно выдать'}
+            style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' }}
+          >
+            <PackageCheck size={15} /> Выдать заявку
+          </button>
+        )}
+      </div>
+      {statusError && <p style={{ padding: '6px 24px 0', fontSize: '0.8rem', color: 'var(--color-danger)' }}>{statusError}</p>}
+      {!readyToIssue && order.status !== 'completed' && order.status !== 'cancelled' && (
+        <p style={{ padding: '6px 24px 0', fontSize: '0.76rem', color: 'var(--color-text-muted)' }}>
+          {!canIssue
+            ? 'У вас нет прав ставить этот статус — обратитесь к владельцу.'
+            : `${!workReady ? 'Добавьте выполненные работы (вкладка «Работы и запчасти»)' : 'Укажите и сохраните итоговую цену (вкладка «Оплата»)'} перед выдачей.`}
+        </p>
+      )}
+
+      <Tabs tabs={editTabs} activeTab={activeTab} onChange={setActiveTab} />
+
+      <TabPanel tabKey="device" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+            <div>
+              <label style={labelStyle}>Мастер</label>
+              <div style={{ display: 'flex', gap: '6px' }}>
+                <select
+                  value={fields.assigned_master_id}
+                  onChange={(e) => {
+                    const id = e.target.value
+                    const master = assignableStaff.find((s) => s.id === id)
+                    setFields((f) => ({ ...f, assigned_master_id: id, assigned_master_name: master?.name || '' }))
+                  }}
+                  style={inputStyle}
+                >
+                  <option value="">— не назначен —</option>
+                  {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+                </select>
+                <button
+                  type="button"
+                  className="btn-outline"
+                  style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }}
+                  onClick={() => setFields((f) => ({ ...f, assigned_master_id: staff.id, assigned_master_name: staff.name }))}
+                >
+                  Я
+                </button>
+              </div>
+            </div>
+            <div>
+              <label style={labelStyle}>Гарантия до</label>
+              <div style={{ display: 'flex', gap: '6px' }}>
+                <input type="date" value={fields.warranty_until || ''} onChange={(e) => setFields((f) => ({ ...f, warranty_until: e.target.value }))} style={inputStyle} />
+                <select
+                  value=""
+                  onChange={(e) => {
+                    if (!e.target.value) return
+                    const d = new Date()
+                    d.setDate(d.getDate() + Number(e.target.value))
+                    setFields((f) => ({ ...f, warranty_until: d.toISOString().slice(0, 10) }))
+                  }}
+                  style={{ ...inputStyle, width: '110px', flexShrink: 0 }}
+                  title="Задать срок от сегодня"
+                >
+                  <option value="">Срок...</option>
+                  <option value="14">14 дней</option>
+                  <option value="30">1 месяц</option>
+                  <option value="90">3 месяца</option>
+                  <option value="182">6 месяцев</option>
+                  <option value="365">1 год</option>
+                </select>
+              </div>
+              {order.status === 'completed' && fields.warranty_until && (
+                <p style={{ fontSize: '0.76rem', color: 'var(--color-text-muted)', marginTop: '4px' }}>
+                  <WarrantyBadge warrantyUntil={fields.warranty_until} />
+                </p>
+              )}
+            </div>
+            <div>
+              <label style={labelStyle}>Оценка, ₽</label>
+              <input type="number" value={fields.price_estimate || ''} onChange={(e) => setFields((f) => ({ ...f, price_estimate: e.target.value }))} style={inputStyle} />
+            </div>
+          </div>
+
+          {checklist && (
+            <div>
+              <label style={labelStyle}>Осмотр при приёмке</label>
+              <button
+                type="button"
+                onClick={() => setShowChecklistModal(true)}
+                className="btn-outline"
+                style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 14px', fontSize: '0.85rem' }}
+              >
+                <ClipboardCheck size={16} />
+                {(() => {
+                  const s = checklistSummary(checklist)
+                  return `Осмотр (${s.checked}/${s.total}${s.defects > 0 ? `, дефектов: ${s.defects}` : ''})`
+                })()}
+              </button>
+            </div>
+          )}
+          {showChecklistModal && checklist && (
+            <ChecklistModal
+              checklist={checklist}
+              onCycleStatus={cycleCheckStatus}
+              onSetNote={setCheckNote}
+              onToggleCompleteness={toggleCompleteness}
+              onClose={() => setShowChecklistModal(false)}
+            />
+          )}
+
+          <CustomFieldsSection fields={customFieldDefs} values={customFieldValues} onChange={setCustomField} />
+
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
+            <button type="button" onClick={handleSaveFields} disabled={busy} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Сохранить
+            </button>
+            {fieldsError && <span style={{ fontSize: '0.78rem', color: 'var(--color-danger)' }}>{fieldsError}</span>}
+          </div>
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="work" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <div>
+            <label style={labelStyle}>Комментарий к работам (запасной текст для акта)</label>
+            <textarea
+              value={fields.work_performed}
+              onChange={(e) => setFields((f) => ({ ...f, work_performed: e.target.value }))}
+              rows={2}
+              placeholder="Используется в акте, только если ниже не добавлено ни одной услуги"
+              style={{ ...inputStyle, resize: 'vertical' }}
+            />
+            <button type="button" onClick={handleSaveFields} disabled={busy} className="btn-outline" style={{ padding: '6px 14px', fontSize: '0.8rem', marginTop: '8px' }}>
+              Сохранить
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setPickingCatalog(true)}
+            className="btn-outline"
+            style={{ padding: '8px 16px', fontSize: '0.85rem', alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: '6px' }}
+          >
+            <ListPlus size={14} /> Прайс-лист
+          </button>
+
+          <ServiceItemsSection
+            orderId={orderId}
+            refreshKey={bulkRefreshKey}
+            onTotalChange={(total) => {
+              if (total > 0) setFields((f) => ({ ...f, final_price: String(total) }))
+            }}
+          />
+
+          <PartsUsedSection
+            id={orderId}
+            refreshKey={`${order.status}-${bulkRefreshKey}`}
+            listFn={() => api.orders.listParts(orderId)}
+            consumeFn={(body) => api.orders.consumeParts(orderId, body)}
+            releaseFn={(movementId) => api.orders.releasePart(orderId, movementId)}
+          />
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="payment" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {order.discount_pending_price && (
+            <div style={{
+              padding: '12px 14px', borderRadius: '8px', background: 'var(--color-warn-soft)',
+              border: '1px solid var(--color-warn)', display: 'flex', flexDirection: 'column', gap: '8px',
+            }}>
+              <p style={{ fontSize: '0.85rem', color: 'var(--color-text)' }}>
+                Скидка на согласовании: <strong>{order.discount_pending_price} ₽</strong> вместо оценки {order.price_estimate} ₽
+                {order.discount_requested_by_staff_name ? ` — запросил(а) ${order.discount_requested_by_staff_name}` : ''}
+                {order.discount_requested_at ? `, ${new Date(order.discount_requested_at).toLocaleString('ru-RU')}` : ''}
+              </p>
+              {staff?.permissions?.includes('approve_discounts') ? (
+                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                  <button type="button" onClick={() => handleDiscountApproval('approve')} disabled={discountBusy} className="btn-primary" style={{ padding: '6px 14px', fontSize: '0.82rem' }}>
+                    Согласовать
+                  </button>
+                  <button type="button" onClick={() => handleDiscountApproval('reject')} disabled={discountBusy} className="btn-outline" style={{ padding: '6px 14px', fontSize: '0.82rem' }}>
+                    Отклонить
+                  </button>
+                  {discountError && <span style={{ fontSize: '0.78rem', color: 'var(--color-danger)' }}>{discountError}</span>}
+                </div>
+              ) : (
+                <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)' }}>Ждёт согласования от сотрудника с соответствующим правом.</p>
+              )}
+            </div>
+          )}
+          <div>
+            <label style={labelStyle}>Итоговая цена, ₽</label>
+            <input type="number" value={fields.final_price || ''} onChange={(e) => setFields((f) => ({ ...f, final_price: e.target.value }))} style={{ ...inputStyle, maxWidth: '220px' }} />
+          </div>
+
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
+            <button type="button" onClick={handleSaveFields} disabled={busy} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Сохранить
+            </button>
+            <button type="button" onClick={() => handleOpenDocument('invoice')} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Счёт PDF
+            </button>
+            <button type="button" onClick={() => handleOpenDocument('act')} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Акт PDF
+            </button>
+            <button type="button" onClick={() => handleOpenDocument('receipt')} className="btn-outline" style={{ padding: '8px 16px', fontSize: '0.85rem' }}>
+              Квитанция PDF
+            </button>
+            <NotifyClientButton clientId={client?.id} />
+            {docError && <span style={{ fontSize: '0.78rem', color: 'var(--color-danger)' }}>{docError}</span>}
+          </div>
+
+          <CashSection id={orderId} listFn={() => api.cash.listForOrder(orderId)} orderId={orderId} />
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="delivery" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px' }}>
+          <DeliverySection orderId={orderId} />
+        </div>
+      </TabPanel>
+
+      <TabPanel tabKey="history" activeTab={activeTab}>
+        <div style={{ padding: '20px 24px' }}>
+          {events.some((ev) => ev.type === 'photo') && (
+            <div style={{ marginBottom: '20px' }}>
+              <AIDiagnosisPanel orderId={orderId} />
+            </div>
+          )}
+
+          <h3 style={{ fontSize: '0.95rem', marginBottom: '8px' }}>История</h3>
+          <div style={{ maxHeight: '280px', overflowY: 'auto', marginBottom: '14px' }}>
+            {events.map((ev) => <TimelineItem key={ev.id} event={ev} />)}
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Добавить комментарий..."
+              rows={2}
+              style={{ ...inputStyle, resize: 'vertical' }}
+            />
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
+                <input type="checkbox" checked={commentPublic} onChange={(e) => setCommentPublic(e.target.checked)} />
+                Показывать клиенту
+              </label>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <label className="btn-outline" style={{ padding: '7px 14px', fontSize: '0.82rem', cursor: 'pointer' }}>
+                  <Camera size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />
+                  Фото
+                  <input type="file" accept="image/*" onChange={handlePhotoUpload} style={{ display: 'none' }} />
+                </label>
+                <button type="button" onClick={handleAddComment} disabled={busy} className="btn-primary" style={{ padding: '7px 16px', fontSize: '0.82rem' }}>
+                  Отправить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+
+      {issuing && (
+        <IssueOrderModal
+          orderId={orderId}
+          orderNumber={order.order_number}
+          finalPrice={order.final_price}
+          onClose={() => setIssuing(false)}
+          onIssued={load}
+        />
+      )}
+
+      {pickingCatalog && (
+        <CatalogPickerModal
+          orderId={orderId}
+          onClose={() => setPickingCatalog(false)}
+          onAdded={() => { setBulkRefreshKey((k) => k + 1); load() }}
+        />
+      )}
+    </div>
+  )
+}
+
+const OrderModal = ({ mode, orderId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <CreateForm onClose={onClose} onSaved={onSaved} />
+          : <EditForm orderId={orderId} onClose={onClose} />}
+      </div>
+    </div>
+  )
+}
+
+export default OrderModal
diff --git a/production/web/src/orders/OrdersListPage.jsx b/production/web/src/orders/OrdersListPage.jsx
new file mode 100644
index 0000000..65f8f2b
--- /dev/null
+++ b/production/web/src/orders/OrdersListPage.jsx
@@ -0,0 +1,300 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useOutletContext, useNavigate } from 'react-router-dom'
+import { Pin, X, Wrench, Droplet, CalendarCheck } from 'lucide-react'
+import * as api from '../lib/api'
+import { useOrderStatuses } from './statuses'
+import { useAssignableStaff } from './useAssignableStaff'
+import { useFilterPresets } from '../hooks/useFilterPresets'
+import { inputStyle, labelStyle } from './formStyles'
+import { getOrderAge } from './orderAge'
+import OrderModal from './OrderModal'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+import QuickAddDeliveryButton from '../delivery/QuickAddDeliveryButton'
+
+const EMPTY_FILTERS = { status: '', assigned_master_id: '', date_from: '', date_to: '' }
+
+const statusPillStyle = (active) => ({
+  display: 'flex', alignItems: 'center', gap: '7px',
+  padding: '6px 12px', borderRadius: '50px', fontSize: '0.8rem', fontWeight: 510,
+  background: active ? 'var(--color-accent-soft)' : 'var(--color-surface-sunken)',
+  border: `1px solid ${active ? 'var(--color-accent)' : 'var(--color-border)'}`,
+  color: active ? 'var(--color-accent-fg)' : 'var(--text-main)',
+  whiteSpace: 'nowrap',
+})
+
+// Per-status counts (blinking dot in the status's own color) + three
+// cross-domain "still active" totals — GET /api/orders/summary, server-
+// aggregated across the full table rather than counted from the page's own
+// (LIMIT-500, filter-scoped) `orders` list, which would both undercount
+// and shift under whatever filter happens to be active.
+function SummaryBar({ activeStatus, onStatusClick }) {
+  const { labels: STATUS_LABELS, colors: STATUS_COLORS } = useOrderStatuses()
+  const navigate = useNavigate()
+  const [summary, setSummary] = useState(null)
+
+  useEffect(() => {
+    api.orders.summary().then(setSummary).catch(() => setSummary(null))
+  }, [])
+
+  if (!summary) return null
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '16px' }}>
+      {summary.by_status?.length > 0 && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          {summary.by_status.map(({ key, count }) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() => onStatusClick(activeStatus === key ? '' : key)}
+              style={statusPillStyle(activeStatus === key)}
+            >
+              <span
+                className="status-dot-pulse"
+                style={{
+                  width: '7px', height: '7px', borderRadius: '50%',
+                  background: STATUS_COLORS[key] || 'var(--text-muted)',
+                  color: STATUS_COLORS[key] || 'var(--text-muted)',
+                  flexShrink: 0,
+                }}
+              />
+              {STATUS_LABELS[key] || key}
+              <span style={{ opacity: 0.7 }}>{count}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+        <button type="button" onClick={() => onStatusClick('')} style={statusPillStyle(false)}>
+          <Wrench size={13} /> Ремонт <span style={{ opacity: 0.7 }}>{summary.active_repair}</span>
+        </button>
+        <button type="button" onClick={() => navigate('/cartridges')} style={statusPillStyle(false)}>
+          <Droplet size={13} /> Заправка <span style={{ opacity: 0.7 }}>{summary.active_cartridge}</span>
+        </button>
+        <button type="button" onClick={() => navigate('/bookings')} style={statusPillStyle(false)}>
+          <CalendarCheck size={13} /> Выезд <span style={{ opacity: 0.7 }}>{summary.active_onsite}</span>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// Server-side filtered list — same query params order.Handler.List already
+// supports (status/assigned_master_id/date_from/date_to), just finally
+// exposed in the UI. The Kanban board only ever fetches everything
+// unfiltered and buckets client-side, which doesn't scale to "find one
+// order by master and date range".
+const OrdersListPage = () => {
+  const { statuses: STATUSES, labels: STATUS_LABELS, colors: STATUS_COLORS } = useOrderStatuses()
+  const { showNewOrder, setShowNewOrder } = useOutletContext() || {}
+  const assignableStaff = useAssignableStaff()
+  const { presets, save: savePreset, remove: removePreset } = useFilterPresets()
+  const { modules } = useFeatureModules()
+  const [filters, setFilters] = useState(EMPTY_FILTERS)
+  const [orders, setOrders] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [selectedOrder, setSelectedOrder] = useState(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const cleaned = Object.fromEntries(Object.entries(filters).filter(([, v]) => v !== ''))
+      setOrders((await api.orders.list(cleaned)) || [])
+      setError('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [filters])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  const setFilter = (key) => (e) => setFilters((f) => ({ ...f, [key]: e.target.value }))
+  const hasActiveFilters = filters.status || filters.assigned_master_id || filters.date_from || filters.date_to
+
+  const handlePin = () => {
+    const name = window.prompt('Название фильтра:')
+    if (!name) return
+    savePreset(name, filters)
+  }
+
+  const applyPreset = (p) => setFilters({
+    status: p.status || '', assigned_master_id: p.assigned_master_id || '',
+    date_from: p.date_from || '', date_to: p.date_to || '',
+  })
+
+  return (
+    <div>
+      <SummaryBar activeStatus={filters.status} onStatusClick={(status) => setFilters((f) => ({ ...f, status }))} />
+      {presets.length > 0 && (
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '12px' }}>
+          {presets.map((p) => (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => applyPreset(p)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '6px',
+                padding: '6px 8px 6px 12px', borderRadius: '20px', fontSize: '0.8rem',
+                background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)', fontWeight: 510,
+              }}
+            >
+              {p.name}
+              <span
+                role="button"
+                tabIndex={0}
+                onClick={(e) => { e.stopPropagation(); removePreset(p.id) }}
+                style={{ display: 'flex', padding: '2px', borderRadius: '50%' }}
+                title="Удалить фильтр"
+              >
+                <X size={12} />
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))', gap: '10px', marginBottom: '18px', alignItems: 'flex-end' }}>
+        <div>
+          <label style={labelStyle}>Статус</label>
+          <select value={filters.status} onChange={setFilter('status')} style={inputStyle}>
+            <option value="">Все статусы</option>
+            {STATUSES.map((s) => <option key={s} value={s}>{STATUS_LABELS[s]}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>Мастер</label>
+          <select value={filters.assigned_master_id} onChange={setFilter('assigned_master_id')} style={inputStyle}>
+            <option value="">Все мастера</option>
+            {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>С даты</label>
+          <input type="date" value={filters.date_from} onChange={setFilter('date_from')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>По дату</label>
+          <input type="date" value={filters.date_to} onChange={setFilter('date_to')} style={inputStyle} />
+        </div>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center', gridColumn: hasActiveFilters ? 'auto' : '1 / -1', justifyContent: hasActiveFilters ? 'flex-start' : 'flex-end' }}>
+          {hasActiveFilters && (
+            <>
+              <button
+                type="button"
+                className="btn-outline"
+                style={{ padding: '9px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+                onClick={handlePin}
+              >
+                <Pin size={13} /> Закрепить
+              </button>
+              <button
+                type="button"
+                className="btn-outline"
+                style={{ padding: '9px 14px', fontSize: '0.82rem' }}
+                onClick={() => setFilters(EMPTY_FILTERS)}
+              >
+                Сбросить
+              </button>
+            </>
+          )}
+          <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginLeft: 'auto', whiteSpace: 'nowrap' }}>
+            {loading ? 'Загрузка...' : `Найдено: ${orders.length}`}
+          </span>
+        </div>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem', marginBottom: '12px' }}>{error}</p>}
+
+      <div className="glass-panel" style={{ overflowX: 'auto' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid var(--border-light)', textAlign: 'left' }}>
+              <th style={{ padding: '12px 14px' }}>№</th>
+              <th style={{ padding: '12px 14px' }}>Устройство</th>
+              <th style={{ padding: '12px 14px' }}>Статус</th>
+              <th style={{ padding: '12px 14px' }}>Мастер</th>
+              <th style={{ padding: '12px 14px' }}>Цена, ₽</th>
+              <th style={{ padding: '12px 14px' }}>Дата</th>
+              {modules.delivery !== false && <th style={{ padding: '12px 14px' }} />}
+            </tr>
+          </thead>
+          <tbody>
+            {orders.map((o) => {
+              const age = getOrderAge(o)
+              return (
+              <tr
+                key={o.id}
+                onClick={() => setSelectedOrder(o)}
+                className="list-row"
+                style={{
+                  borderBottom: '1px solid var(--border-light)', cursor: 'pointer',
+                  borderLeft: `3px solid ${STATUS_COLORS[o.status] || 'transparent'}`,
+                }}
+              >
+                <td style={{ padding: '10px 14px', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{o.order_number || '—'}</td>
+                <td style={{ padding: '10px 14px' }}>
+                  {o.device_type}{o.device_brand ? ` · ${o.device_brand}` : ''}{o.device_model ? ` ${o.device_model}` : ''}
+                </td>
+                <td style={{ padding: '10px 14px' }}>
+                  <span style={{
+                    fontSize: '0.75rem', fontWeight: 510, padding: '3px 9px', borderRadius: '50px',
+                    background: `${STATUS_COLORS[o.status]}1a`, color: STATUS_COLORS[o.status],
+                  }}>
+                    {STATUS_LABELS[o.status] || o.status}
+                  </span>
+                </td>
+                <td style={{ padding: '10px 14px', color: 'var(--text-muted)' }}>{o.assigned_master_name || '—'}</td>
+                <td style={{ padding: '10px 14px', fontWeight: 510 }}>
+                  {(o.final_price || o.price_estimate) ? Number(o.final_price || o.price_estimate).toLocaleString('ru-RU') : '—'}
+                </td>
+                <td style={{ padding: '10px 14px', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
+                  {new Date(o.created_at).toLocaleDateString('ru-RU')}
+                  {age && (
+                    <div style={{ fontSize: '0.7rem', fontWeight: 590, color: age.color, marginTop: '2px' }}>
+                      {age.days} дн. без изменений
+                    </div>
+                  )}
+                </td>
+                {modules.delivery !== false && (
+                  <td style={{ padding: '10px 14px' }} onClick={(e) => e.stopPropagation()}>
+                    <QuickAddDeliveryButton orderId={o.id} />
+                  </td>
+                )}
+              </tr>
+              )
+            })}
+            {!loading && orders.length === 0 && (
+              <tr>
+                <td colSpan={modules.delivery !== false ? 7 : 6} style={{ padding: '24px', textAlign: 'center', color: 'var(--text-muted)' }}>
+                  Ничего не найдено по этим фильтрам
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {selectedOrder && (
+        <OrderModal
+          orderId={selectedOrder.id}
+          mode="edit"
+          onClose={() => { setSelectedOrder(null); load() }}
+        />
+      )}
+
+      {showNewOrder && (
+        <OrderModal
+          mode="create"
+          onClose={() => setShowNewOrder(false)}
+          onSaved={() => { setShowNewOrder(false); load() }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default OrdersListPage
diff --git a/production/web/src/orders/PhotoThumb.jsx b/production/web/src/orders/PhotoThumb.jsx
new file mode 100644
index 0000000..1594550
--- /dev/null
+++ b/production/web/src/orders/PhotoThumb.jsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react'
+import { fetchFileBlobUrl } from '../lib/api'
+
+// <img src> can't carry the Authorization header the file endpoint needs,
+// so each thumbnail fetches its own blob and revokes it on unmount.
+const PhotoThumb = ({ fileKey }) => {
+  const [url, setUrl] = useState(null)
+
+  useEffect(() => {
+    let objectUrl
+    let cancelled = false
+    fetchFileBlobUrl(fileKey).then((u) => {
+      if (cancelled) { URL.revokeObjectURL(u); return }
+      objectUrl = u
+      setUrl(u)
+    }).catch(() => {})
+    return () => {
+      cancelled = true
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    }
+  }, [fileKey])
+
+  if (!url) {
+    return <div style={{ width: '72px', height: '72px', borderRadius: '8px', background: 'var(--color-surface-sunken)' }} />
+  }
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      <img
+        src={url}
+        alt="Фото заказа"
+        style={{ width: '72px', height: '72px', objectFit: 'cover', borderRadius: '8px', border: '1px solid var(--border-light)' }}
+      />
+    </a>
+  )
+}
+
+export default PhotoThumb
diff --git a/production/web/src/orders/PrinterLabelPrint.jsx b/production/web/src/orders/PrinterLabelPrint.jsx
new file mode 100644
index 0000000..c4f93e2
--- /dev/null
+++ b/production/web/src/orders/PrinterLabelPrint.jsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import { X, Printer } from 'lucide-react'
+import * as api from '../lib/api'
+
+// Print-ready QR label for one physical printer — mirrors
+// cartridges/CartridgeLabelPrint.jsx exactly (see its doc comment for why
+// @media print is scoped to #printer-label only).
+const PrinterLabelPrint = ({ recurringItemId, code, deviceBrand, deviceModel, onClose }) => {
+  const [qrUrl, setQrUrl] = useState(null)
+
+  useEffect(() => {
+    let objectUrl
+    let cancelled = false
+    api.printers.qrCodeBlobUrl(recurringItemId).then((u) => {
+      if (cancelled) { URL.revokeObjectURL(u); return }
+      objectUrl = u
+      setQrUrl(u)
+    }).catch(() => {})
+    return () => {
+      cancelled = true
+      if (objectUrl) URL.revokeObjectURL(objectUrl)
+    }
+  }, [recurringItemId])
+
+  return (
+    <div className="modal-overlay label-print-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300 }} onClick={onClose}>
+      <div style={{ background: '#fff', borderRadius: '12px', padding: '20px', width: '280px' }} onClick={(e) => e.stopPropagation()}>
+        <div className="label-print-controls" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+          <button type="button" onClick={() => window.print()} className="btn-primary" style={{ padding: '7px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <Printer size={15} /> Печать
+          </button>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: '#666' }}><X size={20} /></button>
+        </div>
+        <div id="printer-label" style={{ textAlign: 'center', color: '#000' }}>
+          {qrUrl ? <img src={qrUrl} alt="QR" style={{ width: '160px', height: '160px' }} /> : <div style={{ width: '160px', height: '160px', margin: '0 auto', background: '#eee' }} />}
+          <p style={{ fontSize: '0.85rem', fontWeight: 600, marginTop: '6px' }}>{deviceBrand}{deviceModel ? ` ${deviceModel}` : ''}</p>
+          <p style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '0.05em', marginTop: '2px' }}>{code}</p>
+        </div>
+      </div>
+      <style>{`
+        @media print {
+          body * { visibility: hidden; }
+          #printer-label, #printer-label * { visibility: visible; }
+          #printer-label { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); }
+          .label-print-overlay { background: none !important; }
+          .label-print-controls { display: none !important; }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default PrinterLabelPrint
diff --git a/production/web/src/orders/PrinterQrScanField.jsx b/production/web/src/orders/PrinterQrScanField.jsx
new file mode 100644
index 0000000..5c567fe
--- /dev/null
+++ b/production/web/src/orders/PrinterQrScanField.jsx
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import { QrCode } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle } from './formStyles'
+import ScanField from '../ui/ScanField'
+
+// Printer-specific wrapper around the shared ScanField (../ui/ScanField),
+// mirroring cartridges/QrScanField.jsx — owns the scanByCode lookup and
+// not-found/error messaging, ScanField itself just hands back a code from
+// a USB scanner, manual typing, or the camera.
+const PrinterQrScanField = ({ onResolved }) => {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleScan = async (code) => {
+    setBusy(true)
+    setError('')
+    try {
+      const data = await api.printers.scanByCode(code)
+      onResolved(code, data)
+    } catch (err) {
+      setError(err.status === 404 ? 'Код не найден — это первый приём этого принтера' : err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div>
+      <ScanField
+        onScan={handleScan}
+        busy={busy}
+        icon={QrCode}
+        placeholder="Скан QR-этикетки принтера..."
+        inputStyle={inputStyle}
+      />
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.78rem', marginTop: '4px' }}>{error}</p>}
+    </div>
+  )
+}
+
+export default PrinterQrScanField
diff --git a/production/web/src/orders/ServiceItemsSection.jsx b/production/web/src/orders/ServiceItemsSection.jsx
new file mode 100644
index 0000000..036bc4b
--- /dev/null
+++ b/production/web/src/orders/ServiceItemsSection.jsx
@@ -0,0 +1,230 @@
+import { useState, useEffect, useRef } from 'react'
+import { Trash2, Pencil, Check, X } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from './formStyles'
+import { useServices } from '../servicecatalog/useServiceCatalog'
+
+// Построчные услуги на заявке — источник истины для акта, если хоть одна
+// есть (see document.Handler.Act / migrations/025_service_catalog.sql).
+// Search-and-add mirrors PartsUsedSection's AddPartForm UX, but the source
+// list is the whole price list fetched once (useServices, no ?q= endpoint
+// needed for a list this small) filtered client-side, and a service not in
+// the catalog can still be added as a one-off (description typed directly,
+// service_id left unset).
+//
+// refreshKey (optional): bump it to force a reload from outside — used by
+// OrderModal's "Прайс-лист" bulk picker (CatalogPickerModal), which adds
+// items via its own calls rather than this component's own handleAdd.
+const ServiceItemsSection = ({ orderId, onTotalChange, refreshKey }) => {
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(true)
+  const { services } = useServices()
+  const [query, setQuery] = useState('')
+  const [selected, setSelected] = useState(null)
+  const [price, setPrice] = useState('')
+  const [qty, setQty] = useState(1)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [dismissed, setDismissed] = useState(false)
+  const wrapperRef = useRef(null)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const data = (await api.orderServices.list(orderId)) || []
+      setItems(data)
+      if (onTotalChange) {
+        onTotalChange(data.reduce((sum, it) => sum + Number(it.price) * it.qty, 0))
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderId, refreshKey])
+
+  useEffect(() => {
+    const handlePointerDown = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setDismissed(true)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  const results = query && !selected && !dismissed
+    ? services.filter((s) => s.name.toLowerCase().includes(query.toLowerCase())).slice(0, 8)
+    : []
+
+  const handlePick = (s) => {
+    setSelected(s)
+    setQuery(s.name)
+    setPrice(s.default_price || '')
+    setResultsClear()
+  }
+  const setResultsClear = () => setDismissed(true)
+
+  const handleAdd = async (e) => {
+    e.preventDefault()
+    const description = selected ? selected.name : query.trim()
+    if (!description) { setError('Укажите услугу'); return }
+    if (!price || Number(price) <= 0) { setError('Укажите цену'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.orderServices.add(orderId, {
+        service_id: selected?.id || undefined,
+        description,
+        price: String(price),
+        qty: Number(qty) || 1,
+      })
+      setSelected(null)
+      setQuery('')
+      setPrice('')
+      setQty(1)
+      await load()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async (itemId) => {
+    await api.orderServices.remove(itemId)
+    await load()
+  }
+
+  const [editingId, setEditingId] = useState(null)
+  const [editPrice, setEditPrice] = useState('')
+  const [editQty, setEditQty] = useState(1)
+  const [editSaving, setEditSaving] = useState(false)
+  const [editError, setEditError] = useState('')
+
+  const startEdit = (it) => {
+    setEditingId(it.id)
+    setEditPrice(it.price)
+    setEditQty(it.qty)
+    setEditError('')
+  }
+  const cancelEdit = () => setEditingId(null)
+  const saveEdit = async (itemId) => {
+    if (!editPrice || Number(editPrice) <= 0) { setEditError('Укажите цену'); return }
+    setEditSaving(true)
+    setEditError('')
+    try {
+      await api.orderServices.update(itemId, { price: String(editPrice), qty: Number(editQty) || 1 })
+      setEditingId(null)
+      await load()
+    } catch (err) {
+      setEditError(err.message)
+    } finally {
+      setEditSaving(false)
+    }
+  }
+
+  const total = items.reduce((sum, it) => sum + Number(it.price) * it.qty, 0)
+
+  return (
+    <div>
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '8px' }}>Услуги (для акта)</h3>
+
+      <form onSubmit={handleAdd} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <div ref={wrapperRef} style={{ position: 'relative' }}>
+          <input
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelected(null); setDismissed(false) }}
+            onKeyDown={(e) => { if (e.key === 'Escape') setDismissed(true) }}
+            placeholder="Найти услугу в прайсе или ввести свою..."
+            style={inputStyle}
+          />
+          {results.length > 0 && (
+            <div style={{
+              position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--color-surface)',
+              border: '1px solid var(--border-light)', borderRadius: '8px', marginTop: '4px', zIndex: 10,
+              maxHeight: '200px', overflowY: 'auto', boxShadow: 'var(--shadow-elevated)',
+            }}>
+              {results.map((s) => (
+                <button
+                  key={s.id} type="button" onClick={() => handlePick(s)}
+                  style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', background: 'none', fontSize: '0.85rem', fontFamily: 'var(--font-body)' }}
+                >
+                  {s.name} {s.default_price && <span style={{ color: 'var(--text-muted)' }}>· {Number(s.default_price).toLocaleString('ru-RU')} ₽</span>}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+          <div style={{ width: '110px' }}>
+            <label style={labelStyle}>Цена, ₽</label>
+            <input type="number" value={price} onChange={(e) => setPrice(e.target.value)} style={inputStyle} required />
+          </div>
+          <div style={{ width: '80px' }}>
+            <label style={labelStyle}>Кол-во</label>
+            <input type="number" min="1" value={qty} onChange={(e) => setQty(e.target.value)} style={inputStyle} />
+          </div>
+          <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.82rem', whiteSpace: 'nowrap' }}>
+            {saving ? 'Добавляем...' : 'Добавить'}
+          </button>
+        </div>
+      </form>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginTop: '6px' }}>{error}</p>}
+
+      <div style={{ marginTop: '12px' }}>
+        {loading ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Загрузка...</p>
+        ) : items.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Услуги ещё не добавлены — акт будет по старому шаблону (свободный текст)</p>
+        ) : (
+          <>
+            {items.map((it) => (
+              editingId === it.id ? (
+                <div key={it.id} style={{ display: 'flex', alignItems: 'flex-end', gap: '8px', padding: '8px 0', borderBottom: '1px solid var(--border-light)', flexWrap: 'wrap' }}>
+                  <span style={{ flex: '1 1 100%', fontSize: '0.82rem' }}>{it.description}</span>
+                  <div style={{ width: '100px' }}>
+                    <label style={labelStyle}>Цена, ₽</label>
+                    <input type="number" value={editPrice} onChange={(e) => setEditPrice(e.target.value)} style={inputStyle} autoFocus />
+                  </div>
+                  <div style={{ width: '70px' }}>
+                    <label style={labelStyle}>Кол-во</label>
+                    <input type="number" min="1" value={editQty} onChange={(e) => setEditQty(e.target.value)} style={inputStyle} />
+                  </div>
+                  <button type="button" onClick={() => saveEdit(it.id)} disabled={editSaving} style={{ background: 'none', color: 'var(--color-success)', display: 'flex', padding: '9px' }} title="Сохранить">
+                    <Check size={16} />
+                  </button>
+                  <button type="button" onClick={cancelEdit} style={{ background: 'none', color: 'var(--text-muted)', display: 'flex', padding: '9px' }} title="Отмена">
+                    <X size={16} />
+                  </button>
+                  {editError && <span style={{ flex: '1 1 100%', fontSize: '0.78rem', color: 'var(--color-danger)' }}>{editError}</span>}
+                </div>
+              ) : (
+                <div key={it.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.82rem', padding: '8px 0', borderBottom: '1px solid var(--border-light)' }}>
+                  <span>{it.description}{it.qty > 1 ? ` ×${it.qty}` : ''}</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <span style={{ fontWeight: 510 }}>{(Number(it.price) * it.qty).toLocaleString('ru-RU')} ₽</span>
+                    <button type="button" onClick={() => startEdit(it)} style={{ background: 'none', color: 'var(--text-muted)', display: 'flex', padding: '4px' }} title="Изменить цену/количество">
+                      <Pencil size={13} />
+                    </button>
+                    <button type="button" onClick={() => remove(it.id)} style={{ background: 'none', color: 'var(--accent-red)', display: 'flex', padding: '4px' }} title="Удалить">
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                </div>
+              )
+            ))}
+            <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '8px', fontWeight: 590, fontSize: '0.88rem' }}>
+              <span>Итого</span>
+              <span>{total.toLocaleString('ru-RU')} ₽</span>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ServiceItemsSection
diff --git a/production/web/src/orders/StatusPicker.jsx b/production/web/src/orders/StatusPicker.jsx
new file mode 100644
index 0000000..8d10368
--- /dev/null
+++ b/production/web/src/orders/StatusPicker.jsx
@@ -0,0 +1,111 @@
+import { useState, useRef, useEffect } from 'react'
+import { ChevronDown, Lock } from 'lucide-react'
+import { labelStyle } from './formStyles'
+
+// Replaces a plain <select> for order status — each status already carries
+// its own owner-editable color (see statuses.js/OrderStatusesPage), which
+// the raw <select> never showed. A colored dot on the trigger and on every
+// option makes the current state legible at a glance, matching the same
+// color a status already renders as on the Kanban board.
+//
+// requiredPermissions + staffPermissions (both optional) gate individual
+// options rather than the whole control — an owner can mark e.g. "Выдано"
+// as requiring the "cash" permission (see order_statuses.required_permission
+// / order.UpdateStatus's own server-side check, which is the real
+// enforcement; this is UX, not the security boundary). A master without
+// that permission sees the option greyed out with a lock icon instead of
+// picking it and hitting a 403 after the fact.
+const StatusPicker = ({ value, onChange, statuses, labels, colors, hideLabel, compact, disabled, requiredPermissions, staffPermissions }) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handlePointerDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false)
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  const currentColor = colors[value] || 'var(--color-text-muted)'
+  const isLocked = (s) => {
+    const required = requiredPermissions?.[s]
+    return required && !staffPermissions?.includes(required)
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      {!hideLabel && <label style={labelStyle}>Статус</label>}
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={disabled}
+        style={{
+          width: compact ? 'auto' : '100%', display: 'flex', alignItems: 'center', gap: '8px',
+          padding: compact ? '6px 10px' : '10px 12px', border: '1.5px solid var(--color-border)', borderRadius: '8px',
+          fontSize: compact ? '0.78rem' : '0.9rem', fontFamily: 'var(--font-body)', background: 'var(--color-surface)',
+          color: 'var(--color-text)', cursor: disabled ? 'not-allowed' : 'pointer', whiteSpace: 'nowrap',
+          opacity: disabled ? 0.6 : 1,
+        }}
+      >
+        <span style={{ width: '9px', height: '9px', borderRadius: '50%', background: currentColor, flexShrink: 0 }} />
+        <span style={{ flex: 1, textAlign: 'left', fontWeight: 510 }}>{labels[value] || value}</span>
+        <ChevronDown size={15} style={{ color: 'var(--color-text-muted)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 140ms ease', flexShrink: 0 }} />
+      </button>
+
+      {open && (
+        <div
+          role="listbox"
+          style={{
+            position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, zIndex: 20,
+            background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '10px',
+            boxShadow: 'var(--shadow-elevated)', padding: '4px', maxHeight: '260px', overflowY: 'auto',
+          }}
+        >
+          {statuses.map((s) => {
+            const active = s === value
+            const locked = isLocked(s)
+            return (
+              <button
+                key={s}
+                type="button"
+                role="option"
+                aria-selected={active}
+                aria-disabled={locked}
+                disabled={locked}
+                onClick={() => { if (locked) return; onChange(s); setOpen(false) }}
+                title={locked ? 'Недостаточно прав для этого статуса' : undefined}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', gap: '8px',
+                  padding: '8px 10px', borderRadius: '6px', fontSize: '0.86rem', textAlign: 'left',
+                  background: active ? 'var(--color-accent-soft)' : 'none',
+                  color: active ? 'var(--color-accent-fg)' : locked ? 'var(--color-text-muted)' : 'var(--color-text)',
+                  fontWeight: active ? 590 : 400,
+                  opacity: locked ? 0.55 : 1,
+                  cursor: locked ? 'not-allowed' : 'pointer',
+                }}
+                className="status-picker-option"
+              >
+                <span style={{ width: '9px', height: '9px', borderRadius: '50%', background: colors[s] || 'var(--color-text-muted)', flexShrink: 0 }} />
+                <span style={{ flex: 1 }}>{labels[s] || s}</span>
+                {locked && <Lock size={12} style={{ flexShrink: 0 }} />}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default StatusPicker
diff --git a/production/web/src/orders/WarrantyBadge.jsx b/production/web/src/orders/WarrantyBadge.jsx
new file mode 100644
index 0000000..d82c94f
--- /dev/null
+++ b/production/web/src/orders/WarrantyBadge.jsx
@@ -0,0 +1,28 @@
+import { warrantyStatus, WARRANTY_STATUS_COLORS, formatWarranty } from '../lib/warranty'
+
+// Colored dot + the existing plain-language text from formatWarranty — the
+// "traffic light": green while there's plenty of time left, yellow inside
+// WARRANTY_EXPIRING_SOON_DAYS of the deadline, red once past. Used
+// wherever a completed order's warranty is shown to staff or the client
+// (OrderCard's kanban badge, ClientsPage's order history, the public
+// tracking page, and the order edit form's own hint) so the same three
+// states read the same color everywhere instead of each call site
+// reinventing its own red/green cutoff.
+const WarrantyBadge = ({ warrantyUntil, size = 8 }) => {
+  const status = warrantyStatus(warrantyUntil)
+  if (!status) return null
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+      <span
+        style={{
+          width: `${size}px`, height: `${size}px`, borderRadius: '50%', flexShrink: 0,
+          background: WARRANTY_STATUS_COLORS[status],
+        }}
+      />
+      {formatWarranty(warrantyUntil)}
+    </span>
+  )
+}
+
+export default WarrantyBadge
diff --git a/production/web/src/orders/customFieldsPayload.js b/production/web/src/orders/customFieldsPayload.js
new file mode 100644
index 0000000..c441971
--- /dev/null
+++ b/production/web/src/orders/customFieldsPayload.js
@@ -0,0 +1,16 @@
+// Split out from CustomFieldsSection.jsx — eslint-plugin-react-refresh
+// forbids a component file from also exporting non-component values (same
+// reasoning as formStyles.js).
+
+// Drops empty/unset values before submit — an empty string for an optional
+// text field must read as "not answered", not as "answered with an empty
+// string" (the backend would happily store either, but only the first
+// matches what an untouched field actually means). false/0 are kept.
+export function buildCustomFieldsPayload(values) {
+  const out = {}
+  for (const [key, val] of Object.entries(values)) {
+    if (val === '' || val === undefined || val === null) continue
+    out[key] = val
+  }
+  return out
+}
diff --git a/production/web/src/orders/formStyles.js b/production/web/src/orders/formStyles.js
new file mode 100644
index 0000000..701e153
--- /dev/null
+++ b/production/web/src/orders/formStyles.js
@@ -0,0 +1,13 @@
+// Shared inline-style constants for order/client forms — split out from
+// ClientPicker.jsx because eslint-plugin-react-refresh forbids a component
+// file from also exporting non-component values.
+export const inputStyle = {
+  width: '100%', padding: '10px 12px',
+  border: '1.5px solid var(--color-border)', borderRadius: '8px',
+  fontSize: '0.9rem', fontFamily: 'var(--font-body)', outline: 'none', boxSizing: 'border-box',
+  background: 'var(--color-surface)', color: 'var(--color-text)',
+}
+
+export const labelStyle = {
+  display: 'block', marginBottom: '5px', fontSize: '0.78rem', fontWeight: 600, color: 'var(--color-text-muted)',
+}
diff --git a/production/web/src/orders/orderAge.js b/production/web/src/orders/orderAge.js
new file mode 100644
index 0000000..78bc5c9
--- /dev/null
+++ b/production/web/src/orders/orderAge.js
@@ -0,0 +1,15 @@
+const TERMINAL_STATUSES = new Set(['completed', 'cancelled'])
+const MS_PER_DAY = 86_400_000
+
+// "Давно висит без изменений" reads off updated_at, not a dedicated status-
+// change log — orders.updated_at bumps on any edit, not just a status
+// transition, but that's still the right signal for "nobody has touched
+// this in a while" (a master editing a note counts as attention same as a
+// status move). Terminal orders (выдано/отменено) are done by definition,
+// so they never show an age badge regardless of how old updated_at is.
+export function getOrderAge(order) {
+  if (!order?.updated_at || TERMINAL_STATUSES.has(order.status)) return null
+  const days = Math.floor((Date.now() - new Date(order.updated_at).getTime()) / MS_PER_DAY)
+  if (days < 2) return null
+  return { days, color: days >= 7 ? 'var(--color-danger)' : 'var(--color-warn)' }
+}
diff --git a/production/web/src/orders/statuses.js b/production/web/src/orders/statuses.js
new file mode 100644
index 0000000..1a79c80
--- /dev/null
+++ b/production/web/src/orders/statuses.js
@@ -0,0 +1,79 @@
+import { useState, useEffect, useCallback, useSyncExternalStore } from 'react'
+import * as api from '../lib/api'
+
+// Fallback shown before the first fetch resolves — matches the seeded
+// defaults in migrations/039_order_statuses.sql so nothing flashes empty
+// or wrong on cold load; overwritten the moment the real (owner-editable)
+// list arrives. Every consumer used to import STATUSES/STATUS_LABELS/
+// STATUS_COLORS as static constants from this file — now a hook, but every
+// call site just destructures-and-renames (`const { statuses: STATUSES,
+// labels: STATUS_LABELS, colors: STATUS_COLORS } = useOrderStatuses()`) so
+// none of their actual render logic needed to change.
+const DEFAULT_ROWS = [
+  { key: 'new', label: 'Новая', color: '#f59e0b' },
+  { key: 'waiting_documents', label: 'Ожидание документов', color: '#14b8a6' },
+  { key: 'diagnosing', label: 'Диагностика', color: '#0ea5e9' },
+  { key: 'in_repair', label: 'В ремонте', color: '#8b5cf6' },
+  { key: 'waiting_parts', label: 'Ждём запчасти', color: '#f97316' },
+  { key: 'ready', label: 'Готово', color: '#22c55e' },
+  { key: 'completed', label: 'Выдано', color: '#64748b' },
+  { key: 'cancelled', label: 'Отменено', color: '#ef4444' },
+]
+
+// Module-scoped cache + listener set — same useFeatureModules.js shape, so
+// an owner renaming/reordering/deleting a status in Настройки is reflected
+// immediately in every mounted Kanban/list/analytics view without a reload.
+let cachedRows = DEFAULT_ROWS
+let hasFetched = false
+const listeners = new Set()
+
+function setCache(next) {
+  cachedRows = next
+  listeners.forEach((callback) => callback())
+}
+
+function subscribe(callback) {
+  listeners.add(callback)
+  return () => listeners.delete(callback)
+}
+
+function getSnapshot() {
+  return cachedRows
+}
+
+async function fetchStatuses() {
+  const rows = await api.orderStatuses.list()
+  setCache(rows)
+  hasFetched = true
+}
+
+export function useOrderStatuses() {
+  const rows = useSyncExternalStore(subscribe, getSnapshot)
+  const [loading, setLoading] = useState(() => !hasFetched)
+
+  useEffect(() => {
+    if (hasFetched) return
+    fetchStatuses().finally(() => setLoading(false))
+  }, [])
+
+  const statuses = rows.map((r) => r.key)
+  const labels = Object.fromEntries(rows.map((r) => [r.key, r.label]))
+  const colors = Object.fromEntries(rows.map((r) => [r.key, r.color]))
+  const requiredPermissions = Object.fromEntries(rows.map((r) => [r.key, r.required_permission || '']))
+
+  const reload = useCallback(() => fetchStatuses(), [])
+  const create = useCallback(async (label, color) => {
+    await api.orderStatuses.create({ label, color })
+    await fetchStatuses()
+  }, [])
+  const update = useCallback(async (key, body) => {
+    await api.orderStatuses.update(key, body)
+    await fetchStatuses()
+  }, [])
+  const remove = useCallback(async (key) => {
+    await api.orderStatuses.remove(key)
+    await fetchStatuses()
+  }, [])
+
+  return { rows, statuses, labels, colors, requiredPermissions, loading, reload, create, update, remove }
+}
diff --git a/production/web/src/orders/useAssignableStaff.js b/production/web/src/orders/useAssignableStaff.js
new file mode 100644
index 0000000..8d4da8a
--- /dev/null
+++ b/production/web/src/orders/useAssignableStaff.js
@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+import * as api from '../lib/api'
+
+// Feeds the "Мастер" picker in OrderModal/BatchModal — any staff role can
+// call api.staff.listAssignable (unlike the owner-only /staff page).
+export function useAssignableStaff() {
+  const [staffList, setStaffList] = useState([])
+
+  useEffect(() => {
+    api.staff.listAssignable().then((list) => setStaffList(list || [])).catch(() => setStaffList([]))
+  }, [])
+
+  return staffList
+}
diff --git a/production/web/src/orders/useDeviceCatalog.js b/production/web/src/orders/useDeviceCatalog.js
new file mode 100644
index 0000000..56652f2
--- /dev/null
+++ b/production/web/src/orders/useDeviceCatalog.js
@@ -0,0 +1,37 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Feeds CreateForm's group/brand pickers (see OrderModal.jsx). Loaded once
+// per form instance — groups/brands change rarely enough that a stale list
+// during a single order-creation session is a non-issue.
+export function useDeviceCatalog() {
+  const [groups, setGroups] = useState([])
+  const [brands, setBrands] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    try {
+      const [g, b] = await Promise.all([api.deviceGroups.list(), api.deviceBrands.list()])
+      setGroups(g)
+      setBrands(b)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await reload() })()
+  }, [reload])
+
+  // Any staff role can add a brand inline from the order form (see
+  // backend's CreateBrand doc comment) — appended locally so it's
+  // immediately selectable without a second round trip.
+  const addBrand = async (name) => {
+    const b = await api.deviceBrands.create({ name })
+    setBrands((prev) => [...prev, b].sort((a, c) => a.name.localeCompare(c.name, 'ru')))
+    return b
+  }
+
+  return { groups, brands, loading, addBrand }
+}
diff --git a/production/web/src/orders/useOrders.js b/production/web/src/orders/useOrders.js
new file mode 100644
index 0000000..571db3a
--- /dev/null
+++ b/production/web/src/orders/useOrders.js
@@ -0,0 +1,84 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+import { subscribeRealtime } from '../lib/realtime'
+import { useOrderStatuses } from './statuses'
+
+// Realtime push (internal/realtime's SSE hub) refetches immediately when
+// the backend broadcasts an "orders" event. This interval is now just a
+// safety net for a stalled/blocked SSE connection (e.g. a proxy that
+// doesn't support streaming) — much longer than the old 20s poll since the
+// push should carry the normal case.
+const FALLBACK_POLL_MS = 120000
+
+export function useOrders() {
+  const { statuses: STATUSES } = useOrderStatuses()
+  const [orders, setOrders] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const fetchOrders = useCallback(async () => {
+    try {
+      const data = await api.orders.list()
+      setOrders(data || [])
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    // Wrapped in a local async IIFE rather than calling fetchOrders()
+    // directly — react-hooks/set-state-in-effect flags a direct call to a
+    // function it can see synchronously reaches setState, even though the
+    // actual setState here happens after an await.
+    (async () => { await fetchOrders() })()
+
+    const unsubscribe = subscribeRealtime((topic) => {
+      if (topic === 'orders') fetchOrders()
+    })
+    const id = setInterval(fetchOrders, FALLBACK_POLL_MS)
+    return () => {
+      unsubscribe()
+      clearInterval(id)
+    }
+  }, [fetchOrders])
+
+  const ordersByStatus = STATUSES.reduce((acc, status) => {
+    acc[status] = orders.filter((o) => o.status === status)
+    return acc
+  }, {})
+
+  const updateStatus = async (orderId, newStatus) => {
+    try {
+      await api.orders.updateStatus(orderId, newStatus)
+      await fetchOrders()
+      return { error: null }
+    } catch (err) {
+      return { error: err.message }
+    }
+  }
+
+  const createOrder = async (payload) => {
+    try {
+      const data = await api.orders.create(payload)
+      await fetchOrders()
+      return { data, error: null }
+    } catch (err) {
+      return { data: null, error: err.message }
+    }
+  }
+
+  const updateOrder = async (orderId, payload) => {
+    try {
+      await api.orders.update(orderId, payload)
+      await fetchOrders()
+      return { error: null }
+    } catch (err) {
+      return { error: err.message }
+    }
+  }
+
+  return { orders, ordersByStatus, loading, error, updateStatus, createOrder, updateOrder, refetch: fetchOrders }
+}
diff --git a/production/web/src/payroll/MyPayrollPage.jsx b/production/web/src/payroll/MyPayrollPage.jsx
new file mode 100644
index 0000000..1a8bfe4
--- /dev/null
+++ b/production/web/src/payroll/MyPayrollPage.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import { Wallet } from 'lucide-react'
+import * as api from '../lib/api'
+import PayrollSummaryCard from './PayrollSummaryCard'
+
+// Self-service earnings view — every staff member gets this regardless of
+// role/permissions (no cashPerm gate on the backend route, see
+// internal/payroll's MySummary), unlike the owner-facing /payroll section
+// and StaffPayrollModal which stay cashPerm-gated. A master with no
+// money-tier access still needs to see what they've personally earned.
+const MyPayrollPage = () => {
+  const [summary, setSummary] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true)
+      setError('')
+      try {
+        setSummary(await api.payroll.mySummary())
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '18px' }}>
+        <Wallet size={20} />
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Моя зарплата</h1>
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem', marginBottom: '12px' }}>{error}</p>}
+      <PayrollSummaryCard summary={summary} loading={loading} />
+      {!loading && summary && (
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+          Проценты с заявок и ставки за картриджи считаются сразу, как только заявка или картридж отмечены выполненными — оформление в выплату делает бухгалтер/владелец, дата и сумма выплаты видны здесь после этого.
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default MyPayrollPage
diff --git a/production/web/src/payroll/PayrollPage.jsx b/production/web/src/payroll/PayrollPage.jsx
new file mode 100644
index 0000000..cec85b7
--- /dev/null
+++ b/production/web/src/payroll/PayrollPage.jsx
@@ -0,0 +1,155 @@
+import { useState } from 'react'
+import { Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useStaff } from '../staff/useStaff'
+import { usePayrollRates, useCartridgeRates } from './usePayrollRates'
+import PayrollRunsSection from './PayrollRunsSection'
+
+const tabStyle = (active) => ({
+  padding: '9px 16px', fontSize: '0.85rem', fontWeight: 510, borderRadius: '10px',
+  background: active ? 'var(--color-accent)' : 'var(--color-surface-sunken)',
+  color: active ? 'var(--color-accent-contrast, #fff)' : 'var(--text-muted)',
+})
+
+function StaffRateRow({ staffMember, rate, onSaved }) {
+  const [shiftRate, setShiftRate] = useState(rate?.shift_rate ?? '0')
+  const [percent, setPercent] = useState(rate?.order_profit_percent ?? '0')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = shiftRate !== (rate?.shift_rate ?? '0') || percent !== (rate?.order_profit_percent ?? '0')
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.payroll.upsertRate(staffMember.id, { staff_name: staffMember.name, shift_rate: shiftRate, order_profit_percent: percent })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px' }}>
+      <p style={{ flex: '1 1 160px', minWidth: '140px', fontWeight: 510, fontSize: '0.9rem' }}>{staffMember.name}</p>
+      <div style={{ width: '130px' }}>
+        <label style={labelStyle}>Ставка за смену, ₽</label>
+        <input value={shiftRate} onChange={(e) => setShiftRate(e.target.value)} style={inputStyle} />
+      </div>
+      <div style={{ width: '110px' }}>
+        <label style={labelStyle}>% от прибыли заявки</label>
+        <input value={percent} onChange={(e) => setPercent(e.target.value)} style={inputStyle} />
+      </div>
+      <button
+        type="button"
+        onClick={handleSave}
+        disabled={saving || !dirty}
+        className={dirty ? 'btn-primary' : 'btn-outline'}
+        style={{ padding: '9px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '5px', alignSelf: 'flex-end' }}
+      >
+        <Save size={14} /> {saving ? 'Сохраняем...' : 'Сохранить'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+function RatesTab() {
+  const { staffList, loading: staffLoading } = useStaff()
+  const { rates, loading: ratesLoading, reload } = usePayrollRates()
+  if (staffLoading || ratesLoading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+
+  const byStaffId = Object.fromEntries(rates.map((r) => [r.staff_id, r]))
+  const activeStaff = staffList.filter((s) => s.is_active)
+
+  return (
+    <div className="glass-panel" style={{ overflow: 'hidden' }}>
+      {activeStaff.map((s) => (
+        <StaffRateRow key={s.id} staffMember={s} rate={byStaffId[s.id]} onSaved={reload} />
+      ))}
+    </div>
+  )
+}
+
+function CartridgeRateRow({ item, onSaved }) {
+  const [rate, setRate] = useState(item.rate)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = rate !== item.rate
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.payroll.upsertCartridgeRate(item.cartridge_model_id, rate)
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px' }}>
+      <p style={{ flex: '1 1 200px', minWidth: '180px', fontSize: '0.88rem' }}>{item.brand_name} {item.model_code}</p>
+      <input value={rate} onChange={(e) => setRate(e.target.value)} style={{ ...inputStyle, width: '110px' }} />
+      <button
+        type="button"
+        onClick={handleSave}
+        disabled={saving || !dirty}
+        className={dirty ? 'btn-primary' : 'btn-outline'}
+        style={{ padding: '7px 12px', fontSize: '0.8rem' }}
+      >
+        {saving ? '...' : 'Сохранить'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+function CartridgeRatesTab() {
+  const { rates, loading, reload } = useCartridgeRates()
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (rates.length === 0) return <p style={{ color: 'var(--text-muted)', fontSize: '0.88rem' }}>В справочнике картриджей пока нет моделей — добавьте их в Настройках.</p>
+
+  return (
+    <div className="glass-panel" style={{ overflow: 'hidden' }}>
+      {rates.map((r) => <CartridgeRateRow key={r.cartridge_model_id} item={r} onSaved={reload} />)}
+    </div>
+  )
+}
+
+const TABS = [
+  { key: 'runs', label: 'Начисления' },
+  { key: 'rates', label: 'Ставки сотрудников' },
+  { key: 'cartridge_rates', label: 'Ставки за картриджи' },
+]
+
+const PayrollPage = () => {
+  const [tab, setTab] = useState('runs')
+  const { staffList } = useStaff()
+  const staffOptions = staffList.filter((s) => s.is_active)
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px', flexWrap: 'wrap', gap: '12px' }}>
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Зарплата</h1>
+        <div style={{ display: 'flex', gap: '6px' }}>
+          {TABS.map((t) => (
+            <button key={t.key} type="button" onClick={() => setTab(t.key)} style={tabStyle(tab === t.key)}>{t.label}</button>
+          ))}
+        </div>
+      </div>
+
+      {tab === 'runs' && <PayrollRunsSection staffOptions={staffOptions} />}
+      {tab === 'rates' && <RatesTab />}
+      {tab === 'cartridge_rates' && <CartridgeRatesTab />}
+    </div>
+  )
+}
+
+export default PayrollPage
diff --git a/production/web/src/payroll/PayrollRunsSection.jsx b/production/web/src/payroll/PayrollRunsSection.jsx
new file mode 100644
index 0000000..b9c25a9
--- /dev/null
+++ b/production/web/src/payroll/PayrollRunsSection.jsx
@@ -0,0 +1,405 @@
+import { useState } from 'react'
+import { Plus, Trash2, Wallet, ChevronDown, ChevronUp } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { exclusiveEndDate, inclusiveEndDate } from '../lib/dateRange'
+import { useRegisters } from '../cash/useRegisters'
+import { usePayrollRuns } from './usePayrollRuns'
+import Modal from '../ui/Modal'
+import { METHOD_LABELS } from '../cash/paymentMethods'
+
+const STATUS_LABELS = { draft: 'Черновик', paid: 'Выплачено' }
+const STATUS_COLORS = { draft: 'var(--color-warn)', paid: 'var(--color-success)' }
+const selectStyle = { ...inputStyle, width: 'auto', padding: '8px 10px', fontSize: '0.85rem' }
+const money = (v) => Number(v).toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+
+// staffOptions omitted (fixedStaffId set) when embedded in one employee's
+// own card — the picker only exists in the standalone /payroll section,
+// where "Начислить" must let the owner choose who.
+function CreateRunModal({ staffOptions, fixedStaffId, fixedStaffName, onClose, onCreated }) {
+  const [staffId, setStaffId] = useState(fixedStaffId || '')
+  const [periodFrom, setPeriodFrom] = useState('')
+  const [periodTo, setPeriodTo] = useState('')
+  const [shiftsCount, setShiftsCount] = useState('0')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    const staffName = fixedStaffName || staffOptions.find((s) => s.id === staffId)?.name || ''
+    try {
+      await api.payroll.createRun({
+        staff_id: staffId, staff_name: staffName,
+        period_from: periodFrom, period_to: exclusiveEndDate(periodTo),
+        shifts_count: Number(shiftsCount) || 0,
+      })
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal title={`Начислить${fixedStaffName ? ` — ${fixedStaffName}` : ''}`} onClose={onClose} maxWidth="480px">
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {!fixedStaffId && (
+          <div>
+            <label style={labelStyle}>Сотрудник *</label>
+            <select value={staffId} onChange={(e) => setStaffId(e.target.value)} style={{ ...inputStyle, width: '100%' }} required>
+              <option value="">— выберите —</option>
+              {staffOptions.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+          </div>
+        )}
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <div style={{ flex: 1 }}>
+            <label style={labelStyle}>Период с *</label>
+            <input type="date" value={periodFrom} onChange={(e) => setPeriodFrom(e.target.value)} style={{ ...inputStyle, width: '100%' }} required />
+          </div>
+          <div style={{ flex: 1 }}>
+            <label style={labelStyle}>Период по *</label>
+            <input type="date" value={periodTo} onChange={(e) => setPeriodTo(e.target.value)} style={{ ...inputStyle, width: '100%' }} required />
+          </div>
+        </div>
+        <div>
+          <label style={labelStyle}>Смен за период</label>
+          <input type="number" min="0" value={shiftsCount} onChange={(e) => setShiftsCount(e.target.value)} style={{ ...inputStyle, width: '140px' }} />
+        </div>
+        <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+          Посчитает ставку за смены + % от прибыли по завершённым за период заявкам + ставки за заправленные картриджи. Заявка/картридж, уже попавшие в другое начисление, не учитываются повторно.
+        </p>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Считаем...' : 'Начислить'}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+function AdjustmentForm({ runId, onAdded }) {
+  const [amount, setAmount] = useState('')
+  const [reason, setReason] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.payroll.addAdjustment(runId, { amount, reason })
+      setAmount('')
+      setReason('')
+      onAdded()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'flex-end', marginTop: '8px' }}>
+      <div style={{ width: '120px' }}>
+        <label style={labelStyle}>Сумма (+/-)</label>
+        <input value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="500 или -200" style={inputStyle} required />
+      </div>
+      <div style={{ flex: 1, minWidth: '160px' }}>
+        <label style={labelStyle}>Причина</label>
+        <input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Премия / удержание" style={{ ...inputStyle, width: '100%' }} required />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>
+        {saving ? 'Добавляем...' : 'Добавить корректировку'}
+      </button>
+    </form>
+  )
+}
+
+function PayRunModal({ run, onClose, onPaid }) {
+  const { registers } = useRegisters()
+  const activeRegisters = registers.filter((r) => !r.is_archived)
+  const [registerId, setRegisterId] = useState('')
+  const [method, setMethod] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const register = activeRegisters.find((r) => r.id === registerId)
+  const allowedMethods = register?.types || []
+  const effectiveMethod = allowedMethods.includes(method) ? method : (allowedMethods[0] || '')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.payroll.payRun(run.id, registerId, effectiveMethod)
+      onPaid()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal title={`Выплатить ${money(run.grand_total)} ₽`} onClose={onClose} maxWidth="480px">
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{run.staff_name}, {run.period_from} — {inclusiveEndDate(run.period_to)}</p>
+        <div>
+          <label style={labelStyle}>Касса *</label>
+          <select value={registerId} onChange={(e) => { setRegisterId(e.target.value); setMethod('') }} style={{ ...inputStyle, width: '100%' }} required>
+            <option value="">— выберите кассу —</option>
+            {activeRegisters.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+        {allowedMethods.length > 1 && (
+          <div>
+            <label style={labelStyle}>Из какого баланса *</label>
+            <select value={effectiveMethod} onChange={(e) => setMethod(e.target.value)} style={{ ...inputStyle, width: '100%' }} required>
+              {allowedMethods.map((m) => <option key={m} value={m}>{METHOD_LABELS[m]}</option>)}
+            </select>
+          </div>
+        )}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving || !effectiveMethod} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Выплачиваем...' : 'Выплатить'}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+// onChanged refetches this run's own detail (adjustment/pay actions keep
+// the row expanded); onDeleted collapses it instead, since a deleted run
+// has nothing left to refetch.
+function RunDetail({ run, onChanged, onDeleted }) {
+  const [showPay, setShowPay] = useState(false)
+
+  const handleDelete = async () => {
+    if (!window.confirm('Удалить черновик начисления? Заявки/картриджи станут снова доступны для начисления.')) return
+    await api.payroll.deleteRun(run.id)
+    onDeleted()
+  }
+
+  const handleDeleteAdjustment = async (id) => {
+    await api.payroll.deleteAdjustment(id)
+    onChanged()
+  }
+
+  return (
+    <div style={{ padding: '14px 18px', borderTop: '1px solid var(--border-light)', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', fontSize: '0.82rem' }}>
+        <p>Смены: <strong>{run.shifts_count} × {money(run.shift_rate)} ₽ = {money(run.shift_total)} ₽</strong></p>
+        <p>% от прибыли заявок ({run.order_profit_percent}%): <strong>{money(run.orders_commission_total)} ₽</strong></p>
+        <p>Картриджи: <strong>{money(run.cartridge_total)} ₽</strong></p>
+        <p>Корректировки: <strong>{money(run.adjustment_total)} ₽</strong></p>
+      </div>
+
+      {run.orders?.length > 0 && (
+        <div>
+          <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>Заявки ({run.orders.length})</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', fontSize: '0.8rem' }}>
+            {run.orders.map((o) => (
+              <div key={o.order_id} style={{ display: 'flex', gap: '14px' }}>
+                <span style={{ minWidth: '80px' }}>№ {o.order_number || '—'}</span>
+                <span>цена {money(o.final_price)} ₽</span>
+                <span>запчасти {money(o.parts_cost)} ₽</span>
+                <span>прибыль {money(o.profit)} ₽</span>
+                <span style={{ fontWeight: 510 }}>комиссия {money(o.commission)} ₽</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {run.cartridges?.length > 0 && (
+        <div>
+          <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>Картриджи ({run.cartridges.length})</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', fontSize: '0.8rem' }}>
+            {run.cartridges.map((ci) => (
+              <div key={ci.cartridge_item_id} style={{ display: 'flex', gap: '14px' }}>
+                <span>{ci.model}</span>
+                <span style={{ fontWeight: 510 }}>{money(ci.rate)} ₽</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>Корректировки</p>
+        {run.adjustments?.length > 0 && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '3px', fontSize: '0.8rem', marginBottom: '4px' }}>
+            {run.adjustments.map((a) => (
+              <div key={a.id} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+                <span style={{ fontWeight: 510, color: Number(a.amount) >= 0 ? 'var(--color-success)' : 'var(--accent-red)' }}>
+                  {Number(a.amount) >= 0 ? '+' : ''}{money(a.amount)} ₽
+                </span>
+                <span style={{ color: 'var(--text-muted)' }}>{a.reason}</span>
+                {run.status === 'draft' && (
+                  <button type="button" onClick={() => handleDeleteAdjustment(a.id)} style={{ background: 'none', color: 'var(--text-muted)', padding: '2px' }}>
+                    <Trash2 size={13} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {run.status === 'draft' && <AdjustmentForm runId={run.id} onAdded={onChanged} />}
+      </div>
+
+      {run.status === 'draft' && (
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button
+            type="button"
+            onClick={() => setShowPay(true)}
+            disabled={Number(run.grand_total) <= 0}
+            className="btn-primary"
+            style={{ padding: '9px 16px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+          >
+            <Wallet size={14} /> Выплатить {money(run.grand_total)} ₽
+          </button>
+          <button type="button" onClick={handleDelete} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.82rem' }}>
+            Удалить черновик
+          </button>
+        </div>
+      )}
+      {run.status === 'paid' && (
+        <p style={{ fontSize: '0.8rem', color: 'var(--color-success)' }}>Выплачено {run.paid_at?.slice(0, 16).replace('T', ' ')}</p>
+      )}
+
+      {showPay && <PayRunModal run={run} onClose={() => setShowPay(false)} onPaid={() => { setShowPay(false); onChanged() }} />}
+    </div>
+  )
+}
+
+// ListRuns (the summary the parent's usePayrollRuns feeds in as `run`)
+// deliberately omits orders/cartridges/adjustments — only GetRun returns
+// those. Expanding a row fetches the full detail on demand rather than
+// paying that cost for every row in the list up front.
+function RunRow({ run, expandedId, onToggle, onListChanged }) {
+  const isExpanded = expandedId === run.id
+  const [detail, setDetail] = useState(null)
+  const [loadingDetail, setLoadingDetail] = useState(false)
+
+  const loadDetail = async () => {
+    setLoadingDetail(true)
+    try {
+      setDetail(await api.payroll.getRun(run.id))
+    } finally {
+      setLoadingDetail(false)
+    }
+  }
+
+  const handleToggle = () => {
+    onToggle(run.id)
+    if (!isExpanded && !detail) loadDetail()
+  }
+
+  const handleChanged = async () => {
+    await Promise.all([loadDetail(), onListChanged()])
+  }
+
+  const handleDeleted = async () => {
+    onToggle(run.id)
+    await onListChanged()
+  }
+
+  return (
+    <div>
+      <div
+        onClick={handleToggle}
+        style={{ padding: '12px 18px', borderBottom: isExpanded ? 'none' : '1px solid var(--border-light)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '12px', cursor: 'pointer' }}
+      >
+        {isExpanded ? <ChevronUp size={15} /> : <ChevronDown size={15} />}
+        <div style={{ flex: '1 1 160px', minWidth: '140px' }}>
+          <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>{run.staff_name}</p>
+          <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>{run.period_from} — {inclusiveEndDate(run.period_to)}</p>
+        </div>
+        <span style={{ fontSize: '0.78rem', fontWeight: 510, color: STATUS_COLORS[run.status], padding: '3px 10px', borderRadius: '999px', background: 'var(--color-surface-sunken)' }}>
+          {STATUS_LABELS[run.status]}
+        </span>
+        <p style={{ fontWeight: 590, fontSize: '1rem' }}>{money(run.grand_total)} ₽</p>
+      </div>
+      {isExpanded && (loadingDetail || !detail ? (
+        <p style={{ padding: '14px 18px', color: 'var(--text-muted)', fontSize: '0.85rem' }}>Загрузка...</p>
+      ) : (
+        <RunDetail run={detail} onChanged={handleChanged} onDeleted={handleDeleted} />
+      ))}
+    </div>
+  )
+}
+
+// Reused both by the standalone /payroll page (every staff member, staff
+// picker shown) and by StaffPayrollModal embedded in one employee's card
+// (fixedStaffId set, picker hidden, list pre-filtered) — the run
+// create/detail/adjustment/pay logic is identical either way.
+const PayrollRunsSection = ({ staffOptions = [], fixedStaffId, fixedStaffName }) => {
+  const [staffFilter, setStaffFilter] = useState(fixedStaffId || '')
+  const [statusFilter, setStatusFilter] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+  const [expandedId, setExpandedId] = useState(null)
+  const { runs, loading, reload } = usePayrollRuns({ staff_id: fixedStaffId || staffFilter, status: statusFilter })
+
+  const handleChanged = async () => {
+    await reload()
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px', marginBottom: '14px' }}>
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+          {!fixedStaffId && (
+            <select value={staffFilter} onChange={(e) => setStaffFilter(e.target.value)} style={selectStyle}>
+              <option value="">Все сотрудники</option>
+              {staffOptions.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
+          )}
+          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} style={selectStyle}>
+            <option value="">Все статусы</option>
+            <option value="draft">Черновики</option>
+            <option value="paid">Выплаченные</option>
+          </select>
+        </div>
+        <button
+          type="button"
+          onClick={() => setShowCreate(true)}
+          className="btn-primary"
+          style={{ padding: '9px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}
+        >
+          <Plus size={15} /> Начислить
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : runs.length === 0 ? (
+        <p style={{ color: 'var(--text-muted)', fontSize: '0.88rem' }}>Начислений пока нет.</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {runs.map((r) => (
+            <RunRow key={r.id} run={r} expandedId={expandedId} onToggle={(id) => setExpandedId((cur) => (cur === id ? null : id))} onListChanged={handleChanged} />
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <CreateRunModal
+          staffOptions={staffOptions}
+          fixedStaffId={fixedStaffId}
+          fixedStaffName={fixedStaffName}
+          onClose={() => setShowCreate(false)}
+          onCreated={() => { setShowCreate(false); reload() }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default PayrollRunsSection
diff --git a/production/web/src/payroll/PayrollSummaryCard.jsx b/production/web/src/payroll/PayrollSummaryCard.jsx
new file mode 100644
index 0000000..d33758b
--- /dev/null
+++ b/production/web/src/payroll/PayrollSummaryCard.jsx
@@ -0,0 +1,57 @@
+const money = (v) => Number(v).toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+
+function BigTile({ label, value, color }) {
+  return (
+    <div style={{ flex: '1 1 160px', minWidth: '150px' }}>
+      <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{label}</p>
+      <p style={{ fontSize: '1.35rem', fontWeight: 590, color: color || 'var(--text-main)' }}>{money(value)} ₽</p>
+    </div>
+  )
+}
+
+function BreakdownRow({ label, value, hint }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '7px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{label}{hint ? <span style={{ fontSize: '0.74rem' }}> {hint}</span> : null}</span>
+      <span style={{ fontSize: '0.92rem', fontWeight: 510 }}>{money(value)} ₽</span>
+    </div>
+  )
+}
+
+// Live view of one staff member's pay — reused by both the owner-facing
+// StaffPayrollModal (any staff, via api.payroll.summary) and the
+// self-service MyPayrollPage (own numbers only, via api.payroll.mySummary).
+// Deliberately no dependence on which endpoint fed it — same shape either
+// way (see backend's internal/payroll/summary.go staffSummary struct).
+function PayrollSummaryCard({ summary, loading }) {
+  if (loading) return <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>Загрузка...</p>
+  if (!summary) return null
+
+  const owed = Number(summary.owed_total)
+
+  return (
+    <div className="glass-panel" style={{ padding: '18px', marginBottom: '18px' }}>
+      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '16px' }}>
+        <BigTile label="Заработано всего" value={summary.earned_total} />
+        <BigTile label="Выплачено" value={summary.paid_total} color="var(--color-success, #16a34a)" />
+        <BigTile label="Осталось выплатить" value={summary.owed_total} color={owed > 0 ? 'var(--color-warn, #d97706)' : undefined} />
+      </div>
+      <div>
+        <BreakdownRow label="За смены" value={summary.shift_earned} />
+        <BreakdownRow
+          label="Проценты с заявок"
+          value={summary.commission_earned}
+          hint={summary.pending_orders > 0 ? `(в т.ч. ${summary.pending_orders} ещё не оформлено в начисление)` : ''}
+        />
+        <BreakdownRow
+          label="За картриджи"
+          value={summary.cartridge_earned}
+          hint={summary.pending_cartridges > 0 ? `(в т.ч. ${summary.pending_cartridges} ещё не оформлено в начисление)` : ''}
+        />
+        <BreakdownRow label="Корректировки" value={summary.adjustment_total} />
+      </div>
+    </div>
+  )
+}
+
+export default PayrollSummaryCard
diff --git a/production/web/src/payroll/StaffPayrollModal.jsx b/production/web/src/payroll/StaffPayrollModal.jsx
new file mode 100644
index 0000000..33524b7
--- /dev/null
+++ b/production/web/src/payroll/StaffPayrollModal.jsx
@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react'
+import { X, Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { usePayrollRates } from './usePayrollRates'
+import PayrollRunsSection from './PayrollRunsSection'
+import PayrollSummaryCard from './PayrollSummaryCard'
+
+// "Карточка сотрудника" side of the two agreed payroll surfaces — opened
+// from a button on that employee's own row in StaffPage. Reuses
+// PayrollRunsSection with fixedStaffId so the same create/detail/pay logic
+// as the standalone /payroll page applies here, just pre-scoped to one
+// person instead of showing a staff picker.
+function RateEditor({ staffMember }) {
+  const { rates, loading, reload } = usePayrollRates()
+  const rate = rates.find((r) => r.staff_id === staffMember.id)
+  const [shiftRate, setShiftRate] = useState(rate?.shift_rate ?? '0')
+  const [percent, setPercent] = useState(rate?.order_profit_percent ?? '0')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [loadedFor, setLoadedFor] = useState(null)
+
+  // Rates load async after this component's own initial render — sync the
+  // form fields once the real values arrive, but only the first time (a
+  // save's own reload() must not stomp mid-edit values back to server
+  // state), matching the "adjusted during render" reset pattern used
+  // elsewhere (see AdminLayout's lastPathname).
+  if (!loading && loadedFor !== staffMember.id) {
+    setLoadedFor(staffMember.id)
+    setShiftRate(rate?.shift_rate ?? '0')
+    setPercent(rate?.order_profit_percent ?? '0')
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.payroll.upsertRate(staffMember.id, { staff_name: staffMember.name, shift_rate: shiftRate, order_profit_percent: percent })
+      await reload()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) return <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>Загрузка ставок...</p>
+
+  return (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: '18px' }}>
+      <div style={{ width: '140px' }}>
+        <label style={labelStyle}>Ставка за смену, ₽</label>
+        <input value={shiftRate} onChange={(e) => setShiftRate(e.target.value)} style={inputStyle} />
+      </div>
+      <div style={{ width: '120px' }}>
+        <label style={labelStyle}>% от прибыли заявки</label>
+        <input value={percent} onChange={(e) => setPercent(e.target.value)} style={inputStyle} />
+      </div>
+      <button type="button" onClick={handleSave} disabled={saving} className="btn-primary" style={{ padding: '9px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '5px' }}>
+        <Save size={14} /> {saving ? 'Сохраняем...' : 'Сохранить ставку'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+const StaffPayrollModal = ({ staffMember, onClose }) => {
+  const [summary, setSummary] = useState(null)
+  const [summaryLoading, setSummaryLoading] = useState(true)
+
+  useEffect(() => {
+    (async () => {
+      setSummaryLoading(true)
+      try {
+        setSummary(await api.payroll.summary(staffMember.id))
+      } finally {
+        setSummaryLoading(false)
+      }
+    })()
+  }, [staffMember.id])
+
+  return (
+    <div
+      className="modal-overlay"
+      style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '40px 16px', overflowY: 'auto', zIndex: 200 }}
+      onClick={onClose}
+    >
+      <div
+        className="modal-panel"
+        style={{ background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '760px', boxShadow: 'var(--shadow-elevated)', padding: '24px' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Зарплата — {staffMember.name}</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <PayrollSummaryCard summary={summary} loading={summaryLoading} />
+        <RateEditor staffMember={staffMember} />
+        <PayrollRunsSection fixedStaffId={staffMember.id} fixedStaffName={staffMember.name} />
+      </div>
+    </div>
+  )
+}
+
+export default StaffPayrollModal
diff --git a/production/web/src/payroll/usePayrollRates.js b/production/web/src/payroll/usePayrollRates.js
new file mode 100644
index 0000000..1c744c1
--- /dev/null
+++ b/production/web/src/payroll/usePayrollRates.js
@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Staff members without a configured row simply aren't in the list yet —
+// PayrollPage merges this against useStaff()'s own list so every employee
+// shows up, configured or not (missing = both figures read as 0).
+export function usePayrollRates() {
+  const [rates, setRates] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setRates((await api.payroll.listRates()) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  return { rates, loading, reload: load }
+}
+
+export function useCartridgeRates() {
+  const [rates, setRates] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setRates((await api.payroll.listCartridgeRates()) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  return { rates, loading, reload: load }
+}
diff --git a/production/web/src/payroll/usePayrollRuns.js b/production/web/src/payroll/usePayrollRuns.js
new file mode 100644
index 0000000..2726775
--- /dev/null
+++ b/production/web/src/payroll/usePayrollRuns.js
@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// filters: { staff_id, status } — passed straight through to
+// api.payroll.listRuns. key (JSON string) is the actual dependency, not
+// filters itself, since filters is a fresh object literal on every caller
+// render — same reasoning as delivery/useDeliveries.js.
+export function usePayrollRuns(filters = {}) {
+  const [runs, setRuns] = useState([])
+  const [loading, setLoading] = useState(true)
+  const key = JSON.stringify(filters)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setRuns((await api.payroll.listRuns(filters)) || [])
+    } finally {
+      setLoading(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  return { runs, loading, reload: load }
+}
diff --git a/production/web/src/pcbuilder/PcBuilderCore.jsx b/production/web/src/pcbuilder/PcBuilderCore.jsx
new file mode 100644
index 0000000..b8f2297
--- /dev/null
+++ b/production/web/src/pcbuilder/PcBuilderCore.jsx
@@ -0,0 +1,360 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Plus, X } from 'lucide-react'
+import { PC_ALL_TYPES, PC_MULTI_TYPES, PC_TYPE_LABELS } from './specFields'
+import { detectVendor } from './vendorMatch'
+import { isCompatible } from './compatFilter'
+
+const ISSUE_STYLE = {
+  error: { color: '#dc2626', label: 'Несовместимо' },
+  warning: { color: '#d97706', label: 'Внимание' },
+  info: { color: 'var(--color-text-muted, #6b7280)', label: 'Не выбрано' },
+}
+
+// '' stands for our own stock (component_row.source is empty/omitted for
+// parts, set to the supplier name for external_components rows — see
+// pcbuilder.Handler.ListComponents's doc comment).
+const OWN_STOCK_SOURCE = ''
+
+const smallFieldStyle = {
+  padding: '9px 10px', border: '1px solid var(--color-border, #e2e8f0)', borderRadius: '6px',
+  background: 'var(--color-surface, #fff)', color: 'var(--color-text, #0f172a)',
+  fontSize: '0.85rem', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
+}
+
+// A fresh, still-empty row for a multi-quantity slot (ram/storage) — one
+// of these always trails the list so there's always a next blank picker to
+// fill, same "just start typing/picking" affordance a lone <select> gives
+// for the single-quantity types.
+const emptyRow = () => ({ component: null, qty: 1 })
+
+// Data-source-agnostic on purpose: the public /pc-builder page and the
+// authenticated CRM /pc-configurator page hit different endpoints (public
+// vs staff-authenticated pcbuilder.Handler routes, same Go handler either
+// way) but render the identical picker + compatibility panel, so listFn/
+// checkFn are injected rather than hardcoded here.
+//
+// presetSelection/presetVersion are an optional escape hatch for
+// PcConfiguratorPage's popular-build quick-select: bump presetVersion after
+// changing presetSelection ({type: id}) and this component resolves each id
+// against whatever's currently loaded and replaces the selection wholesale
+// — a slot whose id isn't found (out of stock, stale) is simply left empty
+// rather than erroring, same "stale id degrades to nothing" stance the
+// backend's own Check takes. Presets only ever carry one id per type (see
+// pcbuilder.presetRow's own Selection shape) — applying one to ram/storage
+// yields a single row of qty 1, not a multi-row build. The public page
+// never passes these, so both stay undefined there and this effect is a
+// no-op.
+function PcBuilderCore({ listFn, checkFn, onSelectionChange, fieldStyle, labelStyle, refreshKey, presetSelection, presetVersion }) {
+  const [itemsByType, setItemsByType] = useState({})
+  // type -> component object (single types) or array of {component, qty} (ram/storage)
+  const [selection, setSelection] = useState({})
+  const [result, setResult] = useState({ issues: [], total_price: 0, estimated_wattage_w: 0 })
+  const [supplier, setSupplier] = useState('') // '' = все поставщики
+  const [search, setSearch] = useState({}) // type -> search text
+
+  // refreshKey is an optional prop the caller bumps after triggering a
+  // server-side external-catalog refresh (see PcConfiguratorPage) so the
+  // picker re-fetches instead of showing stale pre-refresh options.
+  useEffect(() => {
+    let cancelled = false
+    PC_ALL_TYPES.forEach((type) => {
+      listFn(type).then((items) => {
+        if (!cancelled) setItemsByType((prev) => ({ ...prev, [type]: items }))
+      })
+    })
+    return () => { cancelled = true }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey])
+
+  useEffect(() => {
+    let cancelled = false
+    const selectionIds = {}
+    for (const type of PC_ALL_TYPES) {
+      if (PC_MULTI_TYPES.includes(type)) continue
+      if (selection[type]) selectionIds[type] = selection[type].id
+    }
+    const multiSelectionIds = {}
+    for (const type of PC_MULTI_TYPES) {
+      const rows = (selection[type] || []).filter((r) => r.component)
+      if (rows.length) multiSelectionIds[type] = rows.map((r) => ({ id: r.component.id, qty: r.qty }))
+    }
+    checkFn(selectionIds, multiSelectionIds).then((res) => {
+      if (!cancelled) setResult(res)
+    })
+    return () => { cancelled = true }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selection])
+
+  // Resolved during render ("adjusting state when a prop changes" —
+  // https://react.dev/learn/you-might-not-need-an-effect — rather than in
+  // an effect) so applying a preset doesn't cost an extra commit; the
+  // appliedPresetVersion guard makes sure this only runs the render right
+  // after presetVersion actually changes, not on every render. Parent
+  // notification happens separately below, keyed off `selection` itself,
+  // so it fires exactly once per resulting selection regardless of whether
+  // that selection came from a manual pick or a preset.
+  const [appliedPresetVersion, setAppliedPresetVersion] = useState(presetVersion)
+  if (presetSelection && presetVersion !== appliedPresetVersion) {
+    setAppliedPresetVersion(presetVersion)
+    const next = {}
+    for (const type of PC_ALL_TYPES) {
+      const id = presetSelection[type]
+      if (!id) continue
+      const found = (itemsByType[type] || []).find((it) => it.id === id)
+      if (!found) continue
+      next[type] = PC_MULTI_TYPES.includes(type) ? [{ component: found, qty: 1 }] : found
+    }
+    setSelection(next)
+  }
+
+  useEffect(() => {
+    if (onSelectionChange) onSelectionChange(selection)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selection])
+
+  // Every supplier name seen across whatever's loaded so far, own stock
+  // ('') always first when present — drives the global filter's option
+  // list without a separate endpoint for "which suppliers exist."
+  const suppliers = useMemo(() => {
+    const set = new Set()
+    let hasOwn = false
+    Object.values(itemsByType).forEach((items) => {
+      (items || []).forEach((it) => {
+        if (it.source) set.add(it.source)
+        else hasOwn = true
+      })
+    })
+    const list = [...set].sort()
+    if (hasOwn) list.unshift(OWN_STOCK_SOURCE)
+    return list
+  }, [itemsByType])
+
+  const handleSelect = (type, id) => {
+    const items = itemsByType[type] || []
+    const component = items.find((it) => it.id === id) || null
+    setSelection((prev) => {
+      const next = { ...prev }
+      if (component) next[type] = component
+      else delete next[type]
+      return next
+    })
+  }
+
+  const handleMultiPick = (type, rowIndex, id) => {
+    const items = itemsByType[type] || []
+    const component = items.find((it) => it.id === id) || null
+    setSelection((prev) => {
+      const rows = [...(prev[type] || [])]
+      rows[rowIndex] = { ...rows[rowIndex], component }
+      return { ...prev, [type]: rows }
+    })
+  }
+  const handleMultiQty = (type, rowIndex, qty) => {
+    const n = Math.max(1, Number(qty) || 1)
+    setSelection((prev) => {
+      const rows = [...(prev[type] || [])]
+      rows[rowIndex] = { ...rows[rowIndex], qty: n }
+      return { ...prev, [type]: rows }
+    })
+  }
+  const handleMultiAddRow = (type) => {
+    setSelection((prev) => ({ ...prev, [type]: [...(prev[type] || []), emptyRow()] }))
+  }
+  const handleMultiRemoveRow = (type, rowIndex) => {
+    setSelection((prev) => {
+      const rows = (prev[type] || []).filter((_, i) => i !== rowIndex)
+      return { ...prev, [type]: rows }
+    })
+  }
+
+  const totalPrice = result.total_price || 0
+
+  // Visible options for one <select> — search text, supplier filter, and
+  // (unless this exact id is already picked right here) the cross-part
+  // compatibility filter all apply. keepId is whichever id this particular
+  // dropdown currently holds, so switching the supplier filter or another
+  // slot's pick never silently yanks away what's already chosen here.
+  const visibleFor = (type, keepId) => {
+    const items = itemsByType[type] || []
+    const q = (search[type] || '').trim().toLowerCase()
+    return items.filter((it) => {
+      if (it.id === keepId) return true
+      if (supplier !== '' && (it.source || '') !== supplier) return false
+      if (q && !it.name.toLowerCase().includes(q)) return false
+      if (!isCompatible(type, it, selection)) return false
+      return true
+    })
+  }
+
+  const renderOptionGroups = (visible) => {
+    const groups = new Map()
+    for (const it of visible) {
+      const vendor = detectVendor(it.name)
+      if (!groups.has(vendor)) groups.set(vendor, [])
+      groups.get(vendor).push(it)
+    }
+    const groupNames = [...groups.keys()].sort((a, b) => (a === 'Другое' ? 1 : b === 'Другое' ? -1 : a.localeCompare(b, 'ru')))
+    return groupNames.map((vendor) => (
+      <optgroup key={vendor} label={vendor}>
+        {groups.get(vendor).map((it) => (
+          <option key={it.id} value={it.id}>
+            {it.name}{it.sale_price ? ` — ${Number(it.sale_price).toLocaleString('ru-RU')} ₽` : ''}{it.source ? ` (${it.source})` : ''}
+          </option>
+        ))}
+      </optgroup>
+    ))
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      {suppliers.length > 1 && (
+        <div style={{ maxWidth: '280px' }}>
+          <label style={labelStyle}>Поставщик</label>
+          <select value={supplier} onChange={(e) => setSupplier(e.target.value)} style={fieldStyle}>
+            <option value="">Все поставщики</option>
+            {suppliers.map((s) => (
+              <option key={s || '__own__'} value={s}>{s || 'Свой склад'}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '14px' }}>
+        {PC_ALL_TYPES.map((type) => {
+          const items = itemsByType[type]
+          const isMulti = PC_MULTI_TYPES.includes(type)
+
+          if (isMulti) {
+            const rows = selection[type]?.length ? selection[type] : [emptyRow()]
+            return (
+              <div key={type}>
+                <label style={labelStyle}>{PC_TYPE_LABELS[type]}</label>
+                {items && items.length > 8 && (
+                  <input
+                    value={search[type] || ''}
+                    onChange={(e) => setSearch((prev) => ({ ...prev, [type]: e.target.value }))}
+                    placeholder="Поиск по названию..."
+                    style={{ ...fieldStyle, marginBottom: '6px' }}
+                  />
+                )}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                  {rows.map((row, idx) => {
+                    const selectedId = row.component?.id || ''
+                    const visible = visibleFor(type, selectedId)
+                    return (
+                      <div key={idx} style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+                        <select
+                          value={selectedId}
+                          onChange={(e) => handleMultiPick(type, idx, e.target.value)}
+                          style={{ ...fieldStyle, flex: 1 }}
+                          disabled={!items}
+                        >
+                          <option value="">{items ? '— не выбрано —' : 'Загрузка...'}</option>
+                          {renderOptionGroups(visible)}
+                        </select>
+                        <input
+                          type="number" min="1" value={row.qty}
+                          onChange={(e) => handleMultiQty(type, idx, e.target.value)}
+                          title="Количество"
+                          style={{ ...smallFieldStyle, width: '54px', flexShrink: 0 }}
+                        />
+                        {(rows.length > 1 || row.component) && (
+                          <button
+                            type="button"
+                            onClick={() => handleMultiRemoveRow(type, idx)}
+                            title="Убрать"
+                            style={{ background: 'none', color: 'var(--color-text-muted, #94a3b8)', padding: '4px', flexShrink: 0 }}
+                          >
+                            <X size={15} />
+                          </button>
+                        )}
+                      </div>
+                    )
+                  })}
+                  <button
+                    type="button"
+                    onClick={() => handleMultiAddRow(type)}
+                    style={{
+                      display: 'inline-flex', alignItems: 'center', gap: '4px', alignSelf: 'flex-start',
+                      background: 'none', color: 'var(--color-accent, #4f46e5)', fontSize: '0.8rem', padding: '2px 0',
+                    }}
+                  >
+                    <Plus size={13} /> Добавить ещё
+                  </button>
+                </div>
+                {items && items.length === 0 && (
+                  <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted, #94a3b8)', marginTop: '4px' }}>Нет в наличии</p>
+                )}
+              </div>
+            )
+          }
+
+          const selectedId = selection[type]?.id || ''
+          const visible = visibleFor(type, selectedId)
+
+          return (
+            <div key={type}>
+              <label style={labelStyle}>{PC_TYPE_LABELS[type]}</label>
+              {items && items.length > 8 && (
+                <input
+                  value={search[type] || ''}
+                  onChange={(e) => setSearch((prev) => ({ ...prev, [type]: e.target.value }))}
+                  placeholder="Поиск по названию..."
+                  style={{ ...fieldStyle, marginBottom: '6px' }}
+                />
+              )}
+              <select
+                value={selectedId}
+                onChange={(e) => handleSelect(type, e.target.value)}
+                style={fieldStyle}
+                disabled={!items}
+              >
+                <option value="">{items ? '— не выбрано —' : 'Загрузка...'}</option>
+                {renderOptionGroups(visible)}
+              </select>
+              {items && items.length === 0 && (
+                <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted, #94a3b8)', marginTop: '4px' }}>Нет в наличии</p>
+              )}
+              {items && items.length > 0 && visible.length === 0 && (
+                <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted, #94a3b8)', marginTop: '4px' }}>Ничего не подходит по совместимости или фильтру</p>
+              )}
+              {selection[type]?.source && (
+                <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted, #94a3b8)', marginTop: '4px' }}>
+                  Под заказ у поставщика ({selection[type].source}){' '}
+                  {selection[type].product_url && (
+                    <a href={selection[type].product_url} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
+                      карточка товара
+                    </a>
+                  )}
+                </p>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div style={{ padding: '16px', border: '1px solid var(--color-border, #e2e8f0)', borderRadius: '10px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+          <span style={{ fontSize: '0.85rem', color: 'var(--color-text-muted, #64748b)' }}>
+            Итого{result.estimated_wattage_w ? ` · расчётная мощность ~${result.estimated_wattage_w} Вт` : ''}
+          </span>
+          <span style={{ fontSize: '1.3rem', fontWeight: 600 }}>{totalPrice.toLocaleString('ru-RU')} ₽</span>
+        </div>
+        {(result.issues || []).length > 0 && (
+          <div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {result.issues.map((issue, i) => {
+              const s = ISSUE_STYLE[issue.level] || { color: 'inherit', label: issue.level }
+              return (
+                <div key={i} style={{ fontSize: '0.82rem', color: s.color }}>
+                  <strong>{s.label}:</strong> {issue.message}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PcBuilderCore
diff --git a/production/web/src/pcbuilder/PcBuilderPage.jsx b/production/web/src/pcbuilder/PcBuilderPage.jsx
new file mode 100644
index 0000000..1f8f1aa
--- /dev/null
+++ b/production/web/src/pcbuilder/PcBuilderPage.jsx
@@ -0,0 +1,179 @@
+import { useState } from 'react'
+import { Cpu, CalendarCheck, CheckCircle2 } from 'lucide-react'
+import * as api from '../lib/api'
+import DateTimeField from '../ui/DatePicker'
+import PcBuilderCore from './PcBuilderCore'
+import { PC_ALL_TYPES, PC_MULTI_TYPES, PC_TYPE_LABELS } from './specFields'
+
+const fieldStyle = {
+  width: '100%', padding: '11px 13px', marginTop: '5px',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)', borderRadius: '6px',
+  color: 'var(--color-text)',
+  fontSize: '0.9rem', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
+}
+const labelStyle = { fontSize: '0.8rem', color: 'var(--color-text-muted)', fontWeight: 510 }
+
+function buildSummary(selection) {
+  const lines = []
+  for (const t of PC_ALL_TYPES) {
+    if (PC_MULTI_TYPES.includes(t)) {
+      for (const row of selection[t] || []) {
+        if (row.component) lines.push(`${PC_TYPE_LABELS[t]}: ${row.component.name}${row.qty > 1 ? ` × ${row.qty}` : ''}`)
+      }
+    } else if (selection[t]) {
+      lines.push(`${PC_TYPE_LABELS[t]}: ${selection[t].name}`)
+    }
+  }
+  return lines.length ? `Собранная конфигурация ПК:\n${lines.join('\n')}` : 'Собранная конфигурация ПК (пусто)'
+}
+
+function selectedCountOf(selection) {
+  let n = 0
+  for (const t of PC_ALL_TYPES) {
+    if (PC_MULTI_TYPES.includes(t)) n += (selection[t] || []).filter((r) => r.component).length
+    else if (selection[t]) n += 1
+  }
+  return n
+}
+
+// Public, unauthenticated — same reasoning BookingPage.jsx documents for
+// living in production/web instead of the site repo (DB + public-page
+// pattern already here). Ends in the same booking.Create submission
+// BookingPage uses, so a build request lands in the same public-bookings
+// queue staff already monitor rather than a parallel lead-capture path;
+// the assembled parts list + price go into problem_description since
+// booking has no structured field for it.
+function PcBuilderPage() {
+  const [selection, setSelection] = useState({})
+  const [form, setForm] = useState({ name: '', phone: '', website: '', consent: false })
+  const [preferredAt, setPreferredAt] = useState(null)
+  const [minDate] = useState(() => new Date(Date.now() + 60 * 60 * 1000))
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const [done, setDone] = useState(false)
+
+  const set = (field, value) => setForm((f) => ({ ...f, [field]: value }))
+
+  const listFn = (type) => api.pcComponents.list(type)
+  const checkFn = (selectionIds, multiSelectionIds) => api.pcBuildCheckPublic(selectionIds, multiSelectionIds)
+
+  const selectedCount = selectedCountOf(selection)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.name || !form.phone || !preferredAt) {
+      setError('Заполните имя, телефон и желаемое время')
+      return
+    }
+    if (selectedCount === 0) {
+      setError('Выберите хотя бы один компонент')
+      return
+    }
+    if (preferredAt < minDate) {
+      setError('Выберите время не раньше чем через час')
+      return
+    }
+    if (!form.consent) {
+      setError('Необходимо согласие на обработку персональных данных')
+      return
+    }
+    setSubmitting(true)
+    setError('')
+    try {
+      await api.bookings.create({
+        name: form.name, phone: form.phone, website: form.website,
+        device_type: 'ПК на заказ (конструктор)',
+        problem_description: buildSummary(selection),
+        preferred_at: preferredAt.toISOString(),
+      })
+      setDone(true)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: 'var(--color-bg)',
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      padding: '24px 16px 48px', fontFamily: 'var(--font-body)',
+    }}>
+      <div style={{ marginBottom: '28px', textAlign: 'center' }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '12px', padding: '12px 20px' }}>
+          <Cpu size={20} color="var(--color-accent)" />
+          <span style={{ fontWeight: 510, fontSize: '1.05rem', color: 'var(--color-text)', letterSpacing: '-0.012em' }}>Конструктор ПК</span>
+        </div>
+        <p style={{ marginTop: '8px', fontSize: '0.82rem', color: 'var(--color-fog)' }}>Соберите свою конфигурацию — мы проверим совместимость и посчитаем цену</p>
+      </div>
+
+      <div className="glass-panel" style={{ width: '100%', maxWidth: '760px', overflow: 'hidden', padding: '28px 24px' }}>
+        {done ? (
+          <div style={{ textAlign: 'center', padding: '24px 0' }}>
+            <CheckCircle2 size={40} color="var(--color-success)" style={{ marginBottom: '12px' }} />
+            <h2 style={{ fontSize: '1.05rem', color: 'var(--color-text)', marginBottom: '6px' }}>Заявка отправлена</h2>
+            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.88rem' }}>Мы свяжемся с вами, чтобы обсудить сборку и подтвердить время визита.</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div style={{ marginBottom: '22px' }}>
+              <PcBuilderCore listFn={listFn} checkFn={checkFn} onSelectionChange={setSelection} fieldStyle={fieldStyle} labelStyle={labelStyle} />
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '18px' }}>
+              <CalendarCheck size={18} color="var(--color-accent)" />
+              <p style={{ fontSize: '0.85rem', color: 'var(--color-mist)' }}>Оставьте контакты — мы перезвоним и подтвердим сборку</p>
+            </div>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Ваше имя *</span>
+              <input value={form.name} onChange={(e) => set('name', e.target.value)} style={fieldStyle} required />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Телефон *</span>
+              <input value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="+7 900 000-00-00" style={fieldStyle} required />
+            </label>
+
+            <div style={{ marginBottom: '18px' }}>
+              <span style={{ ...labelStyle, display: 'block', marginBottom: '5px' }}>Желаемые дата и время визита *</span>
+              <DateTimeField value={preferredAt} onChange={setPreferredAt} minDate={minDate} />
+            </div>
+
+            {/* Honeypot — hidden from real visitors, a filled value marks a bot submission (see internal/booking's Create). */}
+            <input
+              type="text" name="website" value={form.website} onChange={(e) => set('website', e.target.value)}
+              tabIndex={-1} autoComplete="off"
+              style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }}
+              aria-hidden="true"
+            />
+
+            <label style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', marginBottom: '18px', cursor: 'pointer' }}>
+              <input
+                type="checkbox" checked={form.consent} onChange={(e) => set('consent', e.target.checked)}
+                style={{ marginTop: '2px', flexShrink: 0 }} required
+              />
+              <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', lineHeight: 1.4 }}>
+                Согласен(-на) на{' '}
+                <a href="/privacy" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-mist)', textDecoration: 'underline' }}>
+                  обработку персональных данных
+                </a>
+                {' '}в соответствии с политикой конфиденциальности
+              </span>
+            </label>
+
+            {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginBottom: '14px' }}>{error}</p>}
+
+            <button type="submit" disabled={submitting || !form.consent} className="btn-primary" style={{ width: '100%', padding: '12px', fontSize: '0.9rem' }}>
+              {submitting ? 'Отправляем...' : 'Отправить заявку'}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PcBuilderPage
diff --git a/production/web/src/pcbuilder/PcConfiguratorPage.jsx b/production/web/src/pcbuilder/PcConfiguratorPage.jsx
new file mode 100644
index 0000000..195fc9b
--- /dev/null
+++ b/production/web/src/pcbuilder/PcConfiguratorPage.jsx
@@ -0,0 +1,291 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Cpu, RefreshCw, Printer, Star, Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useAuth } from '../auth/AuthContext'
+import { useCart } from '../sales/CartContext'
+import PcBuilderCore from './PcBuilderCore'
+import { PC_ALL_TYPES, PC_MULTI_TYPES, PC_TYPE_LABELS } from './specFields'
+
+// Flattens PcBuilderCore's selection shape (single types = one component,
+// ram/storage = [{component, qty}] rows) into a uniform list of {type,
+// component, qty} line items — every consumer below (subtotal, cart,
+// print table, preset save) wants that flat shape rather than branching on
+// PC_MULTI_TYPES itself each time.
+function flattenSelection(selection) {
+  const out = []
+  for (const type of PC_ALL_TYPES) {
+    if (PC_MULTI_TYPES.includes(type)) {
+      for (const row of selection[type] || []) {
+        if (row.component) out.push({ type, component: row.component, qty: row.qty })
+      }
+    } else if (selection[type]) {
+      out.push({ type, component: selection[type], qty: 1 })
+    }
+  }
+  return out
+}
+
+// Staff-facing counterpart to the public /pc-builder page — same
+// PcBuilderCore, same picker data (pcComponents.list already merges our own
+// parts stock with internal/scraper's external_components cache, see that
+// handler's doc comment — nothing staff-only to gain from hitting
+// api.parts.list here instead), same pcbuilder.Handler.Check server-side,
+// just the staff-authenticated Check route. "Добавить в корзину" only hands
+// real parts (source-less picks) to CartContext — an externally-sourced
+// pick isn't a parts.id yet, it has to be ordered from the supplier and
+// received onto the shelf (existing Приход flow) before it can be sold.
+function PcConfiguratorPage() {
+  const [selection, setSelection] = useState({})
+  const [refreshing, setRefreshing] = useState(false)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const [markupPercent, setMarkupPercent] = useState('')
+  const [assemblyCost, setAssemblyCost] = useState('')
+  const [presets, setPresets] = useState([])
+  const [presetSelection, setPresetSelection] = useState(null)
+  const [presetVersion, setPresetVersion] = useState(0)
+  const [savingPreset, setSavingPreset] = useState(false)
+  const { addToCart, updateCartItem, addServiceItem } = useCart()
+  const { staff } = useAuth()
+  const navigate = useNavigate()
+  const canCurate = staff?.permissions?.includes('catalogs')
+
+  const loadPresets = () => api.pcBuildPresets.list().then(setPresets).catch(() => {})
+  useEffect(() => { loadPresets() }, [])
+
+  // Marks <body> only while this page is mounted — the @media print rule in
+  // index.css that hides everything except .pc-config-print-area is scoped
+  // to body.pc-config-printing so it doesn't also blank out printing on
+  // every other page in the app (nothing else here uses a custom print
+  // view; without this scoping, Ctrl+P anywhere else would print nothing).
+  useEffect(() => {
+    document.body.classList.add('pc-config-printing')
+    return () => document.body.classList.remove('pc-config-printing')
+  }, [])
+
+  const listFn = (type) => api.pcComponents.list(type)
+  const checkFn = (selectionIds, multiSelectionIds) => api.pcBuildCheck(selectionIds, multiSelectionIds)
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    try {
+      await api.pcBuilderRefreshExternal()
+      setRefreshKey((k) => k + 1)
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  const items = useMemo(() => flattenSelection(selection), [selection])
+  const selectedCount = items.length
+  const ownPicks = items.filter((it) => !it.component.source)
+  const externalPicks = items.filter((it) => it.component.source)
+
+  // updateCartItem after addToCart rather than a qty param on addToCart
+  // itself — addToCart dedupes by part_id and always starts a new line at
+  // qty 1 (used everywhere else in the app for exactly that one-at-a-time
+  // case), so a multi-quantity row here just corrects the qty right after
+  // instead of changing that shared helper's contract for one caller.
+  // Наценка/Сборка are computed for display below but previously never
+  // reached the actual sale — "Добавить в корзину" only ever handed parts
+  // to CartContext, so the checkout total silently dropped both. Each one
+  // becomes its own service line (see CartContext.addServiceItem) so the
+  // final sale total actually includes what was configured here, and the
+  // receipt shows "Сборка и настройка" as a real priced line, not just a
+  // number that only ever existed on this page.
+  const handleAddToCart = () => {
+    for (const it of ownPicks) {
+      addToCart(it.component)
+      if (it.qty > 1) updateCartItem(it.component.id, 'qty', it.qty)
+    }
+    if (markupAmount > 0) addServiceItem('Наценка', markupAmount)
+    if (Number(assemblyCost) > 0) addServiceItem('Сборка и настройка', Number(assemblyCost))
+    navigate('/sales')
+  }
+
+  // Parts subtotal — summed here (not read off PcBuilderCore's own Check
+  // result) because that Result is compatibility-checker output, not
+  // plumbed up as a prop; re-summing the same sale_price values the picker
+  // already shows in each dropdown option is simpler than adding an
+  // onResultChange prop just for this one number.
+  const subtotal = useMemo(
+    () => items.reduce((sum, it) => sum + (Number(it.component.sale_price) || 0) * it.qty, 0),
+    [items],
+  )
+  const markupAmount = subtotal * (Number(markupPercent) || 0) / 100
+  const grandTotal = subtotal + markupAmount + (Number(assemblyCost) || 0)
+
+  const applyPreset = (preset) => {
+    setPresetSelection(preset.selection)
+    setPresetVersion((v) => v + 1)
+  }
+
+  // A preset only ever captures one id per type (pcbuilder.presetRow's
+  // Selection is a flat {type: id} map) — for ram/storage this saves just
+  // the first row's part, quantity dropped. Quick-select presets are a
+  // starting point staff adjusts, not a guarantee of reproducing an exact
+  // multi-stick build; extending presets to carry quantities is a separate
+  // change to that storage shape, not needed for the picker itself to
+  // support multiple rows.
+  const saveAsPreset = async () => {
+    if (selectedCount === 0) return
+    const name = window.prompt('Название сборки')
+    if (!name || !name.trim()) return
+    const sel = {}
+    for (const it of items) if (!sel[it.type]) sel[it.type] = it.component.id
+    setSavingPreset(true)
+    try {
+      await api.pcBuildPresets.create({ name: name.trim(), selection: sel })
+      await loadPresets()
+    } catch (err) {
+      window.alert(err.message)
+    } finally {
+      setSavingPreset(false)
+    }
+  }
+
+  const handlePrint = () => window.print()
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px', marginBottom: '20px', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <Cpu size={22} color="var(--color-accent)" />
+          <div>
+            <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Конструктор ПК</h1>
+            <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Свой склад + актуальные цены поставщиков</p>
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button type="button" onClick={handlePrint} disabled={selectedCount === 0} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+            <Printer size={14} />
+            Распечатать конфигурацию
+          </button>
+          {staff?.permissions?.includes('catalogs') && (
+            <button type="button" onClick={handleRefresh} disabled={refreshing} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+              <RefreshCw size={14} style={refreshing ? { animation: 'spin 0.7s linear infinite' } : undefined} />
+              {refreshing ? 'Обновляем...' : 'Обновить цены поставщиков'}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {presets.length > 0 && (
+        <div style={{ marginBottom: '18px' }}>
+          <p style={{ ...labelStyle, marginBottom: '8px' }}>Популярные сборки</p>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            {presets.map((p) => (
+              <button
+                key={p.id}
+                type="button"
+                onClick={() => applyPreset(p)}
+                className="btn-outline"
+                style={{ padding: '7px 12px', fontSize: '0.8rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+                title={p.created_by_staff_name ? `Добавил(а): ${p.created_by_staff_name}` : undefined}
+              >
+                <Star size={13} />
+                {p.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <PcBuilderCore
+          listFn={listFn}
+          checkFn={checkFn}
+          onSelectionChange={setSelection}
+          fieldStyle={inputStyle}
+          labelStyle={labelStyle}
+          refreshKey={refreshKey}
+          presetSelection={presetSelection}
+          presetVersion={presetVersion}
+        />
+      </div>
+
+      <div style={{ marginTop: '18px', padding: '16px', border: '1px solid var(--color-border)', borderRadius: '10px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+        <div style={{ flex: '1 1 160px', minWidth: '160px' }}>
+          <label style={labelStyle}>Наценка, %</label>
+          <input type="number" min="0" step="1" value={markupPercent} onChange={(e) => setMarkupPercent(e.target.value)} placeholder="0" style={inputStyle} />
+        </div>
+        <div style={{ flex: '1 1 160px', minWidth: '160px' }}>
+          <label style={labelStyle}>Стоимость сборки, ₽</label>
+          <input type="number" min="0" step="100" value={assemblyCost} onChange={(e) => setAssemblyCost(e.target.value)} placeholder="0" style={inputStyle} />
+        </div>
+        <div style={{ flex: '2 1 220px', minWidth: '220px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: '2px', fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Комплектующие</span><span>{subtotal.toLocaleString('ru-RU')} ₽</span></div>
+          {markupAmount > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Наценка</span><span>+{markupAmount.toLocaleString('ru-RU')} ₽</span></div>}
+          {Number(assemblyCost) > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Сборка</span><span>+{Number(assemblyCost).toLocaleString('ru-RU')} ₽</span></div>}
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1rem', fontWeight: 600, color: 'var(--color-text)', marginTop: '4px' }}>
+            <span>Итого к оплате</span><span>{grandTotal.toLocaleString('ru-RU')} ₽</span>
+          </div>
+        </div>
+      </div>
+
+      {externalPicks.length > 0 && (
+        <p style={{ marginTop: '14px', fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>
+          {externalPicks.length} {externalPicks.length === 1 ? 'позиция' : 'позиции'} под заказ у поставщика — закажите и оприходуйте на склад (вкладка «Склад» → «Приход»), прежде чем добавлять в продажу. В корзину сейчас попадут только товары со своего склада.
+        </p>
+      )}
+
+      <div style={{ display: 'flex', gap: '10px', marginTop: '14px', flexWrap: 'wrap' }}>
+        <button
+          type="button"
+          onClick={handleAddToCart}
+          disabled={ownPicks.length === 0}
+          className="btn-primary"
+          style={{ padding: '12px 20px', opacity: ownPicks.length === 0 ? 0.6 : 1 }}
+        >
+          Добавить в корзину ({ownPicks.length} из {selectedCount}) и перейти к продаже
+        </button>
+        {canCurate && (
+          <button
+            type="button"
+            onClick={saveAsPreset}
+            disabled={selectedCount === 0 || savingPreset}
+            className="btn-outline"
+            style={{ padding: '12px 16px', display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+          >
+            <Save size={15} />
+            Сохранить как популярную
+          </button>
+        )}
+      </div>
+
+      {/* Print-only summary — hidden on screen (see index.css's .pc-config-print-area rule),
+          shown instead of everything else under @media print. window.print() above
+          triggers the browser print dialog directly rather than going through
+          internal/pdfgen — this isn't a legal document like Счёт/Акт, just a
+          take-away parts list + price for the client. */}
+      <div className="pc-config-print-area">
+        <h2 style={{ marginBottom: '4px' }}>Конфигурация ПК</h2>
+        <p style={{ fontSize: '0.85rem', color: '#555', marginBottom: '16px' }}>{new Date().toLocaleDateString('ru-RU')}</p>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <tbody>
+            {items.map((it, i) => (
+              <tr key={`${it.type}-${i}`} style={{ borderBottom: '1px solid #ddd' }}>
+                <td style={{ padding: '6px 4px', color: '#555', width: '40%' }}>{PC_TYPE_LABELS[it.type]}</td>
+                <td style={{ padding: '6px 4px' }}>{it.component.name}{it.qty > 1 ? ` × ${it.qty}` : ''}</td>
+                <td style={{ padding: '6px 4px', textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  {it.component.sale_price ? `${(Number(it.component.sale_price) * it.qty).toLocaleString('ru-RU')} ₽` : '—'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div style={{ marginTop: '14px', fontSize: '0.9rem' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Комплектующие</span><span>{subtotal.toLocaleString('ru-RU')} ₽</span></div>
+          {markupAmount > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Наценка ({markupPercent}%)</span><span>{markupAmount.toLocaleString('ru-RU')} ₽</span></div>}
+          {Number(assemblyCost) > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Сборка</span><span>{Number(assemblyCost).toLocaleString('ru-RU')} ₽</span></div>}
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: '1.1rem', marginTop: '6px', borderTop: '2px solid #333', paddingTop: '6px' }}>
+            <span>Итого</span><span>{grandTotal.toLocaleString('ru-RU')} ₽</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PcConfiguratorPage
diff --git a/production/web/src/pcbuilder/compatFilter.js b/production/web/src/pcbuilder/compatFilter.js
new file mode 100644
index 0000000..a1e7a22
--- /dev/null
+++ b/production/web/src/pcbuilder/compatFilter.js
@@ -0,0 +1,64 @@
+// Mirrors backend/internal/pcbuilder/compat.go's pairwise rules, but as a
+// "should this option even be offered" predicate instead of a post-hoc
+// issue list — runs against specs already loaded in PcBuilderCore's
+// itemsByType, so filtering is instant with no extra round trip per pick.
+// Kept in manual sync with compat.go the same way specFields.js already is
+// with spec.go (no shared module between the Go backend and this Vite
+// frontend).
+//
+// Only filters on rules where the "other side" is actually selected yet —
+// an empty build must never filter every option down to nothing just
+// because no CPU is picked.
+function eqFold(a, b) {
+  return (a || '').trim().toLowerCase() === (b || '').trim().toLowerCase()
+}
+
+function includesFold(list, want) {
+  return (list || []).some((v) => eqFold(v, want))
+}
+
+// selection here is PcBuilderCore's own shape: single types map to one
+// component object, ram/storage map to an array of {component, qty} rows.
+export function isCompatible(type, item, selection) {
+  const spec = item.spec || {}
+  const cpu = selection.cpu
+  const mobo = selection.motherboard
+  const kase = selection.case
+  const cooler = selection.cooler
+  const gpu = selection.gpu
+  const ramRows = selection.ram || []
+
+  switch (type) {
+    case 'cpu':
+      if (mobo?.spec?.socket && spec.socket && !eqFold(spec.socket, mobo.spec.socket)) return false
+      break
+    case 'motherboard':
+      if (cpu?.spec?.socket && spec.socket && !eqFold(spec.socket, cpu.spec.socket)) return false
+      if (kase?.spec?.form_factors_supported?.length && spec.form_factor && !includesFold(kase.spec.form_factors_supported, spec.form_factor)) return false
+      if (spec.ram_type) {
+        const mismatched = ramRows.some((r) => r.component?.spec?.ram_type && !eqFold(r.component.spec.ram_type, spec.ram_type))
+        if (mismatched) return false
+      }
+      break
+    case 'ram':
+      if (mobo?.spec?.ram_type && spec.ram_type && !eqFold(spec.ram_type, mobo.spec.ram_type)) return false
+      break
+    case 'gpu':
+      if (kase?.spec?.max_gpu_length_mm && spec.length_mm && spec.length_mm > kase.spec.max_gpu_length_mm) return false
+      break
+    case 'case':
+      if (mobo?.spec?.form_factor && spec.form_factors_supported?.length && !includesFold(spec.form_factors_supported, mobo.spec.form_factor)) return false
+      if (gpu?.spec?.length_mm && spec.max_gpu_length_mm && gpu.spec.length_mm > spec.max_gpu_length_mm) return false
+      if (cooler?.spec?.height_mm && spec.max_cooler_height_mm && cooler.spec.height_mm > spec.max_cooler_height_mm) return false
+      break
+    case 'cooler':
+      if (cpu?.spec?.socket && spec.sockets_supported?.length && !includesFold(spec.sockets_supported, cpu.spec.socket)) return false
+      if (kase?.spec?.max_cooler_height_mm && spec.height_mm && spec.height_mm > kase.spec.max_cooler_height_mm) return false
+      break
+    // psu/storage: no hard-incompatibility rule (PSU wattage is a "might
+    // not be enough" warning from Check, not a hide-it filter here).
+    default:
+      break
+  }
+  return true
+}
diff --git a/production/web/src/pcbuilder/specFields.js b/production/web/src/pcbuilder/specFields.js
new file mode 100644
index 0000000..4602592
--- /dev/null
+++ b/production/web/src/pcbuilder/specFields.js
@@ -0,0 +1,92 @@
+// Mirrors backend/internal/pcbuilder/spec.go's Spec struct + TypeLabels —
+// kept in sync manually (same JSON shape, no shared module between the Go
+// backend and this Vite frontend).
+
+export const PC_TYPE_LABELS = {
+  cpu: 'Процессор',
+  motherboard: 'Материнская плата',
+  ram: 'Оперативная память',
+  gpu: 'Видеокарта',
+  psu: 'Блок питания',
+  case: 'Корпус',
+  cooler: 'Охлаждение',
+  storage: 'Накопитель',
+}
+
+export const PC_ALL_TYPES = ['cpu', 'motherboard', 'ram', 'gpu', 'psu', 'case', 'cooler', 'storage']
+
+// The two slots a build can fill with more than one part — several
+// identical RAM sticks, or an SSD + an HDD side by side. Everything else
+// stays exactly one part per build (see pcbuilder.AllTypes's own doc
+// comment backend-side).
+export const PC_MULTI_TYPES = ['ram', 'storage']
+
+// Which Spec fields apply to which component type, and how to render/parse
+// each one in a form. `list: true` fields are comma-separated in the UI and
+// stored as string[].
+export const PC_SPEC_FIELDS_BY_TYPE = {
+  cpu: [
+    { key: 'socket', label: 'Сокет', placeholder: 'AM5' },
+    { key: 'tdp_watts', label: 'TDP, Вт', number: true },
+  ],
+  motherboard: [
+    { key: 'socket', label: 'Сокет', placeholder: 'AM5' },
+    { key: 'ram_type', label: 'Тип памяти', placeholder: 'DDR5' },
+    { key: 'max_ram_gb', label: 'Макс. память, ГБ', number: true },
+    { key: 'form_factor', label: 'Форм-фактор', placeholder: 'ATX' },
+  ],
+  ram: [
+    { key: 'ram_type', label: 'Тип памяти', placeholder: 'DDR5' },
+    { key: 'ram_capacity_gb', label: 'Объём, ГБ', number: true },
+  ],
+  gpu: [
+    { key: 'tdp_watts', label: 'TDP, Вт', number: true },
+    { key: 'length_mm', label: 'Длина, мм', number: true },
+  ],
+  psu: [
+    { key: 'wattage_w', label: 'Мощность, Вт', number: true },
+  ],
+  case: [
+    { key: 'form_factors_supported', label: 'Поддерживаемые форм-факторы (через запятую)', list: true, placeholder: 'ATX, mATX, ITX' },
+    { key: 'max_gpu_length_mm', label: 'Макс. длина видеокарты, мм', number: true },
+    { key: 'max_cooler_height_mm', label: 'Макс. высота охлаждения, мм', number: true },
+  ],
+  cooler: [
+    { key: 'sockets_supported', label: 'Поддерживаемые сокеты (через запятую)', list: true, placeholder: 'AM5, LGA1700' },
+    { key: 'height_mm', label: 'Высота, мм', number: true },
+  ],
+  storage: [
+    { key: 'interface', label: 'Интерфейс', placeholder: 'NVMe, SATA...' },
+  ],
+}
+
+export function specToFormValues(spec) {
+  const out = {}
+  for (const type of PC_ALL_TYPES) {
+    for (const field of PC_SPEC_FIELDS_BY_TYPE[type]) {
+      if (out[field.key] !== undefined) continue
+      const raw = spec?.[field.key]
+      out[field.key] = field.list ? (Array.isArray(raw) ? raw.join(', ') : '') : (raw ?? '')
+    }
+  }
+  return out
+}
+
+export function formValuesToSpec(componentType, values) {
+  const fields = PC_SPEC_FIELDS_BY_TYPE[componentType] || []
+  const spec = {}
+  for (const field of fields) {
+    const raw = values[field.key]
+    if (raw === undefined || raw === '') continue
+    if (field.list) {
+      const items = String(raw).split(',').map((s) => s.trim()).filter(Boolean)
+      if (items.length) spec[field.key] = items
+    } else if (field.number) {
+      const n = Number(raw)
+      if (!Number.isNaN(n) && n !== 0) spec[field.key] = n
+    } else {
+      spec[field.key] = raw
+    }
+  }
+  return spec
+}
diff --git a/production/web/src/pcbuilder/vendorMatch.js b/production/web/src/pcbuilder/vendorMatch.js
new file mode 100644
index 0000000..e457a4b
--- /dev/null
+++ b/production/web/src/pcbuilder/vendorMatch.js
@@ -0,0 +1,28 @@
+// Best-effort brand detection from a listing's free-text name — none of
+// our sources (own parts.name, Regard/Technosuccess/ITPartner scraper
+// listings) expose a separate vendor field to the frontend today, so
+// grouping the (sometimes 300+-item) picker list by brand has to work off
+// the name string itself rather than a real column. False negatives just
+// fall into "Другое", never break the picker.
+const KNOWN_VENDORS = [
+  'Intel', 'AMD', 'NVIDIA', 'Nvidia',
+  'ASUS', 'MSI', 'Gigabyte', 'ASRock', 'EVGA', 'Zotac', 'Palit', 'Sapphire', 'PowerColor',
+  'Colorful', 'Gainward', 'Inno3D', 'KFA2', 'PNY', 'XFX',
+  'Corsair', 'Kingston', 'HyperX', 'Patriot', 'ADATA', 'XPG', 'Crucial', 'G.Skill', 'GSkill',
+  'TeamGroup', 'Team Group', 'Silicon Power', 'Netac', 'Apacer', 'GoodRAM', 'Kingmax', 'Digma',
+  'Samsung', 'Western Digital', 'WD', 'Seagate', 'Toshiba', 'Hitachi', 'SanDisk', 'Transcend',
+  'Cooler Master', 'be quiet!', 'Deepcool', 'Thermaltake', 'Zalman', 'Noctua', 'Arctic', 'ID-Cooling',
+  'Aerocool', 'GameMax', 'Xilence', 'Enermax', 'JONSBO',
+  'Chieftec', 'InWin', 'FSP', 'Fractal Design', 'Lian Li', 'SilverStone', 'Formula', 'Foxline', 'HIPER', 'ExeGate',
+  'Supermicro', 'HP', 'Dell', 'Lenovo',
+]
+
+const vendorRe = new RegExp(
+  '\\b(' + KNOWN_VENDORS.map((v) => v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|') + ')\\b',
+  'i',
+)
+
+export function detectVendor(name) {
+  const m = vendorRe.exec(name || '')
+  return m ? m[1] : 'Другое'
+}
diff --git a/production/web/src/portal/BookingPage.jsx b/production/web/src/portal/BookingPage.jsx
new file mode 100644
index 0000000..6cf03f5
--- /dev/null
+++ b/production/web/src/portal/BookingPage.jsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { Wrench, CalendarCheck, CheckCircle2 } from 'lucide-react'
+import * as api from '../lib/api'
+import DateTimeField from '../ui/DatePicker'
+
+const fieldStyle = {
+  width: '100%', padding: '11px 13px', marginTop: '5px',
+  background: 'var(--color-surface)',
+  border: '1px solid var(--color-border)', borderRadius: '6px',
+  color: 'var(--color-text)',
+  fontSize: '0.9rem', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
+}
+const labelStyle = { fontSize: '0.8rem', color: 'var(--color-text-muted)', fontWeight: 510 }
+
+// Public, unauthenticated — same "site" visual family as OrderTrackingPage.
+// Posts straight to api.bookings.create; production/web hosts this instead
+// of the marketing site (`site` repo) because it already has the DB this
+// needs and the public-page pattern to build on (see internal/booking's
+// package doc for the rest of the reasoning).
+function BookingPage() {
+  const [form, setForm] = useState({ name: '', phone: '', device_type: '', problem_description: '', website: '', consent: false })
+  const [preferredAt, setPreferredAt] = useState(null)
+  // An hour out, same grace this form always gave — DateTimeField's minDate
+  // is day-granularity (it disables past *days*, not past *times* within
+  // today), so same-day-too-soon is still caught by the timestamp check in
+  // handleSubmit below, not by the calendar itself.
+  const [minDate] = useState(() => new Date(Date.now() + 60 * 60 * 1000))
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const [done, setDone] = useState(false)
+
+  const set = (field, value) => setForm((f) => ({ ...f, [field]: value }))
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.name || !form.phone || !form.device_type || !preferredAt) {
+      setError('Заполните имя, телефон, тип техники и желаемое время')
+      return
+    }
+    if (preferredAt < minDate) {
+      setError('Выберите время не раньше чем через час')
+      return
+    }
+    if (!form.consent) {
+      setError('Необходимо согласие на обработку персональных данных')
+      return
+    }
+    setSubmitting(true)
+    setError('')
+    try {
+      await api.bookings.create({ ...form, preferred_at: preferredAt.toISOString() })
+      setDone(true)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: 'var(--color-bg)',
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      padding: '24px 16px 48px', fontFamily: 'var(--font-body)',
+    }}>
+      <div style={{ marginBottom: '28px', textAlign: 'center' }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '12px', padding: '12px 20px' }}>
+          <Wrench size={20} color="var(--color-accent)" />
+          <span style={{ fontWeight: 510, fontSize: '1.05rem', color: 'var(--color-text)', letterSpacing: '-0.012em' }}>Aura CRM</span>
+        </div>
+        <p style={{ marginTop: '8px', fontSize: '0.82rem', color: 'var(--color-fog)' }}>Запись на приём</p>
+      </div>
+
+      <div className="glass-panel" style={{ width: '100%', maxWidth: '480px', overflow: 'hidden', padding: '28px 24px' }}>
+        {done ? (
+          <div style={{ textAlign: 'center', padding: '24px 0' }}>
+            <CheckCircle2 size={40} color="var(--color-success)" style={{ marginBottom: '12px' }} />
+            <h2 style={{ fontSize: '1.05rem', color: 'var(--color-text)', marginBottom: '6px' }}>Заявка отправлена</h2>
+            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.88rem' }}>Мы свяжемся с вами, чтобы подтвердить время визита.</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '18px' }}>
+              <CalendarCheck size={18} color="var(--color-accent)" />
+              <p style={{ fontSize: '0.85rem', color: 'var(--color-mist)' }}>Оставьте заявку — мы перезвоним и подтвердим время</p>
+            </div>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Ваше имя *</span>
+              <input value={form.name} onChange={(e) => set('name', e.target.value)} style={fieldStyle} required />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Телефон *</span>
+              <input value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="+7 900 000-00-00" style={fieldStyle} required />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Тип техники *</span>
+              <input value={form.device_type} onChange={(e) => set('device_type', e.target.value)} placeholder="Ноутбук, телефон, принтер..." style={fieldStyle} required />
+            </label>
+
+            <label style={{ display: 'block', marginBottom: '14px' }}>
+              <span style={labelStyle}>Что случилось</span>
+              <textarea value={form.problem_description} onChange={(e) => set('problem_description', e.target.value)} rows={3} style={{ ...fieldStyle, resize: 'vertical' }} />
+            </label>
+
+            <div style={{ marginBottom: '18px' }}>
+              <span style={{ ...labelStyle, display: 'block', marginBottom: '5px' }}>Желаемые дата и время *</span>
+              <DateTimeField value={preferredAt} onChange={setPreferredAt} minDate={minDate} />
+            </div>
+
+            {/* Honeypot — hidden from real visitors, a filled value marks a bot submission (see internal/booking's Create). */}
+            <input
+              type="text" name="website" value={form.website} onChange={(e) => set('website', e.target.value)}
+              tabIndex={-1} autoComplete="off"
+              style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }}
+              aria-hidden="true"
+            />
+
+            <label style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', marginBottom: '18px', cursor: 'pointer' }}>
+              <input
+                type="checkbox" checked={form.consent} onChange={(e) => set('consent', e.target.checked)}
+                style={{ marginTop: '2px', flexShrink: 0 }} required
+              />
+              <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', lineHeight: 1.4 }}>
+                Согласен(-на) на{' '}
+                <a href="/privacy" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-mist)', textDecoration: 'underline' }}>
+                  обработку персональных данных
+                </a>
+                {' '}в соответствии с политикой конфиденциальности
+              </span>
+            </label>
+
+            {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginBottom: '14px' }}>{error}</p>}
+
+            <button type="submit" disabled={submitting || !form.consent} className="btn-primary" style={{ width: '100%', padding: '12px', fontSize: '0.9rem' }}>
+              {submitting ? 'Отправляем...' : 'Записаться'}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default BookingPage
diff --git a/production/web/src/portal/OrderTrackingPage.jsx b/production/web/src/portal/OrderTrackingPage.jsx
new file mode 100644
index 0000000..6017c35
--- /dev/null
+++ b/production/web/src/portal/OrderTrackingPage.jsx
@@ -0,0 +1,119 @@
+import { useParams } from 'react-router-dom'
+import { Wrench, Camera, MessageSquare, RefreshCw, Search } from 'lucide-react'
+import { useOrderTracking } from './useOrderTracking'
+import WarrantyBadge from '../orders/WarrantyBadge'
+
+// This page is public/unauthenticated (no staff session), so it can't call
+// the staff-only /api/order-statuses list — Track's backend response
+// resolves status_label/status_color (and each event's body_label) server-
+// side instead, see internal/order/handler.go's Track. The badge's color is
+// a dynamic per-status hex from the server, not a design token — left as-is
+// (with a neutral Fog fallback) even under the Linear reskin, since it's a
+// functional status differentiator, not decoration.
+function StatusBadge({ label, color }) {
+  const c = color || '#8a8f98'
+  return (
+    <span style={{
+      display: 'inline-block', padding: '4px 14px', borderRadius: '999px',
+      background: c + '1a', color: c, fontWeight: 510, fontSize: '0.88rem',
+      border: `1px solid ${c}33`,
+    }}>
+      {label}
+    </span>
+  )
+}
+
+function InfoRow({ label, value }) {
+  if (!value) return null
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid var(--color-border)' }}>
+      <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', fontWeight: 510, textTransform: 'uppercase', letterSpacing: '0.4px' }}>{label}</span>
+      <span style={{ fontSize: '0.92rem', color: 'var(--color-text)', textAlign: 'right' }}>{value}</span>
+    </div>
+  )
+}
+
+function EventRow({ event }) {
+  const icon = event.type === 'comment' ? <MessageSquare size={14} /> : event.type === 'photo' ? <Camera size={14} /> : <RefreshCw size={14} />
+  const text = event.type === 'status_change'
+    ? `Статус: ${event.body_label || event.body}`
+    : event.type === 'photo'
+      ? 'Мастер добавил фото'
+      : event.body
+
+  return (
+    <div style={{ display: 'flex', gap: '10px', padding: '9px 0', borderBottom: '1px solid var(--color-border)' }}>
+      <div style={{ color: 'var(--color-fog)', paddingTop: '2px' }}>{icon}</div>
+      <div>
+        <p style={{ fontSize: '0.85rem', color: 'var(--color-text)' }}>{text}</p>
+        <p style={{ fontSize: '0.72rem', color: 'var(--color-fog)' }}>{new Date(event.created_at).toLocaleString('ru-RU')}</p>
+      </div>
+    </div>
+  )
+}
+
+function OrderTrackingPage() {
+  const { token } = useParams()
+  const { order, loading, error } = useOrderTracking(token)
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: 'var(--color-bg)',
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      padding: '24px 16px 48px', fontFamily: 'var(--font-body)',
+    }}>
+      <div style={{ marginBottom: '28px', textAlign: 'center' }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '12px', padding: '12px 20px' }}>
+          <Wrench size={20} color="var(--color-accent)" />
+          <span style={{ fontWeight: 510, fontSize: '1.05rem', color: 'var(--color-text)', letterSpacing: '-0.012em' }}>Aura CRM</span>
+        </div>
+        <p style={{ marginTop: '8px', fontSize: '0.82rem', color: 'var(--color-fog)' }}>Отслеживание заявки</p>
+      </div>
+
+      <div className="glass-panel" style={{ width: '100%', maxWidth: '480px', overflow: 'hidden' }}>
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '48px 0' }}>
+            <p style={{ color: 'var(--color-text-muted)' }}>Загрузка...</p>
+          </div>
+        ) : error || !order ? (
+          <div style={{ textAlign: 'center', padding: '48px 24px' }}>
+            <Search size={36} color="var(--color-smoke)" style={{ marginBottom: '12px' }} />
+            <h2 style={{ fontSize: '1.05rem', color: 'var(--color-text)', marginBottom: '6px' }}>Заявка не найдена</h2>
+            <p style={{ color: 'var(--color-text-muted)', fontSize: '0.88rem' }}>Проверьте ссылку или обратитесь к мастеру.</p>
+          </div>
+        ) : (
+          <div>
+            <div style={{ background: 'var(--color-surface-sunken)', padding: '20px 24px', borderBottom: '1px solid var(--color-border)' }}>
+              <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', fontWeight: 510, textTransform: 'uppercase', marginBottom: '6px' }}>Статус заявки</p>
+              <StatusBadge label={order.status_label || order.status} color={order.status_color} />
+            </div>
+
+            <div style={{ padding: '20px 24px' }}>
+              <InfoRow label="Номер заказа" value={order.order_number} />
+              <InfoRow label="Клиент" value={order.client_name} />
+              <InfoRow label="Устройство" value={[order.device_type, order.device_brand, order.device_model].filter(Boolean).join(' ')} />
+              {/* Warranty only makes sense once the device is actually
+                  back with the client — gate on "completed" rather than
+                  showing a date for a repair still in progress. */}
+              <InfoRow label="Гарантия" value={order.status === 'completed' && order.warranty_until ? <WarrantyBadge warrantyUntil={order.warranty_until} /> : null} />
+              <InfoRow label="Принято" value={new Date(order.created_at).toLocaleDateString('ru-RU')} />
+            </div>
+
+            {order.events?.length > 0 && (
+              <div style={{ padding: '0 24px 20px' }}>
+                <h3 style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginBottom: '6px' }}>История</h3>
+                {order.events.map((ev) => <EventRow key={ev.id} event={ev} />)}
+              </div>
+            )}
+
+            <div style={{ borderTop: '1px solid var(--color-border)', padding: '14px 24px', background: 'var(--color-surface-sunken)', textAlign: 'center' }}>
+              <p style={{ fontSize: '0.78rem', color: 'var(--color-fog)' }}>Есть вопросы? Свяжитесь с мастером.</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OrderTrackingPage
diff --git a/production/web/src/portal/PrivacyPolicyPage.jsx b/production/web/src/portal/PrivacyPolicyPage.jsx
new file mode 100644
index 0000000..1789a8d
--- /dev/null
+++ b/production/web/src/portal/PrivacyPolicyPage.jsx
@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+import { Wrench, ShieldCheck } from 'lucide-react'
+import * as api from '../lib/api'
+
+const sectionStyle = { marginBottom: '20px' }
+const hStyle = { fontSize: '0.95rem', fontWeight: 590, marginBottom: '8px', color: 'var(--color-text)' }
+const pStyle = { fontSize: '0.86rem', lineHeight: 1.7, color: 'var(--color-text-muted)' }
+
+// Public, unauthenticated — linked from BookingPage's consent checkbox and
+// site's own lead form. Business identity (name/INN/address/phone) is
+// pulled live from settings.PublicInfo rather than hardcoded, so this page
+// stays accurate as soon as an owner fills in real requisites in
+// Настройки, without a code change. This is a standard-form policy
+// covering what a repair-shop CRM actually collects and why — not a
+// substitute for legal review before relying on it for real compliance.
+function PrivacyPolicyPage() {
+  const [biz, setBiz] = useState(null)
+
+  useEffect(() => { api.public.businessInfo().then(setBiz).catch(() => setBiz(null)) }, [])
+
+  const operatorName = biz?.business_name || 'Оператор'
+  const operatorLine = [
+    biz?.business_inn && `ИНН ${biz.business_inn}`,
+    biz?.business_address,
+    biz?.business_phone,
+  ].filter(Boolean).join(' · ')
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: 'var(--color-bg)', color: 'var(--color-text)',
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      padding: '32px 16px 64px', fontFamily: 'var(--font-body)',
+    }}>
+      <div style={{ width: '100%', maxWidth: '640px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '28px' }}>
+          <span style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+            width: '38px', height: '38px', borderRadius: '11px',
+            background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+          }}>
+            <Wrench size={19} />
+          </span>
+          <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 510, fontSize: '1.15rem', letterSpacing: '-0.012em' }}>
+            {operatorName}
+          </span>
+        </div>
+
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.6rem', fontWeight: 510, marginBottom: '6px' }}>
+          Политика обработки персональных данных
+        </h1>
+        {operatorLine && <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '28px' }}>{operatorLine}</p>}
+
+        <div className="glass-panel" style={{ padding: '28px', marginTop: '20px' }}>
+          <section style={sectionStyle}>
+            <h2 style={hStyle}>1. Оператор персональных данных</h2>
+            <p style={pStyle}>
+              Оператором обработки персональных данных является {operatorName}{operatorLine ? ` (${operatorLine})` : ''}.
+              Настоящая политика определяет порядок обработки персональных данных клиентов и посетителей сайта
+              в соответствии с Федеральным законом от 27.07.2006 № 152-ФЗ «О персональных данных».
+            </p>
+          </section>
+
+          <section style={sectionStyle}>
+            <h2 style={hStyle}>2. Какие данные собираются</h2>
+            <p style={pStyle}>
+              Имя, номер телефона, при необходимости — адрес доставки; данные о принятом на обслуживание
+              устройстве (тип, марка, модель, серийный номер/IMEI, описание неисправности). Эти данные
+              указывает сам клиент при оформлении заявки на сайте, по телефону или лично в сервисном центре.
+            </p>
+          </section>
+
+          <section style={sectionStyle}>
+            <h2 style={hStyle}>3. Цели обработки</h2>
+            <p style={pStyle}>
+              Приём и выполнение заявок на ремонт/обслуживание, связь с клиентом по ходу заявки (звонки,
+              SMS, сообщения в Telegram), оформление сопроводительных документов (квитанция, акт, счёт),
+              учёт истории обращений и гарантийных обязательств. Данные не передаются третьим лицам,
+              кроме случаев, прямо предусмотренных законом.
+            </p>
+          </section>
+
+          <section style={sectionStyle}>
+            <h2 style={hStyle}>4. Срок хранения</h2>
+            <p style={pStyle}>
+              Персональные данные хранятся в течение срока, необходимого для исполнения заявки и
+              гарантийных обязательств по ней, а также в течение сроков, установленных законодательством
+              для хранения бухгалтерских и иных обязательных документов.
+            </p>
+          </section>
+
+          <section style={{ marginBottom: 0 }}>
+            <h2 style={hStyle}>5. Права субъекта персональных данных</h2>
+            <p style={pStyle}>
+              Клиент вправе получить информацию о своих обрабатываемых данных, потребовать их уточнения,
+              блокирования или уничтожения при неточности, а также отозвать согласие на обработку —
+              для этого достаточно обратиться по указанным выше контактам оператора.
+            </p>
+          </section>
+        </div>
+
+        <p style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.74rem', color: 'var(--text-muted)', marginTop: '18px' }}>
+          <ShieldCheck size={13} /> Типовая форма политики — рекомендуем проверить у юриста перед использованием как единственного документа соответствия 152-ФЗ.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default PrivacyPolicyPage
diff --git a/production/web/src/portal/useOrderTracking.js b/production/web/src/portal/useOrderTracking.js
new file mode 100644
index 0000000..8b31fd5
--- /dev/null
+++ b/production/web/src/portal/useOrderTracking.js
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+import { track } from '../lib/api'
+
+export function useOrderTracking(token) {
+  const [order, setOrder] = useState(null)
+  const [loading, setLoading] = useState(Boolean(token))
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (!token) return
+    let active = true
+    track(token)
+      .then((data) => { if (active) setOrder(data) })
+      .catch((err) => { if (active) setError(err.message) })
+      .finally(() => { if (active) setLoading(false) })
+    return () => { active = false }
+  }, [token])
+
+  return { order, loading, error }
+}
diff --git a/production/web/src/purchaseorders/PurchaseOrderModal.jsx b/production/web/src/purchaseorders/PurchaseOrderModal.jsx
new file mode 100644
index 0000000..b9a33a7
--- /dev/null
+++ b/production/web/src/purchaseorders/PurchaseOrderModal.jsx
@@ -0,0 +1,434 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, Plus, Trash2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useSuppliers } from '../suppliers/useSuppliers'
+import { useRegisters } from '../cash/useRegisters'
+import { METHOD_LABELS } from '../cash/paymentMethods'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', color: 'var(--text-main)', borderRadius: '16px', width: '100%', maxWidth: '720px',
+  boxShadow: 'var(--shadow-elevated)',
+}
+
+const STATUS_LABELS = {
+  draft: 'Черновик', ordered: 'Заказано', partially_received: 'Частично получено',
+  received: 'Получено', cancelled: 'Отменено',
+}
+const STATUS_COLORS = {
+  draft: 'var(--text-muted)', ordered: 'var(--accent-blue)', partially_received: 'var(--accent-orange)',
+  received: 'var(--accent-green)', cancelled: 'var(--accent-red)',
+}
+
+// Search-and-add row for building a PO's line items — same search idiom as
+// inventory/PartsUsedSection's AddPartForm, but appends to a local array
+// (qty_ordered/unit_price) instead of firing an API call per pick, since a
+// PO is created/edited as one full item list, not incrementally.
+function ItemPicker({ onAdd }) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+  const [selected, setSelected] = useState(null)
+  const [qty, setQty] = useState(1)
+  const [price, setPrice] = useState('')
+  const [dismissed, setDismissed] = useState(false)
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    if (!query || selected) return
+    const id = setTimeout(() => {
+      api.parts.list({ q: query }).then(setResults).catch(() => {})
+    }, 250)
+    return () => clearTimeout(id)
+  }, [query, selected])
+
+  useEffect(() => {
+    const handlePointerDown = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setDismissed(true)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  const visibleResults = !query || selected || dismissed ? [] : results
+
+  const handlePick = (part) => {
+    setSelected(part)
+    setQuery(part.name)
+    setResults([])
+  }
+
+  const handleAdd = () => {
+    if (!selected || !qty || !price) return
+    onAdd({ part_id: selected.id, sku: selected.sku, name: selected.name, qty_ordered: Number(qty), unit_price: price })
+    setSelected(null)
+    setQuery('')
+    setQty(1)
+    setPrice('')
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+      <div ref={wrapperRef} style={{ position: 'relative', flex: 1, minWidth: '200px' }}>
+        <label style={labelStyle}>Запчасть</label>
+        <input
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setSelected(null); setDismissed(false) }}
+          onKeyDown={(e) => { if (e.key === 'Escape') setDismissed(true) }}
+          placeholder="Найти по названию/артикулу..."
+          style={inputStyle}
+        />
+        {visibleResults.length > 0 && (
+          <div style={{
+            position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--color-surface)',
+            border: '1px solid var(--border-light)', borderRadius: '8px', marginTop: '4px', zIndex: 10,
+            maxHeight: '200px', overflowY: 'auto', boxShadow: 'var(--shadow-elevated)',
+          }}>
+            {visibleResults.map((p) => (
+              <button
+                key={p.id} type="button" onClick={() => handlePick(p)}
+                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', background: 'none', fontSize: '0.85rem', fontFamily: 'var(--font-body)' }}
+              >
+                {p.name} <span style={{ color: 'var(--text-muted)' }}>· {p.sku}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <div style={{ width: '90px' }}>
+        <label style={labelStyle}>Кол-во</label>
+        <input type="number" min="1" value={qty} onChange={(e) => setQty(e.target.value)} style={inputStyle} />
+      </div>
+      <div style={{ width: '110px' }}>
+        <label style={labelStyle}>Цена, ₽</label>
+        <input value={price} onChange={(e) => setPrice(e.target.value)} placeholder="0.00" style={inputStyle} />
+      </div>
+      <button type="button" onClick={handleAdd} disabled={!selected} className="btn-outline" style={{ padding: '10px 14px', fontSize: '0.82rem' }}>
+        <Plus size={14} />
+      </button>
+    </div>
+  )
+}
+
+// Create (mode="create") or full-replace edit (mode="edit", draft only,
+// see internal/purchaseorder.Update's doc comment on why a full replace).
+function PurchaseOrderForm({ existing, onClose, onSaved }) {
+  const isEdit = !!existing
+  const [supplierId, setSupplierId] = useState(existing?.purchase_order.supplier_id || '')
+  const [note, setNote] = useState(existing?.purchase_order.note || '')
+  const [items, setItems] = useState(
+    existing?.items.map((it) => ({ part_id: it.part_id, sku: it.sku, name: it.part_name, qty_ordered: it.qty_ordered, unit_price: it.unit_price })) || []
+  )
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { suppliers } = useSuppliers('')
+
+  const removeItem = (idx) => setItems((prev) => prev.filter((_, i) => i !== idx))
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!supplierId) { setError('Выберите поставщика'); return }
+    if (items.length === 0) { setError('Добавьте хотя бы одну позицию'); return }
+    setSaving(true)
+    setError('')
+    const body = { supplier_id: supplierId, note, items: items.map(({ part_id, qty_ordered, unit_price }) => ({ part_id, qty_ordered, unit_price })) }
+    try {
+      if (isEdit) await api.purchaseOrders.update(existing.purchase_order.id, body)
+      else await api.purchaseOrders.create(body)
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>{isEdit ? 'Редактировать заказ' : 'Новый заказ поставщику'}</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Поставщик *</label>
+        <select value={supplierId} onChange={(e) => setSupplierId(e.target.value)} style={inputStyle} required>
+          <option value="">— выберите —</option>
+          {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Заметка</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+      </div>
+
+      <div>
+        <label style={labelStyle}>Позиции</label>
+        <ItemPicker onAdd={(item) => setItems((prev) => [...prev, item])} />
+      </div>
+
+      {items.length > 0 && (
+        <div>
+          {items.map((it, idx) => (
+            <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.85rem', padding: '8px 0', borderBottom: '1px solid var(--border-light)' }}>
+              <span>{it.name} <span style={{ color: 'var(--text-muted)' }}>({it.sku})</span></span>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <span>{it.qty_ordered} × {it.unit_price} ₽</span>
+                <button type="button" onClick={() => removeItem(idx)} style={{ background: 'none', color: 'var(--accent-red)', padding: '2px' }}>
+                  <Trash2 size={14} />
+                </button>
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px' }}>
+        {saving ? 'Сохраняем...' : isEdit ? 'Сохранить' : 'Создать заказ'}
+      </button>
+    </form>
+  )
+}
+
+// GRN — one call receives however many of the still-open lines the
+// delivery actually contains. Defaults each line's qty to what's still
+// outstanding and its price to the PO's own agreed unit_price, but both
+// stay editable (deliveries don't always match the order exactly).
+function ReceiveForm({ po, onDone }) {
+  const openItems = po.items.filter((it) => it.qty_received < it.qty_ordered)
+  const [lines, setLines] = useState(() =>
+    Object.fromEntries(openItems.map((it) => [it.id, {
+      qty: it.qty_ordered - it.qty_received, purchase_price: it.unit_price, serials: '', checked: true,
+    }]))
+  )
+  const [note, setNote] = useState('')
+  const [registerId, setRegisterId] = useState('')
+  const [method, setMethod] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { registers } = useRegisters()
+  const activeRegisters = registers.filter((r) => !r.is_archived)
+  const register = activeRegisters.find((r) => r.id === registerId)
+  const allowedMethods = register?.types || []
+  const effectiveMethod = allowedMethods.includes(method) ? method : (allowedMethods[0] || '')
+
+  const setLine = (itemId, field, value) => setLines((prev) => ({ ...prev, [itemId]: { ...prev[itemId], [field]: value } }))
+
+  // Mirrors backend Receive's own totalCost accumulation (qty × purchase_price
+  // per checked line) — shown so staff can see what a chosen register is
+  // about to be debited before submitting, not just after.
+  const total = openItems
+    .filter((it) => lines[it.id]?.checked)
+    .reduce((sum, it) => sum + (Number(lines[it.id]?.qty) || 0) * (Number(lines[it.id]?.purchase_price) || 0), 0)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    const submitLines = openItems
+      .filter((it) => lines[it.id]?.checked)
+      .map((it) => {
+        const l = lines[it.id]
+        const serialNumbers = it.is_serialized
+          ? l.serials.split('\n').map((s) => s.trim()).filter(Boolean)
+          : undefined
+        return { purchase_order_item_id: it.id, qty: Number(l.qty), purchase_price: l.purchase_price, serial_numbers: serialNumbers }
+      })
+    if (submitLines.length === 0) { setError('Отметьте хотя бы одну позицию'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.purchaseOrders.receive(po.purchase_order.id, { lines: submitLines, note, register_id: registerId, method: registerId ? effectiveMethod : '' })
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (openItems.length === 0) return <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Все позиции уже получены</p>
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      {openItems.map((it) => (
+        <div key={it.id} style={{ border: '1px solid var(--border-light)', borderRadius: '8px', padding: '10px' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem', fontWeight: 510, marginBottom: '8px' }}>
+            <input type="checkbox" checked={lines[it.id]?.checked} onChange={(e) => setLine(it.id, 'checked', e.target.checked)} />
+            {it.part_name} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>(заказано {it.qty_ordered}, получено {it.qty_received})</span>
+          </label>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <div style={{ width: '90px' }}>
+              <label style={labelStyle}>Кол-во сейчас</label>
+              <input type="number" min="1" value={lines[it.id]?.qty} onChange={(e) => setLine(it.id, 'qty', e.target.value)} style={inputStyle} />
+            </div>
+            <div style={{ width: '110px' }}>
+              <label style={labelStyle}>Цена, ₽</label>
+              <input value={lines[it.id]?.purchase_price} onChange={(e) => setLine(it.id, 'purchase_price', e.target.value)} style={inputStyle} />
+            </div>
+            {it.is_serialized && (
+              <div style={{ flex: 1, minWidth: '160px' }}>
+                <label style={labelStyle}>Серийные номера (по одному на строку)</label>
+                <textarea value={lines[it.id]?.serials} onChange={(e) => setLine(it.id, 'serials', e.target.value)} rows={2} style={{ ...inputStyle, resize: 'vertical' }} />
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: '160px' }}>
+          <label style={labelStyle}>Касса для оплаты</label>
+          <select value={registerId} onChange={(e) => { setRegisterId(e.target.value); setMethod('') }} style={inputStyle}>
+            <option value="">— не списывать сейчас —</option>
+            {activeRegisters.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </div>
+        {registerId && allowedMethods.length > 1 && (
+          <div style={{ flex: 1, minWidth: '140px' }}>
+            <label style={labelStyle}>Из какого баланса</label>
+            <select value={effectiveMethod} onChange={(e) => setMethod(e.target.value)} style={inputStyle}>
+              {allowedMethods.map((m) => <option key={m} value={m}>{METHOD_LABELS[m]}</option>)}
+            </select>
+          </div>
+        )}
+        {registerId && (
+          <div style={{ width: '140px' }}>
+            <label style={labelStyle}>К оплате, ₽</label>
+            <p style={{ fontSize: '1rem', fontWeight: 590, padding: '10px 0' }}>{total.toLocaleString('ru-RU')}</p>
+          </div>
+        )}
+      </div>
+      <div>
+        <label style={labelStyle}>Заметка к поставке</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px', fontSize: '0.85rem' }}>
+        {saving ? 'Принимаем...' : 'Принять поставку'}
+      </button>
+    </form>
+  )
+}
+
+function DetailView({ poId, onClose, onChanged }) {
+  const [data, setData] = useState(null)
+  const [editing, setEditing] = useState(false)
+  const [receiving, setReceiving] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = async () => setData(await api.purchaseOrders.get(poId))
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [poId])
+
+  const handleChanged = async () => {
+    await load()
+    setEditing(false)
+    setReceiving(false)
+    onChanged()
+  }
+
+  const handleStatus = async (status) => {
+    setError('')
+    try {
+      await api.purchaseOrders.updateStatus(poId, status)
+      await handleChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  if (!data) return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+  if (editing) return <PurchaseOrderForm existing={data} onClose={() => setEditing(false)} onSaved={handleChanged} />
+
+  const { purchase_order: po, items, receipts } = data
+
+  return (
+    <div>
+      <div style={{ padding: '24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>{po.supplier_name}</h2>
+            <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px' }}>
+              {new Date(po.created_at).toLocaleDateString('ru-RU')} · {po.created_by_staff_name} · на сумму {Number(po.total_value).toLocaleString('ru-RU')} ₽
+            </p>
+            {po.note && <p style={{ fontSize: '0.85rem', marginTop: '6px' }}>{po.note}</p>}
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <span style={{
+          display: 'inline-block', marginTop: '10px', fontSize: '0.78rem', fontWeight: 590,
+          color: STATUS_COLORS[po.status], background: 'rgba(100,116,139,0.08)', padding: '3px 10px', borderRadius: '50px',
+        }}>
+          {STATUS_LABELS[po.status] || po.status}
+        </span>
+      </div>
+
+      <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-light)', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        {po.status === 'draft' && (
+          <>
+            <button type="button" onClick={() => setEditing(true)} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Редактировать</button>
+            <button type="button" onClick={() => handleStatus('ordered')} className="btn-primary" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Отправить поставщику</button>
+            <button type="button" onClick={() => handleStatus('cancelled')} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Отменить</button>
+          </>
+        )}
+        {(po.status === 'ordered' || po.status === 'partially_received') && (
+          <>
+            <button type="button" onClick={() => setReceiving((v) => !v)} className="btn-primary" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>
+              {receiving ? 'Скрыть форму приёмки' : 'Принять поставку'}
+            </button>
+            <button type="button" onClick={() => handleStatus('cancelled')} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Отменить</button>
+          </>
+        )}
+      </div>
+      {error && <p style={{ padding: '0 24px', color: 'var(--accent-red)', fontSize: '0.82rem', marginTop: '10px' }}>{error}</p>}
+
+      {receiving && (
+        <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-light)' }}>
+          <ReceiveForm po={data} onDone={handleChanged} />
+        </div>
+      )}
+
+      <div style={{ padding: '20px 24px' }}>
+        <h3 style={{ fontSize: '0.9rem', marginBottom: '8px' }}>Позиции</h3>
+        {items.map((it) => (
+          <div key={it.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', padding: '8px 0', borderBottom: '1px solid var(--border-light)' }}>
+            <span>{it.part_name} <span style={{ color: 'var(--text-muted)' }}>({it.sku})</span></span>
+            <span style={{ fontWeight: 510 }}>{it.qty_received} / {it.qty_ordered} · {it.unit_price} ₽</span>
+          </div>
+        ))}
+
+        {receipts.length > 0 && (
+          <>
+            <h3 style={{ fontSize: '0.9rem', margin: '18px 0 8px' }}>Поставки (GRN)</h3>
+            {receipts.map((r) => (
+              <div key={r.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.82rem', padding: '6px 0', borderBottom: '1px solid var(--border-light)' }}>
+                <span>{r.part_name} · {r.staff_name} · {new Date(r.received_at).toLocaleString('ru-RU')}</span>
+                <span style={{ fontWeight: 510 }}>+{r.qty_received} по {r.purchase_price} ₽</span>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const PurchaseOrderModal = ({ mode, poId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <PurchaseOrderForm onClose={onClose} onSaved={onSaved} />
+          : <DetailView poId={poId} onClose={onClose} onChanged={onSaved} />}
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseOrderModal
diff --git a/production/web/src/purchaseorders/PurchaseOrdersPage.jsx b/production/web/src/purchaseorders/PurchaseOrdersPage.jsx
new file mode 100644
index 0000000..d79cd87
--- /dev/null
+++ b/production/web/src/purchaseorders/PurchaseOrdersPage.jsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+import { usePurchaseOrders } from './usePurchaseOrders'
+import PurchaseOrderModal from './PurchaseOrderModal'
+
+const STATUS_LABELS = {
+  draft: 'Черновик', ordered: 'Заказано', partially_received: 'Частично получено',
+  received: 'Получено', cancelled: 'Отменено',
+}
+const STATUS_COLORS = {
+  draft: 'var(--text-muted)', ordered: 'var(--accent-blue)', partially_received: 'var(--accent-orange)',
+  received: 'var(--accent-green)', cancelled: 'var(--accent-red)',
+}
+const TABS = [
+  { value: '', label: 'Все' },
+  { value: 'draft', label: 'Черновики' },
+  { value: 'ordered', label: 'Заказано' },
+  { value: 'partially_received', label: 'Частично получено' },
+  { value: 'received', label: 'Получено' },
+  { value: 'cancelled', label: 'Отменено' },
+]
+
+const PurchaseOrdersPage = () => {
+  const [tab, setTab] = useState('')
+  const { purchaseOrders, loading, reload } = usePurchaseOrders(tab)
+  const [showCreate, setShowCreate] = useState(false)
+  const [selectedId, setSelectedId] = useState(null)
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+          {TABS.map((t) => (
+            <button
+              key={t.value}
+              onClick={() => setTab(t.value)}
+              className={tab === t.value ? 'btn-primary' : 'btn-outline'}
+              style={{ padding: '7px 14px', fontSize: '0.82rem' }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Заказ поставщику
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {purchaseOrders.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Заказов не найдено</p>}
+          {purchaseOrders.map((po) => (
+            <button
+              key={po.id}
+              onClick={() => setSelectedId(po.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{po.supplier_name}</p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {po.item_count} поз. · {Number(po.total_value).toLocaleString('ru-RU')} ₽ · {new Date(po.created_at).toLocaleDateString('ru-RU')}
+                </p>
+              </div>
+              <span style={{
+                fontSize: '0.72rem', fontWeight: 590, color: STATUS_COLORS[po.status],
+                background: 'rgba(100,116,139,0.08)', padding: '2px 9px', borderRadius: '50px', flexShrink: 0,
+              }}>
+                {STATUS_LABELS[po.status] || po.status}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <PurchaseOrderModal mode="create" onClose={() => setShowCreate(false)} onSaved={() => { setShowCreate(false); reload() }} />
+      )}
+      {selectedId && (
+        <PurchaseOrderModal mode="view" poId={selectedId} onClose={() => setSelectedId(null)} onSaved={reload} />
+      )}
+    </div>
+  )
+}
+
+export default PurchaseOrdersPage
diff --git a/production/web/src/purchaseorders/usePurchaseOrders.js b/production/web/src/purchaseorders/usePurchaseOrders.js
new file mode 100644
index 0000000..3dfddd6
--- /dev/null
+++ b/production/web/src/purchaseorders/usePurchaseOrders.js
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Same shape as bookings/useBookings.js — status is the load key.
+export function usePurchaseOrders(status) {
+  const [purchaseOrders, setPurchaseOrders] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setPurchaseOrders(await api.purchaseOrders.list({ status }))
+    } finally {
+      setLoading(false)
+    }
+  }, [status])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  return { purchaseOrders, loading, reload: load }
+}
diff --git a/production/web/src/rma/RmaModal.jsx b/production/web/src/rma/RmaModal.jsx
new file mode 100644
index 0000000..17360f8
--- /dev/null
+++ b/production/web/src/rma/RmaModal.jsx
@@ -0,0 +1,330 @@
+import { useState, useEffect, useRef } from 'react'
+import { X } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useSuppliers } from '../suppliers/useSuppliers'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', color: 'var(--text-main)', borderRadius: '16px', width: '100%', maxWidth: '560px',
+  boxShadow: 'var(--shadow-elevated)',
+}
+
+const STATUS_LABELS = { draft: 'Черновик', sent: 'Отправлено поставщику', resolved: 'Решено', cancelled: 'Отменено' }
+const STATUS_COLORS = { draft: 'var(--text-muted)', sent: 'var(--accent-blue)', resolved: 'var(--accent-green)', cancelled: 'var(--accent-red)' }
+const RESOLUTION_LABELS = { refund: 'Возврат денег', replacement: 'Замена', credit: 'Кредит на будущее' }
+
+// Search-and-pick a part, same idiom as purchaseorders/ItemPicker but
+// without the qty/price fields RMA doesn't need at creation.
+function PartPicker({ selected, onSelect }) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+  const [dismissed, setDismissed] = useState(false)
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    if (!query || selected) return
+    const id = setTimeout(() => {
+      api.parts.list({ q: query }).then(setResults).catch(() => {})
+    }, 250)
+    return () => clearTimeout(id)
+  }, [query, selected])
+
+  useEffect(() => {
+    const handlePointerDown = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setDismissed(true)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  const visibleResults = !query || selected || dismissed ? [] : results
+
+  return (
+    <div ref={wrapperRef} style={{ position: 'relative' }}>
+      <input
+        value={selected ? selected.name : query}
+        onChange={(e) => { setQuery(e.target.value); onSelect(null); setDismissed(false) }}
+        onKeyDown={(e) => { if (e.key === 'Escape') setDismissed(true) }}
+        placeholder="Найти запчасть по названию/артикулу..."
+        style={inputStyle}
+      />
+      {visibleResults.length > 0 && (
+        <div style={{
+          position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--color-surface)',
+          border: '1px solid var(--border-light)', borderRadius: '8px', marginTop: '4px', zIndex: 10,
+          maxHeight: '200px', overflowY: 'auto', boxShadow: 'var(--shadow-elevated)',
+        }}>
+          {visibleResults.map((p) => (
+            <button
+              key={p.id} type="button"
+              onClick={() => { onSelect(p); setQuery(p.name); setResults([]) }}
+              style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', background: 'none', fontSize: '0.85rem', fontFamily: 'var(--font-body)' }}
+            >
+              {p.name} <span style={{ color: 'var(--text-muted)' }}>· {p.sku} · остаток {p.qty_on_hand}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CreateForm({ onClose, onSaved }) {
+  const [supplierId, setSupplierId] = useState('')
+  const [part, setPart] = useState(null)
+  const [qty, setQty] = useState(1)
+  const [reason, setReason] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const { suppliers } = useSuppliers('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!supplierId || !part || !reason) { setError('Заполните поставщика, запчасть и причину'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.rma.create({ supplier_id: supplierId, part_id: part.id, qty: Number(qty), reason })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Возврат поставщику</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+      <div>
+        <label style={labelStyle}>Поставщик *</label>
+        <select value={supplierId} onChange={(e) => setSupplierId(e.target.value)} style={inputStyle} required>
+          <option value="">— выберите —</option>
+          {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Запчасть *</label>
+        <PartPicker selected={part} onSelect={setPart} />
+      </div>
+      <div style={{ width: '120px' }}>
+        <label style={labelStyle}>Количество *</label>
+        <input type="number" min="1" value={qty} onChange={(e) => setQty(e.target.value)} style={inputStyle} required />
+      </div>
+      <div>
+        <label style={labelStyle}>Причина возврата *</label>
+        <textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' }} required />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px' }}>
+        {saving ? 'Сохраняем...' : 'Создать (черновик)'}
+      </button>
+    </form>
+  )
+}
+
+function SendForm({ rma, onDone }) {
+  const [serials, setSerials] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSend = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      const serialNumbers = rma.is_serialized ? serials.split('\n').map((s) => s.trim()).filter(Boolean) : undefined
+      await api.rma.updateStatus(rma.id, { status: 'sent', serial_numbers: serialNumbers })
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div>
+      {rma.is_serialized && (
+        <div style={{ marginBottom: '8px' }}>
+          <label style={labelStyle}>Серийные номера ({rma.qty} шт, по одному на строку)</label>
+          <textarea value={serials} onChange={(e) => setSerials(e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' }} />
+        </div>
+      )}
+      <button type="button" onClick={handleSend} disabled={saving} className="btn-primary" style={{ padding: '8px 16px', fontSize: '0.82rem' }}>
+        {saving ? 'Отправляем...' : 'Подтвердить отправку'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginTop: '6px' }}>{error}</p>}
+    </div>
+  )
+}
+
+function ResolveForm({ rma, onDone }) {
+  const [resolution, setResolution] = useState('refund')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleResolve = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.rma.updateStatus(rma.id, { status: 'resolved', resolution, resolution_note: note })
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+      <div>
+        <label style={labelStyle}>Итог</label>
+        <select value={resolution} onChange={(e) => setResolution(e.target.value)} style={inputStyle}>
+          {Object.entries(RESOLUTION_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+        </select>
+      </div>
+      <div style={{ flex: 1, minWidth: '160px' }}>
+        <label style={labelStyle}>Заметка</label>
+        <input value={note} onChange={(e) => setNote(e.target.value)} style={inputStyle} />
+      </div>
+      <button type="button" onClick={handleResolve} disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.82rem' }}>
+        {saving ? 'Сохраняем...' : 'Решить'}
+      </button>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', width: '100%' }}>{error}</p>}
+    </div>
+  )
+}
+
+function DetailView({ rmaId, onClose, onChanged }) {
+  const [data, setData] = useState(null)
+  const [showSend, setShowSend] = useState(false)
+  const [showResolve, setShowResolve] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = async () => setData(await api.rma.get(rmaId))
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rmaId])
+
+  const handleChanged = async () => {
+    await load()
+    setShowSend(false)
+    setShowResolve(false)
+    onChanged()
+  }
+
+  const handleCancel = async () => {
+    setError('')
+    try {
+      await api.rma.updateStatus(rmaId, { status: 'cancelled' })
+      await handleChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  if (!data) return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+
+  const { rma, ledger, replacement_receipts: receipts } = data
+
+  return (
+    <div>
+      <div style={{ padding: '24px', borderBottom: '1px solid var(--border-light)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>{rma.part_name} <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>({rma.sku})</span></h2>
+            <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px' }}>
+              {rma.supplier_name} · {rma.qty} шт · {new Date(rma.created_at).toLocaleDateString('ru-RU')} · {rma.created_by_staff_name}
+            </p>
+            <p style={{ fontSize: '0.85rem', marginTop: '6px' }}>{rma.reason}</p>
+          </div>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <span style={{
+          display: 'inline-block', marginTop: '10px', fontSize: '0.78rem', fontWeight: 590,
+          color: STATUS_COLORS[rma.status], background: 'rgba(100,116,139,0.08)', padding: '3px 10px', borderRadius: '50px',
+        }}>
+          {STATUS_LABELS[rma.status] || rma.status}
+        </span>
+        {rma.resolution && (
+          <p style={{ fontSize: '0.82rem', color: 'var(--accent-green)', marginTop: '8px' }}>
+            {RESOLUTION_LABELS[rma.resolution] || rma.resolution}{rma.resolution_note ? ` — ${rma.resolution_note}` : ''}
+          </p>
+        )}
+      </div>
+
+      <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-light)' }}>
+        {rma.status === 'draft' && (
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: showSend ? '10px' : 0 }}>
+            <button type="button" onClick={() => setShowSend((v) => !v)} className="btn-primary" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>
+              {showSend ? 'Скрыть' : 'Отправить поставщику'}
+            </button>
+            <button type="button" onClick={handleCancel} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Отменить</button>
+          </div>
+        )}
+        {showSend && <SendForm rma={rma} onDone={handleChanged} />}
+
+        {rma.status === 'sent' && (
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: showResolve ? '10px' : 0 }}>
+            <button type="button" onClick={() => setShowResolve((v) => !v)} className="btn-primary" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>
+              {showResolve ? 'Скрыть' : 'Указать итог'}
+            </button>
+            <button type="button" onClick={handleCancel} className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem' }}>Отменить (вернуть остаток)</button>
+          </div>
+        )}
+        {showResolve && <ResolveForm rma={rma} onDone={handleChanged} />}
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginTop: '8px' }}>{error}</p>}
+      </div>
+
+      <div style={{ padding: '20px 24px' }}>
+        <h3 style={{ fontSize: '0.9rem', marginBottom: '8px' }}>История склада</h3>
+        {ledger.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Пока пусто</p>
+        ) : ledger.map((m) => (
+          <div key={m.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.82rem', padding: '6px 0', borderBottom: '1px solid var(--border-light)' }}>
+            <span>{m.type === 'rma_out' ? 'Списано (возврат)' : 'Восстановлено'} · {m.staff_name} · {new Date(m.created_at).toLocaleString('ru-RU')}</span>
+            <span style={{ fontWeight: 510, color: m.qty < 0 ? 'var(--accent-red)' : 'var(--accent-green)' }}>{m.qty > 0 ? `+${m.qty}` : m.qty}</span>
+          </div>
+        ))}
+
+        {receipts.length > 0 && (
+          <>
+            <h3 style={{ fontSize: '0.9rem', margin: '18px 0 8px' }}>Поставки замены</h3>
+            {receipts.map((r) => (
+              <div key={r.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.82rem', padding: '6px 0', borderBottom: '1px solid var(--border-light)' }}>
+                <span>{r.staff_name} · {new Date(r.received_at).toLocaleString('ru-RU')}</span>
+                <span style={{ fontWeight: 510 }}>+{r.qty_received} по {r.purchase_price} ₽</span>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const RmaModal = ({ mode, rmaId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <CreateForm onClose={onClose} onSaved={onSaved} />
+          : <DetailView rmaId={rmaId} onClose={onClose} onChanged={onSaved} />}
+      </div>
+    </div>
+  )
+}
+
+export default RmaModal
diff --git a/production/web/src/rma/RmaPage.jsx b/production/web/src/rma/RmaPage.jsx
new file mode 100644
index 0000000..588940d
--- /dev/null
+++ b/production/web/src/rma/RmaPage.jsx
@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+import { useRma } from './useRma'
+import RmaModal from './RmaModal'
+
+const STATUS_LABELS = { draft: 'Черновик', sent: 'Отправлено', resolved: 'Решено', cancelled: 'Отменено' }
+const STATUS_COLORS = { draft: 'var(--text-muted)', sent: 'var(--accent-blue)', resolved: 'var(--accent-green)', cancelled: 'var(--accent-red)' }
+const TABS = [
+  { value: '', label: 'Все' },
+  { value: 'draft', label: 'Черновики' },
+  { value: 'sent', label: 'Отправлено' },
+  { value: 'resolved', label: 'Решено' },
+  { value: 'cancelled', label: 'Отменено' },
+]
+
+const RmaPage = () => {
+  const [tab, setTab] = useState('')
+  const { requests, loading, reload } = useRma(tab)
+  const [showCreate, setShowCreate] = useState(false)
+  const [selectedId, setSelectedId] = useState(null)
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+          {TABS.map((t) => (
+            <button
+              key={t.value}
+              onClick={() => setTab(t.value)}
+              className={tab === t.value ? 'btn-primary' : 'btn-outline'}
+              style={{ padding: '7px 14px', fontSize: '0.82rem' }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Возврат поставщику
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {requests.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Возвратов не найдено</p>}
+          {requests.map((r) => (
+            <button
+              key={r.id}
+              onClick={() => setSelectedId(r.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{r.part_name} <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>({r.sku})</span></p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {r.supplier_name} · {r.qty} шт · {new Date(r.created_at).toLocaleDateString('ru-RU')}
+                </p>
+              </div>
+              <span style={{
+                fontSize: '0.72rem', fontWeight: 590, color: STATUS_COLORS[r.status],
+                background: 'rgba(100,116,139,0.08)', padding: '2px 9px', borderRadius: '50px', flexShrink: 0,
+              }}>
+                {STATUS_LABELS[r.status] || r.status}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <RmaModal mode="create" onClose={() => setShowCreate(false)} onSaved={() => { setShowCreate(false); reload() }} />
+      )}
+      {selectedId && (
+        <RmaModal mode="view" rmaId={selectedId} onClose={() => setSelectedId(null)} onSaved={reload} />
+      )}
+    </div>
+  )
+}
+
+export default RmaPage
diff --git a/production/web/src/rma/useRma.js b/production/web/src/rma/useRma.js
new file mode 100644
index 0000000..a001dea
--- /dev/null
+++ b/production/web/src/rma/useRma.js
@@ -0,0 +1,23 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useRma(status) {
+  const [requests, setRequests] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setRequests(await api.rma.list({ status }))
+    } finally {
+      setLoading(false)
+    }
+  }, [status])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  return { requests, loading, reload: load }
+}
diff --git a/production/web/src/roles/RolesPage.jsx b/production/web/src/roles/RolesPage.jsx
new file mode 100644
index 0000000..7852785
--- /dev/null
+++ b/production/web/src/roles/RolesPage.jsx
@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Plus, Trash2, Save, Lock } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { PERMISSION_LABELS, ALL_PERMISSIONS } from './permissionLabels'
+
+// Owner-only (see App.jsx/Sidebar.jsx, gated by the "staff" permission —
+// bundled with staff management since granting a role IS staff management).
+// Mirrors Sidebar.jsx's NAV_ITEMS permission keys exactly — a checkbox here
+// maps 1:1 to a nav section becoming visible/usable for that role.
+function PermissionMatrix({ value, onChange, disabled }) {
+  const toggle = (key) => {
+    if (disabled) return
+    onChange(value.includes(key) ? value.filter((p) => p !== key) : [...value, key])
+  }
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '6px' }}>
+      {ALL_PERMISSIONS.map((key) => (
+        <label key={key} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', opacity: disabled ? 0.6 : 1 }}>
+          <input type="checkbox" checked={value.includes(key)} onChange={() => toggle(key)} disabled={disabled} />
+          {PERMISSION_LABELS[key]}
+        </label>
+      ))}
+    </div>
+  )
+}
+
+function CreateRoleForm({ onCreated }) {
+  const [name, setName] = useState('')
+  const [permissions, setPermissions] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!name.trim()) { setError('Укажите название роли'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.roles.create({ name: name.trim(), permissions })
+      setName('')
+      setPermissions([])
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="glass-panel" style={{ padding: '18px', marginBottom: '20px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <div style={{ maxWidth: '280px' }}>
+        <label style={labelStyle}>Название роли</label>
+        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Старший мастер" style={inputStyle} />
+      </div>
+      <div>
+        <label style={labelStyle}>Доступ к разделам</label>
+        <PermissionMatrix value={permissions} onChange={setPermissions} />
+      </div>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Создать роль
+      </button>
+    </form>
+  )
+}
+
+function RoleRow({ role, onChanged }) {
+  const [permissions, setPermissions] = useState(role.permissions || [])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = JSON.stringify([...permissions].sort()) !== JSON.stringify([...(role.permissions || [])].sort())
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.roles.update(role.id, { permissions })
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async () => {
+    setError('')
+    try {
+      await api.roles.delete(role.id)
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <span style={{ fontWeight: 590, fontSize: '0.92rem' }}>{role.name}</span>
+          {role.is_system && (
+            <span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.7rem', color: 'var(--text-muted)', background: 'var(--color-surface-sunken)', padding: '2px 8px', borderRadius: '50px' }}>
+              <Lock size={10} /> встроенная
+            </span>
+          )}
+        </div>
+        {!role.is_system && (
+          <div style={{ display: 'flex', gap: '6px' }}>
+            {dirty && (
+              <button type="button" onClick={save} disabled={saving} className="btn-outline" style={{ padding: '6px 12px', fontSize: '0.78rem', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                <Save size={13} /> Сохранить
+              </button>
+            )}
+            <button type="button" onClick={remove} style={{ background: 'none', color: 'var(--accent-red)', padding: '6px' }}>
+              <Trash2 size={14} />
+            </button>
+          </div>
+        )}
+      </div>
+      <PermissionMatrix value={permissions} onChange={setPermissions} disabled={role.is_system} />
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem', marginTop: '6px' }}>{error}</p>}
+    </div>
+  )
+}
+
+const RolesPage = () => {
+  const [roleList, setRoleList] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setRoleList((await api.roles.list()) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '18px' }}>
+        Встроенные роли (владелец/менеджер/мастер) нельзя переименовать или удалить.
+        Создайте свою роль, чтобы дать сотруднику доступ только к нужным разделам.
+      </p>
+      <CreateRoleForm onCreated={load} />
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {roleList.map((r) => <RoleRow key={r.id} role={r} onChanged={load} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default RolesPage
diff --git a/production/web/src/roles/permissionLabels.js b/production/web/src/roles/permissionLabels.js
new file mode 100644
index 0000000..699844b
--- /dev/null
+++ b/production/web/src/roles/permissionLabels.js
@@ -0,0 +1,32 @@
+// Single source of truth for permission key → Russian label, shared by
+// RolesPage's role editor and StaffPage's per-employee override editor —
+// both render the exact same checkbox set, just against a different value
+// (a role's permissions vs. one staff member's grants/revokes), so the
+// labels must never drift between the two.
+export const PERMISSION_LABELS = {
+  cash: 'Касса',
+  analytics: 'Аналитика',
+  staff: 'Сотрудники и роли',
+  modules: 'Модули',
+  order_fields: 'Поля приёмки',
+  catalogs: 'Справочники',
+  document_templates: 'Шаблоны документов',
+  settings: 'Настройки',
+  services: 'Прайс-лист работ',
+  // Not a nav section like the rest — controls whether this role sees every
+  // order/картридж-заявку or only ones assigned to that specific employee
+  // (или неназначенные). See production's internal/authz.CanAccessAssigned.
+  unscoped: 'Все заказы (не только свои)',
+  // Gates production's DELETE /api/orders/:id — see order.Handler.Delete's
+  // own doc comment for why this is a separate key from "unscoped" rather
+  // than folded into it.
+  delete_orders: 'Удаление заявок',
+  // Lets this role apply a final_price cut that exceeds the owner's
+  // discount_approval_threshold_percent (Настройки → Согласование скидок)
+  // directly, and resolve other staff's parked requests via the
+  // approve/reject buttons on a pending order. See production's
+  // internal/order.discountNeedsApproval.
+  approve_discounts: 'Согласование скидок',
+}
+
+export const ALL_PERMISSIONS = Object.keys(PERMISSION_LABELS)
diff --git a/production/web/src/sales/CartContext.jsx b/production/web/src/sales/CartContext.jsx
new file mode 100644
index 0000000..84a4bcd
--- /dev/null
+++ b/production/web/src/sales/CartContext.jsx
@@ -0,0 +1,46 @@
+import { createContext, useContext, useState } from 'react'
+
+const CartContext = createContext(null)
+
+// Lifted verbatim from SalesPage's old local useState so /parts (Склад) can
+// add to the same cart a staff member started building on /sales, and vice
+// versa — mounted once at AdminLayout so it survives in-app navigation.
+// Deliberately not localStorage-backed: this is checkout scratch state for
+// the current session, not something that should outlive a page reload.
+export function CartProvider({ children }) {
+  const [cart, setCart] = useState([])
+
+  const addToCart = (part) => {
+    setCart((prev) => {
+      if (prev.some((it) => it.part_id === part.id)) return prev
+      return [...prev, { part_id: part.id, name: part.name, sku: part.sku, qty: 1, unit_price: part.sale_price || '' }]
+    })
+  }
+  // A priced line with no stocked part behind it (e.g. the PC configurator's
+  // "Наценка"/"Сборка и настройка") — see internal/sale's serviceItemInput
+  // on the backend. Reuses the exact same cart item shape (part_id/name/
+  // qty/unit_price) so every existing render/update/remove path needs no
+  // branching, just a synthetic id namespaced 'service:' and an is_service
+  // flag SalesPage's checkout uses to route it into service_items instead
+  // of items when posting the sale.
+  const addServiceItem = (name, amount) => {
+    const id = typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+    setCart((prev) => [...prev, { part_id: `service:${id}`, name, sku: '', qty: 1, unit_price: amount, is_service: true }])
+  }
+  const updateCartItem = (partId, field, value) =>
+    setCart((prev) => prev.map((it) => (it.part_id === partId ? { ...it, [field]: value } : it)))
+  const removeCartItem = (partId) => setCart((prev) => prev.filter((it) => it.part_id !== partId))
+  const clearCart = () => setCart([])
+
+  return (
+    <CartContext.Provider value={{ cart, addToCart, addServiceItem, updateCartItem, removeCartItem, clearCart }}>
+      {children}
+    </CartContext.Provider>
+  )
+}
+
+export function useCart() {
+  const ctx = useContext(CartContext)
+  if (!ctx) throw new Error('useCart must be used within a CartProvider')
+  return ctx
+}
diff --git a/production/web/src/sales/SalesPage.jsx b/production/web/src/sales/SalesPage.jsx
new file mode 100644
index 0000000..8f34f2f
--- /dev/null
+++ b/production/web/src/sales/SalesPage.jsx
@@ -0,0 +1,372 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Search, Trash2, ShoppingCart, Zap, Plus, Check, X } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import ClientPicker from '../orders/ClientPicker'
+import { useRetailParts } from './useRetailParts'
+import { usePinnedParts } from './usePinnedParts'
+import { usePartCategories } from '../inventory/usePartCategories'
+import { useCart } from './CartContext'
+
+function CategoryChip({ active, onClick, children }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        padding: '6px 13px', borderRadius: '50px', fontSize: '0.8rem', fontWeight: 510,
+        border: '1.5px solid ' + (active ? 'var(--color-accent)' : 'var(--color-border)'),
+        background: active ? 'var(--color-accent-soft)' : 'var(--color-surface)',
+        color: active ? 'var(--color-accent-fg)' : 'var(--color-text)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
+// Quick-add affordance for the витрина's chip browser — a "+" chip that
+// swaps for an inline name field, same commit-on-Enter shape as
+// CommonFaultsPicker's inline add. Full management (rename/delete) lives on
+// the Склад side's CategoryTree; here staff just need to make room for a
+// new bucket without leaving the checkout screen.
+function AddCategoryChip({ onAdd, placeholder }) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        title="Новая категория"
+        style={{
+          display: 'flex', alignItems: 'center', gap: '4px', padding: '6px 12px', borderRadius: '50px',
+          fontSize: '0.8rem', fontWeight: 510, border: '1.5px dashed var(--color-border)',
+          background: 'var(--color-surface)', color: 'var(--text-muted)', whiteSpace: 'nowrap',
+        }}
+      >
+        <Plus size={13} />
+      </button>
+    )
+  }
+
+  const commit = () => {
+    const trimmed = value.trim()
+    if (trimmed) onAdd(trimmed)
+    setValue('')
+    setOpen(false)
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+      <input
+        autoFocus
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commit()
+          if (e.key === 'Escape') { setValue(''); setOpen(false) }
+        }}
+        style={{
+          padding: '5px 10px', borderRadius: '50px', fontSize: '0.8rem', border: '1.5px solid var(--color-accent)',
+          outline: 'none', width: '150px', background: 'var(--color-surface)', color: 'var(--color-text)',
+        }}
+      />
+      <button type="button" onClick={commit} style={{ background: 'none', color: 'var(--color-success, #16a34a)', display: 'flex' }}><Check size={15} /></button>
+      <button type="button" onClick={() => { setValue(''); setOpen(false) }} style={{ background: 'none', color: 'var(--accent-red)', display: 'flex' }}><X size={15} /></button>
+    </div>
+  )
+}
+
+// Staff-facing checkout for the витрина (showroom) pool built in Phase 5 —
+// POST /api/sales draws stock down via the same FIFO logic order/cartridge
+// consumption uses (internal/inventory.ConsumeForSale) and records income
+// in the cash ledger, all in one backend transaction.
+const SalesPage = () => {
+  const [query, setQuery] = useState('')
+  const [topCategoryId, setTopCategoryId] = useState('')
+  const [subCategoryId, setSubCategoryId] = useState('')
+  const { tree, addCategory } = usePartCategories()
+  const activeCategoryId = subCategoryId || topCategoryId
+  const results = useRetailParts(query, activeCategoryId)
+  const { parts: pinnedParts } = usePinnedParts()
+  const subCategories = tree.find((c) => c.id === topCategoryId)?.children || []
+  const { cart, addToCart: addToCartCtx, updateCartItem, removeCartItem, clearCart } = useCart()
+  const [client, setClient] = useState(null)
+  const [paymentMethod, setPaymentMethod] = useState('cash')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [sales, setSales] = useState([])
+  const [loadingSales, setLoadingSales] = useState(true)
+  const [loyaltyBalance, setLoyaltyBalance] = useState(null)
+  const [redeemPoints, setRedeemPoints] = useState('')
+
+  // Loyalty balance is fetched fresh whenever the client changes (not
+  // carried on the ClientPicker result — that's a client-search summary,
+  // not a live balance) and reset on deselect so a stale balance never
+  // survives into a walk-in sale with no client.
+  useEffect(() => {
+    setRedeemPoints('')
+    if (!client) { setLoyaltyBalance(null); return }
+    api.loyalty.get(client.id).then((d) => setLoyaltyBalance(d.balance)).catch(() => setLoyaltyBalance(null))
+  }, [client])
+
+  const loadSales = useCallback(async () => {
+    setLoadingSales(true)
+    try {
+      setSales((await api.sales.list()) || [])
+    } finally {
+      setLoadingSales(false)
+    }
+  }, [])
+
+  useEffect(() => { loadSales() }, [loadSales])
+
+  const addToCart = (part) => {
+    addToCartCtx(part)
+    setQuery('')
+  }
+
+  const total = cart.reduce((sum, it) => sum + (Number(it.unit_price) || 0) * (Number(it.qty) || 0), 0)
+  const redeemAmount = Math.min(Number(redeemPoints) || 0, loyaltyBalance || 0, Math.floor(total))
+  const totalAfterRedeem = total - redeemAmount
+
+  const handleCheckout = async () => {
+    if (cart.length === 0) return
+    if (cart.some((it) => !it.unit_price || Number(it.unit_price) <= 0)) {
+      setError('У каждой позиции должна быть цена больше нуля')
+      return
+    }
+    setSaving(true)
+    setError('')
+    try {
+      await api.sales.create({
+        client_id: client?.id || undefined,
+        payment_method: paymentMethod,
+        items: cart.filter((it) => !it.is_service).map((it) => ({ part_id: it.part_id, qty: Number(it.qty), unit_price: String(it.unit_price) })),
+        service_items: cart.filter((it) => it.is_service).map((it) => ({ name: it.name, amount: String(it.unit_price) })),
+        redeem_points: redeemAmount || undefined,
+      })
+      clearCart()
+      setClient(null)
+      setRedeemPoints('')
+      await loadSales()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: '20px', alignItems: 'flex-start' }}>
+      <div>
+        <h3 style={{ fontSize: '0.95rem', marginBottom: '10px' }}>История продаж</h3>
+        {loadingSales ? (
+          <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+        ) : (
+          <div className="glass-panel" style={{ overflowX: 'auto' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid var(--border-light)', textAlign: 'left' }}>
+                  <th style={{ padding: '10px 14px' }}>Дата</th>
+                  <th style={{ padding: '10px 14px' }}>Источник</th>
+                  <th style={{ padding: '10px 14px' }}>Товары</th>
+                  <th style={{ padding: '10px 14px' }}>Сумма, ₽</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sales.map((s) => (
+                  <tr
+                    key={s.id}
+                    className="list-row"
+                    style={{
+                      borderBottom: '1px solid var(--border-light)',
+                      borderLeft: `3px solid ${s.source === 'pos' ? 'var(--color-shop-accent)' : 'var(--color-border)'}`,
+                    }}
+                  >
+                    <td style={{ padding: '10px 14px', whiteSpace: 'nowrap', color: 'var(--text-muted)' }}>
+                      {new Date(s.created_at).toLocaleString('ru-RU')}
+                    </td>
+                    <td style={{ padding: '10px 14px' }}>
+                      <span style={{
+                        fontSize: '0.72rem', fontWeight: 510, padding: '2px 8px', borderRadius: '50px',
+                        background: s.source === 'pos' ? 'var(--color-accent-soft)' : 'var(--color-surface-sunken)',
+                        color: s.source === 'pos' ? 'var(--color-accent-fg)' : 'var(--text-muted)',
+                      }}>
+                        {s.source === 'pos' ? 'касса' : s.source}
+                      </span>
+                    </td>
+                    <td style={{ padding: '10px 14px' }}>
+                      {(s.items || []).map((it) => `${it.name} ×${it.qty}`).join(', ')}
+                    </td>
+                    <td style={{ padding: '10px 14px', fontWeight: 510 }}>{Number(s.total_amount).toLocaleString('ru-RU')}</td>
+                  </tr>
+                ))}
+                {sales.length === 0 && (
+                  <tr><td colSpan={4} style={{ padding: '20px', textAlign: 'center', color: 'var(--text-muted)' }}>Продаж пока не было</td></tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <div className="glass-panel" style={{ padding: '20px', position: 'sticky', top: '76px' }}>
+        <h3 style={{ fontSize: '0.95rem', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <ShoppingCart size={16} /> Новая продажа
+        </h3>
+
+        {pinnedParts.length > 0 && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '10px' }}>
+            {pinnedParts.map((p) => (
+              <button
+                key={p.id}
+                type="button"
+                onClick={() => addToCart(p)}
+                title={p.sale_price ? `${Number(p.sale_price).toLocaleString('ru-RU')} ₽` : 'без цены'}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: '6px', padding: '8px 14px',
+                  borderRadius: '10px', fontSize: '0.82rem', fontWeight: 510,
+                  background: 'var(--color-shop-accent-soft)', color: 'var(--color-shop-accent-fg)',
+                  border: '1.5px solid var(--color-shop-accent-soft)',
+                }}
+              >
+                <Zap size={13} /> {p.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', marginBottom: subCategories.length > 0 ? '6px' : '10px' }}>
+          <CategoryChip active={!topCategoryId} onClick={() => { setTopCategoryId(''); setSubCategoryId('') }}>
+            Все категории
+          </CategoryChip>
+          {tree.map((c) => (
+            <CategoryChip
+              key={c.id}
+              active={topCategoryId === c.id}
+              onClick={() => { setTopCategoryId(c.id === topCategoryId ? '' : c.id); setSubCategoryId('') }}
+            >
+              {c.name}
+            </CategoryChip>
+          ))}
+          <AddCategoryChip placeholder="Новая категория" onAdd={(name) => addCategory(name, null)} />
+        </div>
+
+        {topCategoryId && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center', marginBottom: '10px' }}>
+            <CategoryChip active={!subCategoryId} onClick={() => setSubCategoryId('')}>
+              Все {tree.find((c) => c.id === topCategoryId)?.name.toLowerCase()}
+            </CategoryChip>
+            {subCategories.map((c) => (
+              <CategoryChip key={c.id} active={subCategoryId === c.id} onClick={() => setSubCategoryId(c.id)}>
+                {c.name}
+              </CategoryChip>
+            ))}
+            <AddCategoryChip placeholder="Новая подкатегория" onAdd={(name) => addCategory(name, topCategoryId)} />
+          </div>
+        )}
+
+        <div style={{ position: 'relative', marginBottom: '10px' }}>
+          <Search size={15} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Найти товар на витрине..."
+            style={{ ...inputStyle, width: '100%', paddingLeft: '32px' }}
+          />
+          {results.length > 0 && (
+            <div style={{ border: '1px solid var(--color-border)', borderRadius: '8px', marginTop: '4px', maxHeight: '220px', overflowY: 'auto' }}>
+              {results.map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  onClick={() => addToCart(p)}
+                  style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 10px', fontSize: '0.82rem', background: 'var(--color-surface)', borderBottom: '1px solid var(--color-border)' }}
+                >
+                  {p.name} <span style={{ color: 'var(--color-text-muted)' }}>· {p.qty_on_hand} шт · {p.sale_price ? `${Number(p.sale_price).toLocaleString('ru-RU')} ₽` : 'без цены'}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {cart.length === 0 ? (
+          <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '12px' }}>Корзина пуста</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '12px' }}>
+            {cart.map((it) => (
+              <div key={it.part_id} style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+                <span style={{ flex: 1, fontSize: '0.82rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.name}</span>
+                <input
+                  type="number" min="1" value={it.qty}
+                  onChange={(e) => updateCartItem(it.part_id, 'qty', e.target.value)}
+                  style={{ ...inputStyle, width: '52px', padding: '6px' }}
+                />
+                <input
+                  type="number" value={it.unit_price} placeholder="цена"
+                  onChange={(e) => updateCartItem(it.part_id, 'unit_price', e.target.value)}
+                  style={{ ...inputStyle, width: '80px', padding: '6px' }}
+                />
+                <button type="button" onClick={() => removeCartItem(it.part_id)} style={{ background: 'none', color: 'var(--accent-red)', display: 'flex' }}>
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div style={{ marginBottom: '10px' }}>
+          <label style={labelStyle}>Клиент (необязательно)</label>
+          <ClientPicker selectedClient={client} onSelect={setClient} />
+        </div>
+
+        {client && loyaltyBalance > 0 && (
+          <div style={{ marginBottom: '10px' }}>
+            <label style={labelStyle}>Списать бонусы (баланс: {loyaltyBalance})</label>
+            <input
+              type="number" min="0" max={Math.min(loyaltyBalance, Math.floor(total))}
+              value={redeemPoints} onChange={(e) => setRedeemPoints(e.target.value)}
+              placeholder="0" style={inputStyle}
+            />
+          </div>
+        )}
+
+        <div style={{ marginBottom: '14px' }}>
+          <label style={labelStyle}>Способ оплаты</label>
+          <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)} style={inputStyle}>
+            <option value="cash">Наличные</option>
+            <option value="card">Карта</option>
+            <option value="invoice">Безнал / счёт</option>
+          </select>
+        </div>
+
+        {redeemAmount > 0 && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', color: 'var(--color-text-muted)', marginBottom: '4px' }}>
+            <span>Скидка бонусами</span>
+            <span>−{redeemAmount.toLocaleString('ru-RU')} ₽</span>
+          </div>
+        )}
+        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '1rem', fontWeight: 590, marginBottom: '12px' }}>
+          <span>Итого</span>
+          <span>{totalAfterRedeem.toLocaleString('ru-RU')} ₽</span>
+        </div>
+
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginBottom: '10px' }}>{error}</p>}
+
+        <button
+          type="button" onClick={handleCheckout} disabled={saving || cart.length === 0}
+          className="btn-primary" style={{ width: '100%', padding: '12px', opacity: saving || cart.length === 0 ? 0.6 : 1 }}
+        >
+          {saving ? 'Оформляем...' : 'Оформить продажу'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default SalesPage
diff --git a/production/web/src/sales/usePinnedParts.js b/production/web/src/sales/usePinnedParts.js
new file mode 100644
index 0000000..5a6ced2
--- /dev/null
+++ b/production/web/src/sales/usePinnedParts.js
@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+async function fetchPinned() {
+  try {
+    return (await api.parts.list({ is_retail: 'true', pinned_for_sale: 'true' })) || []
+  } catch {
+    return []
+  }
+}
+
+// The owner-curated quick-sale row on SalesPage (печать, ксерокопия и
+// т.п.) — a small, mostly-static list, so a plain fetch-on-mount is enough,
+// no debounce needed like useRetailParts' search-as-you-type. The .finally
+// callback (not reload's own body) is what sets loading, same shape as
+// useFeatureModules.js's working effect — satisfies
+// react-hooks/set-state-in-effect, which flags a bare
+// `useEffect(() => { reload() })` when reload's own body sets state.
+export function usePinnedParts() {
+  const [parts, setParts] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(() => fetchPinned().then(setParts), [])
+
+  useEffect(() => {
+    reload().finally(() => setLoading(false))
+  }, [reload])
+
+  return { parts, loading, reload }
+}
diff --git a/production/web/src/sales/useRetailParts.js b/production/web/src/sales/useRetailParts.js
new file mode 100644
index 0000000..fa1bba6
--- /dev/null
+++ b/production/web/src/sales/useRetailParts.js
@@ -0,0 +1,27 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Search-as-you-type (and/or browse-by-category) over the is_retail=true
+// pool (Phase 5) — feeds SalesPage's "add to cart" picker. Either query or
+// categoryId alone is enough to fetch — staff can browse a category
+// without typing anything, or type without picking a category — same
+// debounce shape as inventory/useParts.
+export function useRetailParts(query, categoryId) {
+  const [parts, setParts] = useState([])
+
+  const fetchParts = useCallback(async () => {
+    if (!query.trim() && !categoryId) { setParts([]); return }
+    try {
+      setParts((await api.parts.list({ q: query, category_id: categoryId || '', is_retail: 'true' })) || [])
+    } catch {
+      setParts([])
+    }
+  }, [query, categoryId])
+
+  useEffect(() => {
+    const id = setTimeout(fetchParts, 250)
+    return () => clearTimeout(id)
+  }, [fetchParts])
+
+  return parts
+}
diff --git a/production/web/src/servicecatalog/ServicesPage.jsx b/production/web/src/servicecatalog/ServicesPage.jsx
new file mode 100644
index 0000000..684be8f
--- /dev/null
+++ b/production/web/src/servicecatalog/ServicesPage.jsx
@@ -0,0 +1,149 @@
+import { useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import * as api from '../lib/api'
+import { useServiceCategories, useServices } from './useServiceCatalog'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Owner-only (see App.jsx/Sidebar.jsx) — прайс-лист работ мастера выбирают
+// в OrderModal (see orders/ServiceItemsSection.jsx). Category создаёт/удаляет
+// только владелец (структурная таксономия, как группы устройств); сами
+// услуги — тоже owner-only здесь, в отличие от брендов, т.к. это прайс-лист
+// бизнеса, не просто список меток.
+
+function AddCategoryForm({ onAdded }) {
+  const [name, setName] = useState('')
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setError('')
+    try {
+      await api.serviceCategories.create({ name })
+      setName('')
+      onAdded()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Новая категория" style={{ ...inputStyle, maxWidth: '260px' }} />
+      <button type="submit" className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить
+      </button>
+      {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+    </form>
+  )
+}
+
+function AddServiceForm({ categories, onAdded }) {
+  const [form, setForm] = useState({ category_id: '', name: '', default_price: '' })
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!form.name.trim()) { setError('Укажите название услуги'); return }
+    setError('')
+    try {
+      await api.services.create({ ...form, default_price: form.default_price || undefined })
+      setForm({ category_id: '', name: '', default_price: '' })
+      onAdded()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', marginBottom: '16px', flexWrap: 'wrap' }}>
+      <div>
+        <label style={labelStyle}>Категория</label>
+        <select value={form.category_id} onChange={(e) => setForm((f) => ({ ...f, category_id: e.target.value }))} style={{ ...inputStyle, width: '160px' }}>
+          <option value="">— без категории —</option>
+          {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+      </div>
+      <div style={{ flex: 1, minWidth: '200px' }}>
+        <label style={labelStyle}>Название услуги</label>
+        <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Замена дисплея iPhone 12" style={inputStyle} />
+      </div>
+      <div>
+        <label style={labelStyle}>Цена по умолчанию, ₽</label>
+        <input type="number" value={form.default_price} onChange={(e) => setForm((f) => ({ ...f, default_price: e.target.value }))} style={{ ...inputStyle, width: '130px' }} />
+      </div>
+      <button type="submit" className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить
+      </button>
+      {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+    </form>
+  )
+}
+
+const ServicesPage = () => {
+  const { categories, loading: catsLoading, reload: reloadCats } = useServiceCategories()
+  const { services, loading: svcLoading, reload: reloadServices } = useServices()
+
+  const removeCategory = async (id) => {
+    await api.serviceCategories.delete(id)
+    reloadCats()
+    reloadServices()
+  }
+  const removeService = async (id) => {
+    await api.services.delete(id)
+    reloadServices()
+  }
+
+  const categoryName = (id) => categories.find((c) => c.id === id)?.name || 'без категории'
+
+  return (
+    <div>
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '10px' }}>Категории</h3>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '10px' }}>
+        Соответствуют группам устройств — по ним группируются услуги в форме заявки.
+      </p>
+      <AddCategoryForm onAdded={reloadCats} />
+      {!catsLoading && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '24px' }}>
+          {categories.map((c) => (
+            <span key={c.id} style={{
+              display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 10px 6px 12px',
+              background: 'var(--color-surface)', color: 'var(--text-main)', border: '1.5px solid var(--border-light)', borderRadius: '20px', fontSize: '0.82rem',
+            }}>
+              {c.name}
+              <button type="button" onClick={() => removeCategory(c.id)} style={{ background: 'none', color: 'var(--text-muted)', padding: '2px', display: 'flex' }}>
+                <Trash2 size={12} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <h3 style={{ fontSize: '0.95rem', marginBottom: '10px' }}>Услуги (прайс-лист)</h3>
+      <AddServiceForm categories={categories} onAdded={reloadServices} />
+      {svcLoading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {services.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Услуг пока нет</p>}
+          {services.map((s) => (
+            <div key={s.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 18px', borderBottom: '1px solid var(--border-light)' }}>
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>{s.name}</p>
+                <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>{categoryName(s.category_id)}</p>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ fontWeight: 510 }}>{s.default_price ? `${Number(s.default_price).toLocaleString('ru-RU')} ₽` : '—'}</span>
+                <button type="button" onClick={() => removeService(s.id)} style={{ background: 'none', color: 'var(--accent-red)', display: 'flex' }}>
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ServicesPage
diff --git a/production/web/src/servicecatalog/useServiceCatalog.js b/production/web/src/servicecatalog/useServiceCatalog.js
new file mode 100644
index 0000000..9313740
--- /dev/null
+++ b/production/web/src/servicecatalog/useServiceCatalog.js
@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useServiceCategories() {
+  const [categories, setCategories] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    try {
+      setCategories((await api.serviceCategories.list()) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { (async () => { await reload() })() }, [reload])
+
+  return { categories, loading, reload }
+}
+
+// categoryId='' lists every service (management page); a real id scopes it
+// to one category (order form's service picker).
+export function useServices(categoryId = '') {
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    try {
+      setItems((await api.services.list(categoryId)) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [categoryId])
+
+  useEffect(() => { (async () => { await reload() })() }, [reload])
+
+  return { services: items, loading, reload }
+}
diff --git a/production/web/src/settings/IntegrationsPage.jsx b/production/web/src/settings/IntegrationsPage.jsx
new file mode 100644
index 0000000..2cbe3cd
--- /dev/null
+++ b/production/web/src/settings/IntegrationsPage.jsx
@@ -0,0 +1,96 @@
+import { useEffect } from 'react'
+import { ExternalLink } from 'lucide-react'
+import * as api from '../lib/api'
+import { Section, Toggle, Field, SaveFooter } from './SettingsFields'
+import { useSettingsForm } from './useSettingsForm'
+
+// Every external API key/token/login the CRM holds, in one place — split
+// out of what used to be one flat "Общие" page mixing business requisites
+// in with every credential (see SettingsPage.jsx's own doc comment for the
+// business/workflow half that stayed there). If it's something a staff
+// member could otherwise only find by grepping .env or asking whoever set
+// it up, it belongs on this tab.
+const IntegrationsPage = () => {
+  const { form, loading, error, saving, saved, load, set, save } = useSettingsForm(api)
+  useEffect(() => { load() }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (error && !form) return <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+  if (!form) return null
+
+  return (
+    <div>
+      <Section title="AI (Gemini)" hint="Используется AI-приёмкой заявок, аналитической сводкой и AI-диагностикой по фото. Ключ — из Google AI Studio, бесплатный тариф.">
+        <Field label="API-ключ" field="gemini_api_key" value={form.gemini_api_key} onChange={set} secret placeholder="AIza..." />
+        <Field label="Модель" field="gemini_model" value={form.gemini_model} onChange={set} placeholder="gemini-2.0-flash" />
+      </Section>
+
+      <Section title="Telegram-бот" hint="Уведомления для staff о новых заявках и смене статусов. Токен — от @BotFather, chat_id — id общего чата/группы.">
+        <Field label="Токен бота" field="tg_bot_token" value={form.tg_bot_token} onChange={set} secret />
+        <Field label="Chat ID" field="tg_chat_id" value={form.tg_chat_id} onChange={set} />
+        <Field label="Адрес Bot API сервера" field="tg_api_base_url" value={form.tg_api_base_url} onChange={set} placeholder="http://telegram-bot-api:8081" />
+      </Section>
+
+      <Section title="IMEI-автозаполнение" hint="Определение бренда/модели телефона по IMEI при создании заявки.">
+        <Field label="API-ключ" field="imei_api_key" value={form.imei_api_key} onChange={set} secret />
+      </Section>
+
+      <Section title="Уведомления клиентам" hint="Telegram, MAX и SMS для клиентов — статус заявки, готовность к выдаче и т.д. Telegram использует того же бота, что и уведомления для сотрудников (токен выше), но пишет в чат конкретного клиента после привязки через deep-link.">
+        <Toggle label="Включить уведомления клиентам" field="client_notify_enabled" checked={form.client_notify_enabled} onChange={set} />
+        <Field label="Username Telegram-бота (без @)" field="client_tg_bot_username" value={form.client_tg_bot_username} onChange={set} placeholder="my_service_bot" />
+        <Field label="Секрет Telegram-вебхука" field="tg_webhook_secret" value={form.tg_webhook_secret} onChange={set} secret />
+        <Field label="Базовый URL трекинга" field="public_tracking_url" value={form.public_tracking_url} onChange={set} placeholder="https://example.com/track" />
+      </Section>
+
+      <Section title="MAX-бот" hint="Отдельный бот в мессенджере MAX (max.ru) для уведомлений клиентам — токен получают у @MasterBot внутри MAX. Работает по тому же принципу, что и Telegram выше: клиент подключается по ссылке, отправленной ему, или написав боту телефон и номер заказа.">
+        <Field label="Токен бота" field="max_bot_token" value={form.max_bot_token} onChange={set} secret />
+        <Field label="Username бота (без @)" field="client_max_bot_username" value={form.client_max_bot_username} onChange={set} placeholder="my_service_bot" />
+        <Field label="Секрет вебхука" field="max_webhook_secret" value={form.max_webhook_secret} onChange={set} secret />
+      </Section>
+
+      <Section title="ВК-сообщество" hint="Уведомления клиентам через сообщение сообщества ВКонтакте — тот же принцип: клиент подключается по ссылке или написав боту телефон и номер заказа. Токен — в настройках сообщества → Работа с API → Ключи доступа (права «Сообщения сообщества»). Group ID — число из ссылки на управление сообществом (vk.com/club<ID>). После сохранения зайдите в Настройки → Работа с API → Callback API этого сообщества: сервер пропишется автоматически при следующем перезапуске, но код подтверждения ВК покажет только там — его нужно скопировать сюда вручную.">
+        <Field label="Токен сообщества" field="vk_group_token" value={form.vk_group_token} onChange={set} secret />
+        <Field label="Group ID (число)" field="vk_group_id" value={form.vk_group_id} onChange={set} placeholder="123456789" />
+        <Field label="Секретный ключ (Callback API)" field="vk_secret_key" value={form.vk_secret_key} onChange={set} secret />
+        <Field label="Код подтверждения (из настроек ВК)" field="vk_confirmation_code" value={form.vk_confirmation_code} onChange={set} />
+        <Field label="Короткое имя сообщества (для ссылок клиентам)" field="client_vk_community_id" value={form.client_vk_community_id} onChange={set} placeholder="my_service_center" />
+      </Section>
+
+      <Section title="SMS (SMS.ru)" hint="Резервный канал для клиентов без привязанного Telegram. Платный — включайте осознанно. Ключ — из sms.ru/?panel=api.">
+        <Toggle label="Включить SMS" field="sms_enabled" checked={form.sms_enabled} onChange={set} />
+        <Field label="API ID" field="sms_api_id" value={form.sms_api_id} onChange={set} secret />
+        <Field label="Имя отправителя" field="sms_from" value={form.sms_from} onChange={set} />
+      </Section>
+
+      <Section title="Фискализация (KkmServer)" hint="Пробитие чека при выдаче заявки клиенту (см. kkmserver.ru/KkmServer) — регистрируется автоматически при записи оплаты, только для реальной продажи (не для расходов/зарплаты). Выключено, пока не заполнены адрес сервера и код налога — до этого просто ничего не отправляется.">
+        <Toggle label="Включить фискализацию" field="kkm_enabled" checked={form.kkm_enabled} onChange={set} />
+        <Field label="Адрес сервера" field="kkm_server_url" value={form.kkm_server_url} onChange={set} placeholder="http://192.168.1.10:5893" />
+        <Field label="Логин" field="kkm_login" value={form.kkm_login} onChange={set} />
+        <Field label="Пароль" field="kkm_password" value={form.kkm_password} onChange={set} secret />
+        <Field label="Номер устройства" field="kkm_num_device" value={form.kkm_num_device} onChange={set} placeholder="1" />
+        <Field label="Код налога" field="kkm_tax" value={form.kkm_tax} onChange={set} placeholder="-1 (без НДС), 0, 10, 20..." />
+      </Section>
+
+      <Section
+        title="Diax Pro"
+        hint={
+          <>
+            Справочник схем/боардвью, прошивок и IC-базы для ремонта техники (diaxpro.com) — вход только через личный
+            кабинет сайта, открытого API для интеграции у сервиса нет, поэтому здесь просто общий логин на
+            сохранение, чтобы не искать его каждый раз.{' '}
+            <a href="https://diaxpro.com/login" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-accent-fg)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+              Открыть сайт <ExternalLink size={12} />
+            </a>
+          </>
+        }
+      >
+        <Field label="Email" field="diaxpro_email" value={form.diaxpro_email} onChange={set} placeholder="name@domain.com" />
+        <Field label="Пароль" field="diaxpro_password" value={form.diaxpro_password} onChange={set} secret />
+      </Section>
+
+      <SaveFooter error={error} saving={saving} saved={saved} form={form} onSave={save} />
+    </div>
+  )
+}
+
+export default IntegrationsPage
diff --git a/production/web/src/settings/InterfaceTab.jsx b/production/web/src/settings/InterfaceTab.jsx
new file mode 100644
index 0000000..8a4e4eb
--- /dev/null
+++ b/production/web/src/settings/InterfaceTab.jsx
@@ -0,0 +1,160 @@
+import { Sun, Moon, MonitorSmartphone, PanelLeft, PanelTop, LayoutDashboard, List, Check } from 'lucide-react'
+import { useTheme } from '../hooks/useTheme'
+import { useSidebarPosition } from '../hooks/useSidebarPosition'
+import { useOrdersView } from '../hooks/useOrdersView'
+import { useAccentColor, ACCENT_PRESETS } from '../hooks/useAccentColor'
+import { useShopAccentColor } from '../hooks/useShopAccentColor'
+
+// Same curated hex set as ACCENT_PRESETS — only the "default" swatch color
+// differs, since shop mode's own default is Signal Teal, not the acid-lime
+// Сервис default (see index.css's --color-shop-accent).
+const SHOP_ACCENT_PRESETS = [
+  { value: null, label: 'По умолчанию', swatch: '#02b8cc' },
+  ...ACCENT_PRESETS.slice(1),
+]
+
+// Interface preferences that used to only be reachable as unlabeled icon
+// buttons in AdminLayout's header (theme, sidebar position) or not exposed
+// anywhere at all (orders default view) — same localStorage-backed hooks,
+// this tab is just a second, discoverable entry point onto the same state.
+// No permission gate: every role should be able to pick their own layout.
+
+function OptionRow({ label, hint, children }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px', padding: '16px 0', borderBottom: '1px solid var(--color-border)', flexWrap: 'wrap' }}>
+      <div>
+        <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>{label}</p>
+        {hint && <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', marginTop: '2px' }}>{hint}</p>}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function SegmentedControl({ value, onChange, options }) {
+  return (
+    <div style={{ display: 'flex', border: '1.5px solid var(--color-border)', borderRadius: '10px', overflow: 'hidden', flexShrink: 0 }}>
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          style={{
+            display: 'flex', alignItems: 'center', gap: '6px', padding: '9px 14px',
+            fontSize: '0.82rem', fontFamily: 'var(--font-heading)', fontWeight: 510,
+            background: value === opt.value ? 'var(--color-accent)' : 'var(--color-surface)',
+            color: value === opt.value ? 'var(--color-text-inverse)' : 'var(--color-text-muted)',
+            transition: 'background 0.15s, color 0.15s',
+          }}
+        >
+          {opt.icon && <opt.icon size={14} />}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function AccentSwatches({ value, onChange, presets = ACCENT_PRESETS }) {
+  const defaultHex = presets[0]?.swatch || '#e4f222'
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
+      {presets.map((preset) => (
+        <button
+          key={preset.value ?? 'default'}
+          type="button"
+          onClick={() => onChange(preset.value)}
+          aria-label={preset.label}
+          title={preset.label}
+          style={{
+            width: '28px', height: '28px', borderRadius: '50%',
+            background: preset.swatch || preset.value,
+            border: value === preset.value ? '2px solid var(--color-text)' : '2px solid transparent',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+          }}
+        >
+          {value === preset.value && <Check size={14} color="#fff" strokeWidth={3} />}
+        </button>
+      ))}
+      <label
+        title="Свой цвет"
+        style={{
+          width: '28px', height: '28px', borderRadius: '50%', overflow: 'hidden',
+          border: '2px dashed var(--color-border)', flexShrink: 0, position: 'relative', display: 'flex',
+        }}
+      >
+        <input
+          type="color"
+          value={value || defaultHex}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ position: 'absolute', inset: '-4px', border: 'none', padding: 0, cursor: 'pointer' }}
+        />
+      </label>
+    </div>
+  )
+}
+
+const InterfaceTab = () => {
+  const { resolvedTheme, toggleTheme } = useTheme()
+  const [sidebarPosition, setSidebarPosition] = useSidebarPosition()
+  const [ordersView, setOrdersView] = useOrdersView()
+  const [accentColor, setAccentColor] = useAccentColor()
+  const [shopAccentColor, setShopAccentColor] = useShopAccentColor()
+
+  return (
+    <div className="glass-panel" style={{ padding: '20px' }}>
+      <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem', marginBottom: '4px' }}>Интерфейс</h3>
+      <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '4px' }}>
+        Личные настройки отображения — хранятся в этом браузере, у каждого сотрудника свои.
+      </p>
+
+      <OptionRow label="Тема" hint="Светлая или тёмная оформление интерфейса.">
+        <SegmentedControl
+          value={resolvedTheme}
+          onChange={(v) => { if (v !== resolvedTheme) toggleTheme() }}
+          options={[
+            { value: 'light', label: 'Светлая', icon: Sun },
+            { value: 'dark', label: 'Тёмная', icon: Moon },
+          ]}
+        />
+      </OptionRow>
+
+      <OptionRow label="Положение меню" hint="Боковая панель слева или горизонтальное меню сверху. На мобильных всегда боковое выезжающее меню.">
+        <SegmentedControl
+          value={sidebarPosition}
+          onChange={setSidebarPosition}
+          options={[
+            { value: 'side', label: 'Сбоку', icon: PanelLeft },
+            { value: 'top', label: 'Сверху', icon: PanelTop },
+          ]}
+        />
+      </OptionRow>
+
+      <OptionRow label="Вид заявок по умолчанию" hint="Канбан-доска или таблица со списком — переключатель также доступен прямо на странице «Заявки».">
+        <SegmentedControl
+          value={ordersView}
+          onChange={setOrdersView}
+          options={[
+            { value: 'kanban', label: 'Канбан', icon: LayoutDashboard },
+            { value: 'list', label: 'Список', icon: List },
+          ]}
+        />
+      </OptionRow>
+
+      <OptionRow label="Акцент кнопок" hint="Цвет основных кнопок и активных элементов в режиме «Сервис».">
+        <AccentSwatches value={accentColor} onChange={setAccentColor} />
+      </OptionRow>
+
+      <OptionRow label="Акцент кнопок в магазине" hint="Отдельный цвет для режима «Магазин» — не связан с акцентом «Сервиса» выше.">
+        <AccentSwatches value={shopAccentColor} onChange={setShopAccentColor} presets={SHOP_ACCENT_PRESETS} />
+      </OptionRow>
+
+      <p style={{ fontSize: '0.76rem', color: 'var(--color-text-muted)', paddingTop: '16px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <MonitorSmartphone size={13} /> Тема автоматически подстраивается под системную, пока вы не выберете вручную.
+      </p>
+    </div>
+  )
+}
+
+export default InterfaceTab
diff --git a/production/web/src/settings/OrderStatusesPage.jsx b/production/web/src/settings/OrderStatusesPage.jsx
new file mode 100644
index 0000000..f025cd4
--- /dev/null
+++ b/production/web/src/settings/OrderStatusesPage.jsx
@@ -0,0 +1,165 @@
+import { useState } from 'react'
+import { Plus, Trash2, Save, GripVertical, Lock } from 'lucide-react'
+import { useOrderStatuses } from '../orders/statuses'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { PERMISSION_LABELS, ALL_PERMISSIONS } from '../roles/permissionLabels'
+
+const SYSTEM_ROLE_HINTS = {
+  new: 'Статус новой заявки при создании',
+  ready: 'Запускает уведомление клиенту со ссылкой отслеживания',
+  completed: 'Списывает зарезервированные запчасти, начисляет баллы лояльности, стартует гарантию',
+  cancelled: 'Возвращает зарезервированные запчасти на склад',
+}
+
+function StatusRow({ status, onSaved, onDeleted }) {
+  const [form, setForm] = useState({
+    label: status.label, color: status.color, sort_order: status.sort_order,
+    required_permission: status.required_permission || '',
+  })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = form.label !== status.label || form.color !== status.color || form.sort_order !== status.sort_order
+    || form.required_permission !== (status.required_permission || '')
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await onSaved(status.key, form)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async () => {
+    setError('')
+    try {
+      await onDeleted(status.key)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div style={{ padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <GripVertical size={15} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+        <input
+          type="color" value={form.color} onChange={(e) => setForm((f) => ({ ...f, color: e.target.value }))}
+          style={{ width: '36px', height: '36px', padding: '2px', border: '1.5px solid var(--border-light)', borderRadius: '8px', flexShrink: 0 }}
+        />
+        <input value={form.label} onChange={(e) => setForm((f) => ({ ...f, label: e.target.value }))} style={{ ...inputStyle, flex: 2 }} />
+        <input
+          type="number" value={form.sort_order}
+          onChange={(e) => setForm((f) => ({ ...f, sort_order: Number(e.target.value) }))}
+          style={{ ...inputStyle, width: '70px' }} title="Порядок в канбане"
+        />
+        {status.system_role && (
+          <span
+            title={SYSTEM_ROLE_HINTS[status.system_role]}
+            style={{ fontSize: '0.7rem', fontWeight: 510, padding: '3px 9px', borderRadius: '50px', background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)', whiteSpace: 'nowrap' }}
+          >
+            системный
+          </span>
+        )}
+        {dirty && (
+          <button type="button" onClick={save} disabled={saving} className="btn-outline" style={{ padding: '6px 10px' }} title="Сохранить">
+            <Save size={14} />
+          </button>
+        )}
+        <button type="button" onClick={remove} style={{ background: 'none', color: 'var(--accent-red)', padding: '6px' }} title="Удалить">
+          <Trash2 size={14} />
+        </button>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px', marginLeft: '23px' }}>
+        <Lock size={13} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+        <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Кто может ставить:</span>
+        <select
+          value={form.required_permission}
+          onChange={(e) => setForm((f) => ({ ...f, required_permission: e.target.value }))}
+          style={{ ...inputStyle, width: 'auto', maxWidth: '260px', padding: '5px 8px', fontSize: '0.8rem' }}
+        >
+          <option value="">Любой сотрудник</option>
+          {ALL_PERMISSIONS.map((key) => <option key={key} value={key}>Только с правом «{PERMISSION_LABELS[key]}»</option>)}
+        </select>
+      </div>
+      {error && <p style={{ fontSize: '0.76rem', color: 'var(--accent-red)', marginTop: '6px', marginLeft: '23px' }}>{error}</p>}
+    </div>
+  )
+}
+
+function AddStatusForm({ onAdded }) {
+  const [label, setLabel] = useState('')
+  const [color, setColor] = useState('#64748b')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const submit = async (e) => {
+    e.preventDefault()
+    if (!label.trim()) { setError('Укажите название'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await onAdded(label, color)
+      setLabel('')
+      setColor('#64748b')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', marginBottom: '16px' }}>
+      <div>
+        <label style={labelStyle}>Цвет</label>
+        <input
+          type="color" value={color} onChange={(e) => setColor(e.target.value)}
+          style={{ width: '38px', height: '38px', padding: '2px', border: '1.5px solid var(--border-light)', borderRadius: '8px' }}
+        />
+      </div>
+      <div style={{ flex: 1, maxWidth: '260px' }}>
+        <label style={labelStyle}>Название</label>
+        <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Ожидание оплаты" style={inputStyle} />
+      </div>
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить статус
+      </button>
+      {error && <span style={{ fontSize: '0.78rem', color: 'var(--accent-red)', alignSelf: 'center' }}>{error}</span>}
+    </form>
+  )
+}
+
+// Owner-facing CRUD over order_statuses (internal/orderstatus) — every
+// kanban column is fully editable: rename, recolor, reorder (sort_order),
+// or delete, including the four "системный" ones. Deletion is only ever
+// blocked server-side, either because orders still reference the status
+// (move them first) or, for "new" specifically, because it's the DB
+// column's own default for every order Create() — see that package's own
+// doc comment.
+const OrderStatusesPage = () => {
+  const { rows, loading, create, update, remove } = useOrderStatuses()
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
+        Статусы канбана — можно переименовать, перекрасить, изменить порядок или удалить любой, включая системные
+        (отмечены значком). Удаление возможно только пока ни одна заявка не находится в этом статусе.
+      </p>
+      <AddStatusForm onAdded={create} />
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ padding: '4px 18px' }}>
+          {rows.length === 0 && <p style={{ padding: '16px 0', color: 'var(--text-muted)' }}>Статусов пока нет</p>}
+          {rows.map((s) => <StatusRow key={s.key} status={s} onSaved={update} onDeleted={remove} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OrderStatusesPage
diff --git a/production/web/src/settings/PcBuildPresetsPage.jsx b/production/web/src/settings/PcBuildPresetsPage.jsx
new file mode 100644
index 0000000..35c4bf8
--- /dev/null
+++ b/production/web/src/settings/PcBuildPresetsPage.jsx
@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react'
+import { Trash2, Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { PC_ALL_TYPES, PC_TYPE_LABELS } from '../pcbuilder/specFields'
+import { inputStyle } from '../orders/formStyles'
+
+// Management side of the popular-build quick-select (see
+// internal/pcbuilder/presets.go) — renaming/reordering/deleting entries
+// created either here or via "Сохранить как популярную" on a finished
+// build in /pc-configurator, both write to the same pc_build_presets
+// table. There is no "create from scratch" form here on purpose: building
+// a preset means picking real, currently-available component ids, and the
+// configurator's own picker (with compatibility checking) is already the
+// right place to do that — this page only curates what already exists.
+
+function PresetRow({ preset, onSaved, onDeleted }) {
+  const [form, setForm] = useState({ name: preset.name, sort_order: preset.sort_order })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const dirty = form.name !== preset.name || form.sort_order !== preset.sort_order
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.pcBuildPresets.update(preset.id, form)
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const remove = async () => {
+    setError('')
+    try {
+      await api.pcBuildPresets.delete(preset.id)
+      onDeleted()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const summary = PC_ALL_TYPES.filter((t) => preset.selection?.[t]).map((t) => PC_TYPE_LABELS[t]).join(', ')
+
+  return (
+    <div style={{ padding: '10px 0', borderBottom: '1px solid var(--border-light)' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, flex: 2 }} />
+        <input type="number" value={form.sort_order} onChange={(e) => setForm((f) => ({ ...f, sort_order: Number(e.target.value) }))} style={{ ...inputStyle, width: '70px' }} title="Порядок" />
+        {dirty && (
+          <button type="button" onClick={save} disabled={saving} className="btn-outline" style={{ padding: '6px 10px' }} title="Сохранить">
+            <Save size={14} />
+          </button>
+        )}
+        <button type="button" onClick={remove} style={{ background: 'none', color: 'var(--accent-red)', padding: '6px' }} title="Удалить">
+          <Trash2 size={14} />
+        </button>
+      </div>
+      <p style={{ fontSize: '0.76rem', color: 'var(--text-muted)', marginTop: '4px' }}>
+        {summary || 'Пустая сборка'}{preset.created_by_staff_name ? ` · добавил(а) ${preset.created_by_staff_name}` : ''}
+      </p>
+      {error && <span style={{ fontSize: '0.76rem', color: 'var(--accent-red)' }}>{error}</span>}
+    </div>
+  )
+}
+
+const PcBuildPresetsPage = () => {
+  const [presets, setPresets] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const reload = () => api.pcBuildPresets.list().then((p) => { setPresets(p); setLoading(false) })
+  useEffect(() => { reload() }, [])
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginBottom: '14px' }}>
+        Популярные сборки — быстрый выбор в конструкторе ПК. Добавляются кнопкой «Сохранить как популярную» на готовой сборке в /pc-configurator; здесь можно переименовать, изменить порядок показа или удалить.
+      </p>
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ padding: '4px 18px' }}>
+          {presets.length === 0 && <p style={{ padding: '16px 0', color: 'var(--text-muted)' }}>Популярных сборок пока нет</p>}
+          {presets.map((p) => <PresetRow key={p.id} preset={p} onSaved={reload} onDeleted={reload} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default PcBuildPresetsPage
diff --git a/production/web/src/settings/SectionsTab.jsx b/production/web/src/settings/SectionsTab.jsx
new file mode 100644
index 0000000..75918e1
--- /dev/null
+++ b/production/web/src/settings/SectionsTab.jsx
@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { ShoppingCart, Tags, Droplet, Route } from 'lucide-react'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+
+// Owner-facing on/off switches for feature_modules (see backend's
+// internal/featuremodules) — separate from Настройки → Модули, which
+// manages core's registry of *external* services (site/production/
+// online-store), not sections of this app itself. "Сервис" (заявки/склад/
+// касса) isn't listed — it's always on, the one thing every role can
+// always fall back to.
+const SECTIONS = [
+  { key: 'online_shop', icon: ShoppingCart, label: 'Магазин', hint: 'Продажи, витрина склада, выкуп техники, касса и аналитика магазина. Выключение убирает переключатель режима из меню.' },
+  { key: 'catalogs', icon: Tags, label: 'Справочники устройств', hint: 'Группы и бренды устройств в форме приёма заявки. Выключение откатывает форму на обычные текстовые поля.' },
+  { key: 'cartridges', icon: Droplet, label: 'Картриджи', hint: 'Заправка картриджей — отдельный канбан в разделе «Заявки».' },
+  { key: 'delivery', icon: Route, label: 'Доставка', hint: 'Курьерская доставка заявок: вкладка в карточке заявки и очередь курьера. Выключение убирает кнопки и раздел «Доставка» из меню.' },
+]
+
+function Toggle({ checked, onChange, disabled }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      style={{
+        width: '44px', height: '24px', borderRadius: '999px', position: 'relative', flexShrink: 0,
+        background: checked ? 'var(--color-accent)' : 'var(--color-border)',
+        opacity: disabled ? 0.6 : 1, cursor: disabled ? 'default' : 'pointer',
+        transition: 'background 0.15s ease',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute', top: '3px', left: checked ? '23px' : '3px',
+          width: '18px', height: '18px', borderRadius: '50%', background: '#fff',
+          transition: 'left 0.15s ease', boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
+        }}
+      />
+    </button>
+  )
+}
+
+const SectionsTab = () => {
+  const { modules, loading, setModule } = useFeatureModules()
+  const [pendingKey, setPendingKey] = useState(null)
+  const [error, setError] = useState('')
+
+  const handleToggle = async (key, next) => {
+    setPendingKey(key)
+    setError('')
+    try {
+      await setModule(key, next)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setPendingKey(null)
+    }
+  }
+
+  if (loading) return <p style={{ color: 'var(--color-text-muted)' }}>Загрузка...</p>
+
+  return (
+    <div className="glass-panel" style={{ padding: '20px' }}>
+      <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem', marginBottom: '4px' }}>Разделы</h3>
+      <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '4px' }}>
+        Отключённый раздел пропадает из меню для всех сотрудников. Данные не удаляются — можно включить обратно в любой момент.
+      </p>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.8rem', marginTop: '8px' }}>{error}</p>}
+
+      {SECTIONS.map(({ key, icon: Icon, label, hint }) => (
+        <div
+          key={key}
+          style={{
+            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px',
+            padding: '16px 0', borderBottom: '1px solid var(--color-border)', flexWrap: 'wrap',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+            <Icon size={17} style={{ marginTop: '2px', color: 'var(--color-text-muted)', flexShrink: 0 }} />
+            <div>
+              <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>{label}</p>
+              <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', marginTop: '2px' }}>{hint}</p>
+            </div>
+          </div>
+          <Toggle
+            checked={modules[key] !== false}
+            disabled={pendingKey === key}
+            onChange={(next) => handleToggle(key, next)}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default SectionsTab
diff --git a/production/web/src/settings/SettingsFields.jsx b/production/web/src/settings/SettingsFields.jsx
new file mode 100644
index 0000000..4e78a87
--- /dev/null
+++ b/production/web/src/settings/SettingsFields.jsx
@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Shared form primitives for every Settings sub-page (SettingsPage.jsx,
+// IntegrationsPage.jsx) — pulled out of what used to be one flat page
+// mixing business requisites with every API key/token/login the CRM holds,
+// so both pages render identically without copy-pasting these four.
+export function Section({ title, hint, children }) {
+  return (
+    <div className="glass-panel" style={{ padding: '20px', marginBottom: '18px' }}>
+      <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem', marginBottom: '4px' }}>{title}</h3>
+      {hint && <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '14px' }}>{hint}</p>}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '10px' }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function Toggle({ label, field, checked, onChange }) {
+  return (
+    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.88rem' }}>
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(field, e.target.checked)} />
+      {label}
+    </label>
+  )
+}
+
+export function NumberField({ label, field, value, onChange, placeholder }) {
+  return (
+    <div>
+      <label style={labelStyle}>{label}</label>
+      <input
+        type="number"
+        min="0"
+        max="3650"
+        value={value}
+        onChange={(e) => onChange(field, e.target.value === '' ? 0 : Number(e.target.value))}
+        placeholder={placeholder}
+        style={inputStyle}
+      />
+    </div>
+  )
+}
+
+export function Field({ label, field, value, onChange, secret, placeholder }) {
+  const [reveal, setReveal] = useState(false)
+  return (
+    <div>
+      <label style={labelStyle}>{label}</label>
+      <div style={{ position: 'relative' }}>
+        <input
+          type={secret && !reveal ? 'password' : 'text'}
+          value={value}
+          onChange={(e) => onChange(field, e.target.value)}
+          placeholder={placeholder}
+          style={{ ...inputStyle, paddingRight: secret ? '38px' : undefined }}
+          autoComplete="off"
+        />
+        {secret && (
+          <button
+            type="button"
+            onClick={() => setReveal((r) => !r)}
+            style={{ position: 'absolute', right: '8px', top: '50%', transform: 'translateY(-50%)', background: 'none', color: 'var(--text-muted)', padding: '4px' }}
+            aria-label={reveal ? 'Скрыть значение' : 'Показать значение'}
+          >
+            {reveal ? <EyeOff size={15} /> : <Eye size={15} />}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// See useSettingsForm.js for the shared load/set/save hook the two
+// Settings sub-pages use alongside this footer.
+export function SaveFooter({ error, saving, saved, form, onSave }) {
+  return (
+    <>
+      {error && <p style={{ color: 'var(--accent-red)', marginBottom: '10px' }}>{error}</p>}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <button type="button" onClick={onSave} disabled={saving} className="btn-primary" style={{ padding: '10px 20px', fontSize: '0.88rem' }}>
+          {saving ? 'Сохраняем...' : 'Сохранить'}
+        </button>
+        {saved && <span style={{ fontSize: '0.82rem', color: 'var(--accent-green)' }}>Сохранено</span>}
+        {form.updated_at && (
+          <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+            Последнее изменение: {new Date(form.updated_at).toLocaleString('ru-RU')}
+            {form.updated_by_staff_name ? ` · ${form.updated_by_staff_name}` : ''}
+          </span>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/production/web/src/settings/SettingsLayout.jsx b/production/web/src/settings/SettingsLayout.jsx
new file mode 100644
index 0000000..ddb9393
--- /dev/null
+++ b/production/web/src/settings/SettingsLayout.jsx
@@ -0,0 +1,80 @@
+import { NavLink, Outlet, useLocation, Navigate } from 'react-router-dom'
+import { useAuth } from '../auth/AuthContext'
+import { useFeatureModules } from '../hooks/useFeatureModules'
+import { SETTINGS_TABS, SETTINGS_GROUPS } from './settingsTabs'
+
+// Tab shell for everything that used to be a flat sidebar submenu
+// (Sidebar.jsx's old SETTINGS_GROUP) — one page, one URL prefix
+// (/settings/*), tabs instead of separate nav entries. Each tab keeps its
+// own component/route/permission untouched; this only changes how they're
+// reached. Permission-filtered the same way buildNavEntries filters the
+// sidebar, so a role missing e.g. "modules" simply never sees that tab —
+// and moduleKey-tagged tabs (Справочники) disappear the same way when an
+// owner turns that module off, redirecting away via the same isVisible
+// fallback below.
+//
+// Persistent two-column layout — a standing nav rail on the left (all
+// groups/tabs visible at once, nothing to expand) and content on the
+// right. Replaced an earlier collapsible-accordion-of-pills version that,
+// collapsed by default, read as a stack of dropdown selects rather than a
+// real settings menu. The rail reuses Sidebar.jsx's own active-row idiom
+// (accent-soft fill + inset accent-colored left edge) so this reads as
+// the same app, not a bolted-on second nav language.
+const SettingsLayout = () => {
+  const { staff } = useAuth()
+  const { modules } = useFeatureModules()
+  const location = useLocation()
+
+  const hasPermission = (tab) => {
+    if (tab.moduleKey && modules[tab.moduleKey] === false) return false
+    return !tab.permission || staff?.permissions?.includes(tab.permission)
+  }
+  const visibleTabs = SETTINGS_TABS.filter(hasPermission)
+
+  const activeSubpath = location.pathname.replace(/^\/settings\/?/, '')
+  const isVisible = visibleTabs.some((t) => t.path === activeSubpath)
+
+  if (visibleTabs.length === 0) {
+    return <p style={{ color: 'var(--color-text-muted)' }}>Нет доступных разделов настроек.</p>
+  }
+  if (!isVisible) {
+    const fallback = visibleTabs[0]
+    return <Navigate to={fallback.path ? `/settings/${fallback.path}` : '/settings'} replace />
+  }
+
+  return (
+    <div className="settings-shell">
+      <nav className="glass-panel settings-rail" aria-label="Разделы настроек">
+        {SETTINGS_GROUPS.map((group) => {
+          const groupTabs = visibleTabs.filter((t) => t.group === group.key)
+          if (groupTabs.length === 0) return null
+          return (
+            <div key={group.key} className="settings-rail-group">
+              <div className="settings-rail-group-label">{group.label}</div>
+              {groupTabs.map((tab) => {
+                const to = tab.path ? `/settings/${tab.path}` : '/settings'
+                const Icon = tab.icon
+                return (
+                  <NavLink
+                    key={tab.path}
+                    to={to}
+                    end={tab.path === ''}
+                    className="settings-rail-item"
+                  >
+                    <Icon size={16} style={{ flexShrink: 0 }} />
+                    {tab.label}
+                  </NavLink>
+                )
+              })}
+            </div>
+          )
+        })}
+      </nav>
+      <div className="settings-content">
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+
+export default SettingsLayout
diff --git a/production/web/src/settings/SettingsPage.jsx b/production/web/src/settings/SettingsPage.jsx
new file mode 100644
index 0000000..7c0aa45
--- /dev/null
+++ b/production/web/src/settings/SettingsPage.jsx
@@ -0,0 +1,57 @@
+import { useEffect } from 'react'
+import * as api from '../lib/api'
+import { Section, Toggle, NumberField, Field, SaveFooter } from './SettingsFields'
+import { useSettingsForm } from './useSettingsForm'
+
+// Owner-only page (gated by Sidebar's roles + backend's RequireRole) for
+// business/workflow configuration that used to be a .env var an owner
+// couldn't touch without a redeploy: business requisites (PDF documents),
+// loyalty, discount approval, warranty defaults. Every API key/token/login
+// (AI, Telegram, IMEI, SMS, KkmServer, Diax Pro, ...) lives on the
+// "Интеграции" tab instead (see IntegrationsPage.jsx) — this page is only
+// business-identity and workflow toggles, nothing you'd call a credential.
+// True infrastructure secrets (JWT_SECRET, DB/MinIO credentials, module
+// tokens) are deliberately NOT here — see internal/settings' package doc
+// for why those stay .env.
+const SettingsPage = () => {
+  const { form, loading, error, saving, saved, load, set, save } = useSettingsForm(api)
+  useEffect(() => { load() }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (error && !form) return <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+  if (!form) return null
+
+  return (
+    <div>
+      <Section title="Реквизиты бизнеса" hint="Используются в PDF-документах (Счёт/Акт). Необязательны — пустые поля просто останутся пустыми в документе.">
+        <Field label="Название" field="business_name" value={form.business_name} onChange={set} />
+        <Field label="ИНН" field="business_inn" value={form.business_inn} onChange={set} />
+        <Field label="КПП" field="business_kpp" value={form.business_kpp} onChange={set} />
+        <Field label="Телефон" field="business_phone" value={form.business_phone} onChange={set} />
+        <Field label="Адрес" field="business_address" value={form.business_address} onChange={set} />
+        <Field label="Банк" field="business_bank_name" value={form.business_bank_name} onChange={set} />
+        <Field label="Расчётный счёт" field="business_bank_account" value={form.business_bank_account} onChange={set} />
+        <Field label="БИК" field="business_bank_bik" value={form.business_bank_bik} onChange={set} />
+        <Field label="Корр. счёт" field="business_bank_corr_account" value={form.business_bank_corr_account} onChange={set} />
+      </Section>
+
+      <Section title="Программа лояльности" hint="Баллы начисляются автоматически при переводе заказа/партии в «Выдано»: процент от итоговой цены (заказ) или суммы позиций (заправка картриджей). 1 балл = 1 ₽ скидки. Списание и ручная корректировка — с карточки клиента.">
+        <Toggle label="Включить программу лояльности" field="loyalty_enabled" checked={form.loyalty_enabled} onChange={set} />
+        <Field label="Процент начисления" field="loyalty_accrual_percent" value={form.loyalty_accrual_percent} onChange={set} placeholder="5" />
+      </Section>
+
+      <Section title="Согласование скидок" hint="Если сотрудник без права «Согласование скидок» (см. Сотрудники → Роли) ставит итоговую цену ниже оценки больше чем на указанный процент, цена не применяется сразу — заявка встаёт на согласование, пока кто-то с этим правом не подтвердит или не отклонит скидку на вкладке «Оплата».">
+        <Toggle label="Включить согласование" field="discount_approval_enabled" checked={form.discount_approval_enabled} onChange={set} />
+        <Field label="Порог, %" field="discount_approval_threshold_percent" value={form.discount_approval_threshold_percent} onChange={set} placeholder="15" />
+      </Section>
+
+      <Section title="Гарантия на работы" hint="Срок по умолчанию для гарантии на выполненные работы. Проставляется автоматически при переводе заказа в «Выдано», если дата гарантии ещё не указана вручную. 0 — не проставлять автоматически (только ручной ввод в карточке заказа).">
+        <NumberField label="Срок по умолчанию, дней" field="default_warranty_days" value={form.default_warranty_days} onChange={set} placeholder="30" />
+      </Section>
+
+      <SaveFooter error={error} saving={saving} saved={saved} form={form} onSave={save} />
+    </div>
+  )
+}
+
+export default SettingsPage
diff --git a/production/web/src/settings/UpdatesTab.jsx b/production/web/src/settings/UpdatesTab.jsx
new file mode 100644
index 0000000..db8ff5d
--- /dev/null
+++ b/production/web/src/settings/UpdatesTab.jsx
@@ -0,0 +1,252 @@
+import { useEffect, useState } from 'react'
+import { Sparkles, Wrench, RefreshCw, PartyPopper, GitPullRequest, CheckCircle2, XCircle, Clock } from 'lucide-react'
+import * as api from '../lib/api'
+import { useAuth } from '../auth/AuthContext'
+
+// Category → icon/color mapping. Keys must match CHANGELOG.md's "### "
+// subsection headers exactly (see backend/internal/changelog's parser) —
+// an unrecognized category still renders, just with the neutral fallback,
+// so a typo'd header in the markdown degrades gracefully instead of
+// vanishing.
+const CATEGORY_STYLE = {
+  'Добавлено': { icon: Sparkles, color: 'var(--accent-green, #2fae60)' },
+  'Исправлено': { icon: Wrench, color: 'var(--accent-orange, #d98a1f)' },
+  'Изменено': { icon: RefreshCw, color: 'var(--color-accent-fg)' },
+}
+const FALLBACK_STYLE = { icon: RefreshCw, color: 'var(--color-text-muted)' }
+
+function formatDate(raw) {
+  const d = new Date(raw)
+  if (Number.isNaN(d.getTime())) return raw
+  return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+function ReleaseEntry({ entry, isLatest, isLast }) {
+  return (
+    <div style={{ display: 'flex', gap: '18px', position: 'relative' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0, width: '14px' }}>
+        <div style={{
+          width: '14px', height: '14px', borderRadius: '50%', flexShrink: 0, marginTop: '4px',
+          background: isLatest ? 'var(--color-accent)' : 'var(--color-surface-sunken)',
+          border: `2px solid ${isLatest ? 'var(--color-accent)' : 'var(--color-border)'}`,
+          boxShadow: isLatest ? '0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent)' : 'none',
+        }} />
+        {!isLast && <div style={{ flex: 1, width: '1.5px', background: 'var(--color-border)', marginTop: '4px' }} />}
+      </div>
+
+      <div style={{ paddingBottom: isLast ? 0 : '32px', flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}>
+          <h4 style={{ fontFamily: 'var(--font-heading)', fontSize: '0.95rem', fontWeight: 590 }}>
+            {formatDate(entry.date)}
+          </h4>
+          {isLatest && (
+            <span style={{
+              fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.03em', textTransform: 'uppercase',
+              padding: '2px 8px', borderRadius: '99px', background: 'var(--color-accent)', color: 'var(--color-text-inverse)',
+            }}>
+              Новое
+            </span>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
+          {entry.categories.map((cat, i) => {
+            const style = CATEGORY_STYLE[cat.name] || FALLBACK_STYLE
+            const Icon = style.icon
+            return (
+              <div key={i}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px', color: style.color }}>
+                  <Icon size={14} />
+                  <span style={{ fontSize: '0.8rem', fontWeight: 560 }}>{cat.name}</span>
+                </div>
+                <ul style={{ display: 'flex', flexDirection: 'column', gap: '5px', paddingLeft: '20px' }}>
+                  {cat.items.map((item, j) => (
+                    <li key={j} style={{ fontSize: '0.85rem', color: 'var(--color-text)', lineHeight: 1.5, listStyleType: 'disc' }}>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatDateTime(raw) {
+  const d = new Date(raw)
+  if (Number.isNaN(d.getTime())) return raw
+  return d.toLocaleString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+// Owner-only — internal/selfupdate 503s for anyone else's role anyway (the
+// route is gated with auth.RequireRole("owner"), not the granular
+// permissions system, see that handler's own doc comment), so this panel
+// doesn't even render the "Проверить обновления"/"Обновить" controls for
+// other roles rather than showing them a button that would just 403.
+// Absent entirely (not just disabled) when DEPLOY_AGENT_TOKEN isn't
+// configured on this deployment — check()/history() both 503 in that case,
+// caught below and treated as "nothing to show here," not an error banner.
+function DeployPanel() {
+  const [pending, setPending] = useState(null) // null = not checked yet
+  const [history, setHistory] = useState(null)
+  const [checking, setChecking] = useState(false)
+  const [applying, setApplying] = useState(false)
+  const [error, setError] = useState('')
+  const [available, setAvailable] = useState(true) // flips false when deploy-agent isn't configured (503), hides the panel
+
+  const loadHistory = () => api.selfupdate.history().then(setHistory).catch((err) => {
+    if (err.status === 503) setAvailable(false)
+    else setError(err.message)
+  })
+  useEffect(() => { loadHistory() }, [])
+
+  const check = async () => {
+    setChecking(true)
+    setError('')
+    try {
+      const res = await api.selfupdate.check()
+      setPending(res.commits || [])
+    } catch (err) {
+      if (err.status === 503) setAvailable(false)
+      else setError(err.message)
+    } finally {
+      setChecking(false)
+    }
+  }
+
+  const apply = async () => {
+    if (!window.confirm('Обновить и перезапустить сервис сейчас? CRM будет недоступна на короткое время.')) return
+    setApplying(true)
+    setError('')
+    try {
+      const res = await api.selfupdate.apply()
+      setPending([])
+      await loadHistory()
+      if (res.applied === false) window.alert(res.message || 'Уже актуальная версия')
+    } catch (err) {
+      setError(err.message)
+      await loadHistory()
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  if (!available) return null
+
+  return (
+    <div className="glass-panel" style={{ padding: '20px', marginBottom: '20px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }}>
+        <GitPullRequest size={18} style={{ color: 'var(--color-accent-fg)' }} />
+        <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem' }}>Обновление системы</h3>
+      </div>
+      <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '16px' }}>
+        Забирает изменения из git и пересобирает сервис. Только для владельца.
+      </p>
+
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '14px', flexWrap: 'wrap' }}>
+        <button type="button" onClick={check} disabled={checking || applying} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+          <RefreshCw size={14} style={checking ? { animation: 'spin 0.7s linear infinite' } : undefined} />
+          {checking ? 'Проверяем...' : 'Проверить обновления'}
+        </button>
+        {pending && pending.length > 0 && (
+          <button type="button" onClick={apply} disabled={applying} className="btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+            {applying ? 'Обновляем (может занять пару минут)...' : `Обновить (${pending.length})`}
+          </button>
+        )}
+      </div>
+
+      {error && <p style={{ fontSize: '0.85rem', color: 'var(--accent-red, #d64545)', marginBottom: '14px', whiteSpace: 'pre-wrap' }}>{error}</p>}
+
+      {pending !== null && pending.length === 0 && !error && (
+        <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)', marginBottom: '14px' }}>Актуальная версия.</p>
+      )}
+
+      {pending && pending.length > 0 && (
+        <ul style={{ marginBottom: '16px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          {pending.map((c) => (
+            <li key={c.hash} style={{ fontSize: '0.82rem', color: 'var(--color-text)', listStyle: 'none', display: 'flex', gap: '8px' }}>
+              <span style={{ color: 'var(--color-text-muted)', fontFamily: 'monospace' }}>{c.hash.slice(0, 7)}</span>
+              <span>{c.subject}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {history && history.length > 0 && (
+        <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: '12px' }}>
+          <p style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: '8px' }}>
+            История обновлений
+          </p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {history.map((h) => (
+              <div key={h.id} style={{ fontSize: '0.8rem', display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+                {h.success ? <CheckCircle2 size={14} style={{ color: 'var(--accent-green, #2fae60)', flexShrink: 0, marginTop: '2px' }} /> : <XCircle size={14} style={{ color: 'var(--accent-red, #d64545)', flexShrink: 0, marginTop: '2px' }} />}
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--color-text-muted)' }}>
+                    <Clock size={11} />
+                    {formatDateTime(h.started_at)} · {h.triggered_by_staff_name}
+                  </div>
+                  {h.success && !h.applied && <p style={{ color: 'var(--color-text-muted)' }}>Уже актуальная версия</p>}
+                  {h.success && h.applied && <p>{JSON.parse(h.commits || '[]').length} коммит(ов) применено</p>}
+                  {!h.success && <p style={{ color: 'var(--accent-red, #d64545)', whiteSpace: 'pre-wrap' }}>{h.error_message}</p>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const UpdatesTab = () => {
+  const { staff } = useAuth()
+  const [entries, setEntries] = useState(null) // null = loading
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    api.changelog.list()
+      .then((data) => { if (!cancelled) setEntries(data.entries || []) })
+      .catch(() => { if (!cancelled) setError('Не удалось загрузить список изменений.') })
+    return () => { cancelled = true }
+  }, [])
+
+  return (
+    <>
+      {staff?.role === 'owner' && <DeployPanel />}
+      <div className="glass-panel" style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }}>
+        <PartyPopper size={18} style={{ color: 'var(--color-accent-fg)' }} />
+        <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem' }}>Обновления</h3>
+      </div>
+      <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)', marginBottom: '28px' }}>
+        Что изменилось в CRM — по мере выхода обновлений.
+      </p>
+
+      {error && <p style={{ fontSize: '0.85rem', color: 'var(--accent-red, #d64545)' }}>{error}</p>}
+
+      {entries === null && !error && (
+        <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>Загрузка…</p>
+      )}
+
+      {entries !== null && entries.length === 0 && !error && (
+        <p style={{ fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>Пока нет ни одной записи.</p>
+      )}
+
+      {entries !== null && entries.length > 0 && (
+        <div>
+          {entries.map((entry, i) => (
+            <ReleaseEntry key={i} entry={entry} isLatest={i === 0} isLast={i === entries.length - 1} />
+          ))}
+        </div>
+      )}
+    </div>
+    </>
+  )
+}
+
+export default UpdatesTab
diff --git a/production/web/src/settings/settingsTabs.js b/production/web/src/settings/settingsTabs.js
new file mode 100644
index 0000000..2cab040
--- /dev/null
+++ b/production/web/src/settings/settingsTabs.js
@@ -0,0 +1,61 @@
+import { Settings, MonitorSmartphone, Users, KeyRound, ListChecks, Tags, Hammer, FileText, Blocks, ToggleLeft, Columns3, LayoutTemplate, Sparkles, Star, Plug } from 'lucide-react'
+import SettingsPage from './SettingsPage'
+import IntegrationsPage from './IntegrationsPage'
+import InterfaceTab from './InterfaceTab'
+import UpdatesTab from './UpdatesTab'
+import SectionsTab from './SectionsTab'
+import OrderStatusesPage from './OrderStatusesPage'
+import PcBuildPresetsPage from './PcBuildPresetsPage'
+import StaffPage from '../staff/StaffPage'
+import RolesPage from '../roles/RolesPage'
+import OrderFieldsPage from '../orderfields/OrderFieldsPage'
+import CatalogsPage from '../catalogs/CatalogsPage'
+import ServicesPage from '../servicecatalog/ServicesPage'
+import DocumentTemplatesPage from '../doctemplates/DocumentTemplatesPage'
+import ModulesPage from '../modules/ModulesPage'
+import SiteBuilderPage from '../site/SiteBuilderPage'
+
+// Single source of truth for both the tab bar (SettingsLayout) and the
+// nested routes under /settings/* (App.jsx) — same "one array drives two
+// renderers" shape as layout/navItems.js's buildNavEntries, so tabs and
+// routes can never drift out of sync. path: '' is the index tab.
+// permission: undefined means every role that can reach /settings sees it
+// (Интерфейс is personal display prefs, not an owner-only concern).
+//
+// moduleKey ties a tab to feature_modules (see hooks/useFeatureModules.js) —
+// SettingsLayout hides the tab (and redirects away from its route) the same
+// way it already hides permission-gated tabs, when that module is off.
+// "Разделы" itself has no moduleKey — you can't toggle away the page that
+// does the toggling.
+//
+// group ties a tab to one of SETTINGS_GROUPS below — purely a rendering
+// grouping (SettingsLayout clusters tabs under a label instead of one long
+// horizontal-scroll strip), not a routing or permission concept, so it
+// never needs touching if a tab moves permission tiers.
+export const SETTINGS_TABS = [
+  { path: '', label: 'Общие', icon: Settings, permission: 'settings', group: 'general', Component: SettingsPage },
+  { path: 'integrations', label: 'Интеграции', icon: Plug, permission: 'settings', group: 'general', Component: IntegrationsPage },
+  { path: 'interface', label: 'Интерфейс', icon: MonitorSmartphone, group: 'general', Component: InterfaceTab },
+  { path: 'updates', label: 'Обновления', icon: Sparkles, group: 'general', Component: UpdatesTab },
+  { path: 'sections', label: 'Разделы', icon: ToggleLeft, permission: 'settings', group: 'workflow', Component: SectionsTab },
+  { path: 'order-statuses', label: 'Статусы канбана', icon: Columns3, permission: 'catalogs', group: 'workflow', Component: OrderStatusesPage },
+  { path: 'order-fields', label: 'Поля приёмки', icon: ListChecks, permission: 'order_fields', group: 'workflow', Component: OrderFieldsPage },
+  { path: 'catalogs', label: 'Справочники', icon: Tags, permission: 'catalogs', moduleKey: 'catalogs', group: 'catalog', Component: CatalogsPage },
+  { path: 'services', label: 'Прайс-лист работ', icon: Hammer, permission: 'services', group: 'catalog', Component: ServicesPage },
+  { path: 'pc-build-presets', label: 'Популярные сборки', icon: Star, permission: 'catalogs', group: 'catalog', Component: PcBuildPresetsPage },
+  { path: 'document-templates', label: 'Шаблоны документов', icon: FileText, permission: 'document_templates', group: 'catalog', Component: DocumentTemplatesPage },
+  { path: 'staff', label: 'Сотрудники', icon: Users, permission: 'staff', group: 'access', Component: StaffPage },
+  { path: 'roles', label: 'Роли', icon: KeyRound, permission: 'staff', group: 'access', Component: RolesPage },
+  { path: 'modules', label: 'Модули', icon: Blocks, permission: 'modules', group: 'system', Component: ModulesPage },
+  { path: 'site-builder', label: 'Конструктор сайта', icon: LayoutTemplate, permission: 'settings', group: 'system', Component: SiteBuilderPage },
+]
+
+// Order here is display order — groups render top to bottom, tabs within a
+// group keep SETTINGS_TABS' own relative order.
+export const SETTINGS_GROUPS = [
+  { key: 'general', label: 'Общие' },
+  { key: 'workflow', label: 'Рабочий процесс' },
+  { key: 'catalog', label: 'Каталоги и документы' },
+  { key: 'access', label: 'Доступ' },
+  { key: 'system', label: 'Система' },
+]
diff --git a/production/web/src/settings/useSettingsForm.js b/production/web/src/settings/useSettingsForm.js
new file mode 100644
index 0000000..42e71e9
--- /dev/null
+++ b/production/web/src/settings/useSettingsForm.js
@@ -0,0 +1,48 @@
+import { useState } from 'react'
+
+// Shared load-form-save shell for every Settings sub-page (SettingsPage.jsx,
+// IntegrationsPage.jsx) — both fetch the *whole* settings object
+// (api.settings.get()) even though each only renders a subset of its
+// fields, and save the whole object back unmodified-fields-included (the
+// backend's partial-update COALESCE means re-sending a field's
+// already-current value is a harmless no-op) — so saving from
+// "Интеграции" can never blank out a business-requisites field it never
+// rendered, and vice versa.
+export function useSettingsForm(api) {
+  const [form, setForm] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+
+  const load = async () => {
+    try {
+      setForm(await api.settings.get())
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const set = (field, value) => {
+    setForm((f) => ({ ...f, [field]: value }))
+    setSaved(false)
+  }
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      const data = await api.settings.update(form)
+      setForm(data)
+      setSaved(true)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return { form, loading, error, saving, saved, load, set, save }
+}
diff --git a/production/web/src/shifts/ShiftPromptModal.jsx b/production/web/src/shifts/ShiftPromptModal.jsx
new file mode 100644
index 0000000..fb6c544
--- /dev/null
+++ b/production/web/src/shifts/ShiftPromptModal.jsx
@@ -0,0 +1,48 @@
+import { CalendarCheck } from 'lucide-react'
+import { useShiftPrompt } from './useShiftPrompt'
+
+// No backdrop-click/X dismissal, unlike every other modal in this app —
+// deliberate: a shift count an owner is about to run payroll off of is
+// only trustworthy if every staff member actually answers, not skips past
+// it. Mounted once in AdminLayout so it's the same prompt regardless of
+// which page a staff member happens to be on when it fires.
+const ShiftPromptModal = () => {
+  const { open, saving, answer } = useShiftPrompt()
+  if (!open) return null
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300 }}>
+      <div className="glass-panel modal-panel" style={{ padding: '32px', width: '100%', maxWidth: '360px', margin: '20px', textAlign: 'center' }}>
+        <span style={{
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          width: '52px', height: '52px', borderRadius: '14px', marginBottom: '16px',
+          background: 'var(--color-accent-soft)', color: 'var(--color-accent-fg)',
+        }}>
+          <CalendarCheck size={26} />
+        </span>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem', marginBottom: '8px' }}>
+          Вы сегодня на смене?
+        </h2>
+        <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '24px' }}>
+          Нужно для учёта рабочих смен.
+        </p>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            type="button" disabled={saving} onClick={() => answer(false)}
+            className="btn-outline" style={{ flex: 1, padding: '12px' }}
+          >
+            Нет
+          </button>
+          <button
+            type="button" disabled={saving} onClick={() => answer(true)}
+            className="btn-primary" style={{ flex: 1, padding: '12px' }}
+          >
+            {saving ? '...' : 'Да, на смене'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShiftPromptModal
diff --git a/production/web/src/shifts/ShiftsPage.jsx b/production/web/src/shifts/ShiftsPage.jsx
new file mode 100644
index 0000000..e38f872
--- /dev/null
+++ b/production/web/src/shifts/ShiftsPage.jsx
@@ -0,0 +1,188 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Plus, Check, X as XIcon } from 'lucide-react'
+import * as api from '../lib/api'
+import { useAssignableStaff } from '../orders/useAssignableStaff'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { localDateString } from '../lib/dateRange'
+import Modal from '../ui/Modal'
+
+const selectStyle = { ...inputStyle, width: 'auto', padding: '10px 14px' }
+
+function BackfillForm({ staffList, onSaved }) {
+  const [staffId, setStaffId] = useState('')
+  const [date, setDate] = useState(localDateString())
+  const [isWorking, setIsWorking] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    const staff = staffList.find((s) => s.id === staffId)
+    if (!staff) { setError('Выберите сотрудника'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.shifts.answerFor(staffId, { staff_name: staff.name, shift_date: date, is_working: isWorking })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div>
+        <label style={labelStyle}>Сотрудник</label>
+        <select value={staffId} onChange={(e) => setStaffId(e.target.value)} style={{ ...inputStyle, width: '100%' }} required>
+          <option value="">— выберите —</option>
+          {staffList.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label style={labelStyle}>Дата</label>
+        <input type="date" value={date} onChange={(e) => setDate(e.target.value)} style={{ ...inputStyle, width: '100%' }} required />
+      </div>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.85rem' }}>
+        <input type="checkbox" checked={isWorking} onChange={(e) => setIsWorking(e.target.checked)} />
+        На смене в этот день
+      </label>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', alignSelf: 'flex-start' }}>
+        {saving ? 'Сохраняем...' : 'Отметить'}
+      </button>
+    </form>
+  )
+}
+
+// Owner/manager view of internal/shifts' log — every day a staff member
+// answered "on shift or not", plus a per-staff confirmed-shift count for
+// the filtered range (what an owner reads before typing shifts_count into
+// a payroll run — see PayrollRunsSection's own CreateRunModal, still a
+// manual field, this is the source to check against, not an autofill).
+const ShiftsPage = () => {
+  const [staffId, setStaffId] = useState('')
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [rows, setRows] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showBackfill, setShowBackfill] = useState(false)
+  const staffList = useAssignableStaff()
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const cleaned = Object.fromEntries(
+        Object.entries({ staff_id: staffId, from, to }).filter(([, v]) => v !== '')
+      )
+      setRows((await api.shifts.list(cleaned)) || [])
+    } finally {
+      setLoading(false)
+    }
+  }, [staffId, from, to])
+
+  useEffect(() => { load() }, [load])
+
+  const counts = {}
+  for (const r of rows) {
+    if (!r.is_working) continue
+    counts[r.staff_name] = (counts[r.staff_name] || 0) + 1
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div>
+          <label style={labelStyle}>Сотрудник</label>
+          <select value={staffId} onChange={(e) => setStaffId(e.target.value)} style={selectStyle}>
+            <option value="">Все</option>
+            {staffList.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+        </div>
+        <div>
+          <label style={labelStyle}>С</label>
+          <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} style={selectStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>По</label>
+          <input type="date" value={to} onChange={(e) => setTo(e.target.value)} style={selectStyle} />
+        </div>
+        <button onClick={() => setShowBackfill(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px', marginLeft: 'auto' }}>
+          <Plus size={15} /> Отметить смену
+        </button>
+      </div>
+
+      {Object.keys(counts).length > 0 && (
+        <div style={{ display: 'flex', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+          {Object.entries(counts).map(([name, count]) => (
+            <div key={name} className="glass-panel" style={{ padding: '14px 20px', flex: 1, minWidth: '160px' }}>
+              <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '4px' }}>{name}</p>
+              <p style={{ fontSize: '1.3rem', fontWeight: 590, fontFamily: 'var(--font-heading)' }}>
+                {count} {pluralShifts(count)}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {rows.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Записей не найдено</p>}
+          {rows.map((r) => (
+            <div
+              key={r.id}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                padding: '12px 18px', borderBottom: '1px solid var(--border-light)',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <span style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: '26px', height: '26px', borderRadius: '8px', flexShrink: 0,
+                  background: r.is_working ? 'var(--color-success-soft)' : 'var(--color-danger-soft)',
+                  color: r.is_working ? 'var(--color-success)' : 'var(--color-danger)',
+                }}>
+                  {r.is_working ? <Check size={14} /> : <XIcon size={14} />}
+                </span>
+                <div>
+                  <p style={{ fontWeight: 510, fontSize: '0.9rem' }}>{r.staff_name}</p>
+                  <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                    {new Date(r.shift_date).toLocaleDateString('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' })}
+                  </p>
+                </div>
+              </div>
+              <div style={{ textAlign: 'right' }}>
+                <p style={{ fontSize: '0.85rem', fontWeight: 510, color: r.is_working ? 'var(--color-success)' : 'var(--color-danger)' }}>
+                  {r.is_working ? 'На смене' : 'Не на смене'}
+                </p>
+                <p style={{ fontSize: '0.74rem', color: 'var(--text-muted)' }}>
+                  отмечено {new Date(r.answered_at).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showBackfill && (
+        <Modal title="Отметить смену" onClose={() => setShowBackfill(false)} maxWidth="380px">
+          <BackfillForm staffList={staffList} onSaved={() => { load(); setShowBackfill(false) }} />
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+function pluralShifts(n) {
+  const mod10 = n % 10, mod100 = n % 100
+  if (mod10 === 1 && mod100 !== 11) return 'смена'
+  if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100)) return 'смены'
+  return 'смен'
+}
+
+export default ShiftsPage
diff --git a/production/web/src/shifts/useShiftPrompt.js b/production/web/src/shifts/useShiftPrompt.js
new file mode 100644
index 0000000..bcb6dae
--- /dev/null
+++ b/production/web/src/shifts/useShiftPrompt.js
@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+import { localDateString } from '../lib/dateRange'
+
+const PROMPT_HOUR = 8
+
+// Decides whether to show "Вы сегодня на смене?" — once per staff member
+// per local calendar day, only from 08:00 local time onward (matches
+// opening hours; nobody should be asked before the shop is even open).
+// Checked once on mount (AdminLayout mounts this for every logged-in
+// staff on every page) rather than polling — if a staff member is using
+// the app before 8am and stays on the same page past it, they'll pick it
+// up next navigation/reload, which is how every other "check on mount"
+// hook in this app already behaves (see useFeatureModules).
+export function useShiftPrompt() {
+  const [open, setOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const today = localDateString()
+
+  useEffect(() => {
+    if (new Date().getHours() < PROMPT_HOUR) return
+    let cancelled = false
+    api.shifts.mine(today).then((existing) => {
+      if (!cancelled && !existing) setOpen(true)
+    }).catch(() => {})
+    return () => { cancelled = true }
+  }, [today])
+
+  const answer = useCallback(async (isWorking) => {
+    setSaving(true)
+    try {
+      await api.shifts.answer({ shift_date: today, is_working: isWorking })
+      setOpen(false)
+    } finally {
+      setSaving(false)
+    }
+  }, [today])
+
+  return { open, saving, answer }
+}
diff --git a/production/web/src/site/SiteBuilderPage.jsx b/production/web/src/site/SiteBuilderPage.jsx
new file mode 100644
index 0000000..230fd2e
--- /dev/null
+++ b/production/web/src/site/SiteBuilderPage.jsx
@@ -0,0 +1,402 @@
+import { useState, useEffect, useCallback } from 'react'
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import {
+  GripVertical, Eye, EyeOff, Trash2, Plus, ExternalLink,
+  LayoutTemplate, AlignLeft, LayoutGrid, HelpCircle, MousePointerClick, Code2,
+} from 'lucide-react'
+import * as api from '../lib/api'
+import Modal from '../ui/Modal'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+// Конструктор сайта — a drag-and-drop page builder for the marketing site
+// (/root/site), living here rather than in site's own repo because site
+// has no staff auth of its own (see internal/sitecontent's package doc for
+// the full architecture reasoning). Every block is a flat row in an
+// ordered list; site/web fetches only is_visible=true rows through the
+// public endpoint, so a hidden/half-edited block never leaks onto the live
+// page.
+
+const BLOCK_TYPES = [
+  { type: 'hero', label: 'Заголовок (hero)', icon: LayoutTemplate },
+  { type: 'text', label: 'Текстовый блок', icon: AlignLeft },
+  { type: 'cards', label: 'Карточки', icon: LayoutGrid },
+  { type: 'faq', label: 'Вопросы и ответы', icon: HelpCircle },
+  { type: 'cta', label: 'Призыв к действию', icon: MousePointerClick },
+  { type: 'custom_code', label: 'Код / виджет', icon: Code2 },
+]
+const BLOCK_TYPE_META = Object.fromEntries(BLOCK_TYPES.map((t) => [t.type, t]))
+
+function emptyContent(type) {
+  switch (type) {
+    case 'hero': return { heading: '', subheading: '', primary_text: '', primary_link: '', secondary_text: '', secondary_link: '' }
+    case 'text': return { heading: '', body: '' }
+    case 'cards': return { items: [] }
+    case 'faq': return { items: [] }
+    case 'cta': return { heading: '', body: '', button_text: '', button_link: '' }
+    case 'custom_code': return { html: '' }
+    default: return {}
+  }
+}
+
+// Short one-line preview shown in the collapsed row — just enough to tell
+// blocks of the same type apart at a glance without opening the editor.
+function previewText(block) {
+  const c = block.content || {}
+  switch (block.type) {
+    case 'hero': return c.heading || '(без заголовка)'
+    case 'text': return c.heading || (c.body ? c.body.slice(0, 60) : '(пусто)')
+    case 'cards': return `${(c.items || []).length} карточек`
+    case 'faq': return `${(c.items || []).length} вопросов`
+    case 'cta': return c.heading || '(без заголовка)'
+    case 'custom_code': return c.html ? `${c.html.slice(0, 50)}…` : '(пусто)'
+    default: return ''
+  }
+}
+
+function IconField({ label, value, onChange, textarea, hint }) {
+  const Tag = textarea ? 'textarea' : 'input'
+  return (
+    <label style={{ display: 'block', marginBottom: '12px' }}>
+      <span style={labelStyle}>{label}</span>
+      <Tag
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={textarea ? 4 : undefined}
+        style={{ ...inputStyle, ...(textarea ? { resize: 'vertical', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' } : {}) }}
+      />
+      {hint && <span style={{ fontSize: '0.74rem', color: 'var(--color-text-muted)', marginTop: '4px', display: 'block' }}>{hint}</span>}
+    </label>
+  )
+}
+
+// Repeatable {icon,title,text,link} rows — shared by "cards" (icon shown)
+// and reused with an "icon" field always present even though "faq" doesn't
+// use it, since a single small repeatable-list editor is worth more than
+// two near-identical ones.
+function RepeatableList({ items, onChange, fields }) {
+  const update = (i, key, value) => {
+    const next = items.slice()
+    next[i] = { ...next[i], [key]: value }
+    onChange(next)
+  }
+  const remove = (i) => onChange(items.filter((_, idx) => idx !== i))
+  const add = () => onChange([...items, Object.fromEntries(fields.map((f) => [f.key, '']))])
+
+  return (
+    <div>
+      {items.map((item, i) => (
+        <div key={i} style={{ border: '1px solid var(--color-border)', borderRadius: '10px', padding: '12px', marginBottom: '10px', position: 'relative' }}>
+          <button
+            type="button" onClick={() => remove(i)}
+            style={{ position: 'absolute', top: '8px', right: '8px', background: 'none', color: 'var(--color-danger)', padding: '4px' }}
+          >
+            <Trash2 size={14} />
+          </button>
+          {fields.map((f) => (
+            <IconField key={f.key} label={f.label} value={item[f.key] || ''} onChange={(v) => update(i, f.key, v)} textarea={f.textarea} />
+          ))}
+        </div>
+      ))}
+      <button type="button" onClick={add} className="btn-outline" style={{ padding: '7px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={14} /> Добавить пункт
+      </button>
+    </div>
+  )
+}
+
+function BlockForm({ type, content, onChange }) {
+  const set = (key, value) => onChange({ ...content, [key]: value })
+
+  if (type === 'hero') {
+    return (
+      <>
+        <IconField label="Заголовок" value={content.heading || ''} onChange={(v) => set('heading', v)} />
+        <IconField label="Подзаголовок" value={content.subheading || ''} onChange={(v) => set('subheading', v)} textarea />
+        <IconField label="Кнопка 1 — текст" value={content.primary_text || ''} onChange={(v) => set('primary_text', v)} />
+        <IconField label="Кнопка 1 — ссылка" value={content.primary_link || ''} onChange={(v) => set('primary_link', v)} />
+        <IconField label="Кнопка 2 — текст" value={content.secondary_text || ''} onChange={(v) => set('secondary_text', v)} />
+        <IconField label="Кнопка 2 — ссылка" value={content.secondary_link || ''} onChange={(v) => set('secondary_link', v)} />
+      </>
+    )
+  }
+  if (type === 'text') {
+    return (
+      <>
+        <IconField label="Заголовок (необязательно)" value={content.heading || ''} onChange={(v) => set('heading', v)} />
+        <IconField label="Текст" value={content.body || ''} onChange={(v) => set('body', v)} textarea />
+      </>
+    )
+  }
+  if (type === 'cards') {
+    return (
+      <RepeatableList
+        items={content.items || []}
+        onChange={(items) => set('items', items)}
+        fields={[
+          { key: 'icon', label: 'Иконка (emoji или название)' },
+          { key: 'title', label: 'Заголовок' },
+          { key: 'text', label: 'Текст', textarea: true },
+          { key: 'link', label: 'Ссылка (необязательно)' },
+        ]}
+      />
+    )
+  }
+  if (type === 'faq') {
+    return (
+      <RepeatableList
+        items={content.items || []}
+        onChange={(items) => set('items', items)}
+        fields={[
+          { key: 'question', label: 'Вопрос' },
+          { key: 'answer', label: 'Ответ', textarea: true },
+        ]}
+      />
+    )
+  }
+  if (type === 'cta') {
+    return (
+      <>
+        <IconField label="Заголовок" value={content.heading || ''} onChange={(v) => set('heading', v)} />
+        <IconField label="Текст" value={content.body || ''} onChange={(v) => set('body', v)} textarea />
+        <IconField label="Текст кнопки" value={content.button_text || ''} onChange={(v) => set('button_text', v)} />
+        <IconField label="Ссылка кнопки" value={content.button_link || ''} onChange={(v) => set('button_link', v)} />
+      </>
+    )
+  }
+  if (type === 'custom_code') {
+    return (
+      <>
+        <p style={{
+          background: 'var(--color-warn-soft)', color: 'var(--color-warn)', borderRadius: '8px',
+          padding: '10px 12px', fontSize: '0.8rem', marginBottom: '12px',
+        }}>
+          Только доверенный код — вставляется на сайт как есть, без проверки. Подходит для виджета чата,
+          счётчиков аналитики и другого кода интеграции.
+        </p>
+        <IconField label="HTML / <script>" value={content.html || ''} onChange={(v) => set('html', v)} textarea hint="Например, код виджета чата целиком, включая тег <script>." />
+      </>
+    )
+  }
+  return null
+}
+
+function BlockEditModal({ block, onClose, onSaved }) {
+  const [content, setContent] = useState(block.content || emptyContent(block.type))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const meta = BLOCK_TYPE_META[block.type]
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.siteBlocks.update(block.id, { content })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal title={meta?.label || block.type} onClose={onClose} maxWidth="560px">
+      <BlockForm type={block.type} content={content} onChange={setContent} />
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginBottom: '12px' }}>{error}</p>}
+      <button type="button" onClick={handleSave} disabled={saving} className="btn-primary" style={{ padding: '10px 18px', fontSize: '0.88rem' }}>
+        {saving ? 'Сохраняем…' : 'Сохранить'}
+      </button>
+    </Modal>
+  )
+}
+
+function AddBlockModal({ onClose, onCreated }) {
+  const [creating, setCreating] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleAdd = async (type) => {
+    setCreating(true)
+    setError('')
+    try {
+      const block = await api.siteBlocks.create({ page: 'home', type, content: emptyContent(type) })
+      onCreated(block)
+    } catch (err) {
+      setError(err.message)
+      setCreating(false)
+    }
+  }
+
+  return (
+    <Modal title="Добавить блок" onClose={onClose} maxWidth="420px">
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', marginBottom: '12px' }}>{error}</p>}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {BLOCK_TYPES.map(({ type, label, icon: Icon }) => (
+          <button
+            key={type} type="button" disabled={creating} onClick={() => handleAdd(type)}
+            className="btn-outline"
+            style={{ padding: '12px 14px', fontSize: '0.88rem', display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'flex-start' }}
+          >
+            <Icon size={16} /> {label}
+          </button>
+        ))}
+      </div>
+    </Modal>
+  )
+}
+
+function BlockRow({ block, onToggleVisible, onDelete, onEdit }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id })
+  const meta = BLOCK_TYPE_META[block.type]
+  const Icon = meta?.icon || LayoutTemplate
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform), transition,
+        opacity: block.is_visible ? (isDragging ? 0.6 : 1) : 0.5,
+        display: 'flex', alignItems: 'center', gap: '10px',
+        background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: '10px',
+        padding: '10px 12px', marginBottom: '8px',
+      }}
+    >
+      <span {...attributes} {...listeners} style={{ display: 'flex', color: 'var(--color-text-muted)', cursor: 'grab', flexShrink: 0 }}>
+        <GripVertical size={16} />
+      </span>
+      <Icon size={16} style={{ flexShrink: 0, color: 'var(--color-accent-fg)' }} />
+      <div style={{ flex: 1, minWidth: 0, cursor: 'pointer' }} onClick={() => onEdit(block)}>
+        <p style={{ fontWeight: 510, fontSize: '0.85rem' }}>{meta?.label || block.type}</p>
+        <p style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {previewText(block)}
+        </p>
+      </div>
+      <button type="button" onClick={() => onToggleVisible(block)} title={block.is_visible ? 'Скрыть' : 'Показать'} style={{ background: 'none', color: 'var(--color-text-muted)', padding: '6px', display: 'flex' }}>
+        {block.is_visible ? <Eye size={16} /> : <EyeOff size={16} />}
+      </button>
+      <button type="button" onClick={() => onDelete(block)} title="Удалить" style={{ background: 'none', color: 'var(--color-danger)', padding: '6px', display: 'flex' }}>
+        <Trash2 size={16} />
+      </button>
+    </div>
+  )
+}
+
+const SITE_URL = import.meta.env.VITE_SITE_PUBLIC_URL || 'https://site.your-domain.com'
+
+const SiteBuilderPage = () => {
+  const [blocks, setBlocks] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [editingBlock, setEditingBlock] = useState(null)
+  const [addingBlock, setAddingBlock] = useState(false)
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    try {
+      setBlocks((await api.siteBlocks.list('home')) || [])
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const handleDragEnd = async (event) => {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const oldIndex = blocks.findIndex((b) => b.id === active.id)
+    const newIndex = blocks.findIndex((b) => b.id === over.id)
+    const reordered = arrayMove(blocks, oldIndex, newIndex)
+    setBlocks(reordered)
+    try {
+      await api.siteBlocks.reorder('home', reordered.map((b) => b.id))
+    } catch (err) {
+      setError(err.message)
+      load()
+    }
+  }
+
+  const handleToggleVisible = async (block) => {
+    setBlocks((prev) => prev.map((b) => (b.id === block.id ? { ...b, is_visible: !b.is_visible } : b)))
+    try {
+      await api.siteBlocks.update(block.id, { is_visible: !block.is_visible })
+    } catch (err) {
+      setError(err.message)
+      load()
+    }
+  }
+
+  const handleDelete = async (block) => {
+    if (!window.confirm('Удалить блок безвозвратно?')) return
+    try {
+      await api.siteBlocks.delete(block.id)
+      setBlocks((prev) => prev.filter((b) => b.id !== block.id))
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <div className="glass-panel" style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px', marginBottom: '4px', flexWrap: 'wrap' }}>
+        <div>
+          <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.05rem', marginBottom: '4px' }}>Конструктор сайта</h3>
+          <p style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>
+            Блоки главной страницы сайта — перетаскивайте, чтобы менять порядок, скрывайте вместо удаления, если блок нужен позже.
+          </p>
+        </div>
+        <a href={SITE_URL} target="_blank" rel="noopener noreferrer" className="btn-outline" style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0 }}>
+          Открыть сайт <ExternalLink size={14} />
+        </a>
+      </div>
+
+      {error && <p style={{ color: 'var(--color-danger)', fontSize: '0.82rem', margin: '12px 0' }}>{error}</p>}
+
+      <div style={{ marginTop: '16px' }}>
+        {loading ? (
+          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Загрузка…</p>
+        ) : blocks.length === 0 ? (
+          <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
+            Пока нет блоков — сайт показывает свою обычную вёрстку по умолчанию. Добавьте блок, чтобы начать собирать страницу вручную.
+          </p>
+        ) : (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={blocks.map((b) => b.id)} strategy={verticalListSortingStrategy}>
+              {blocks.map((block) => (
+                <BlockRow
+                  key={block.id} block={block}
+                  onToggleVisible={handleToggleVisible} onDelete={handleDelete} onEdit={setEditingBlock}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+
+      <button type="button" onClick={() => setAddingBlock(true)} className="btn-primary" style={{ marginTop: '12px', padding: '9px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <Plus size={15} /> Добавить блок
+      </button>
+
+      {editingBlock && (
+        <BlockEditModal
+          block={editingBlock}
+          onClose={() => setEditingBlock(null)}
+          onSaved={() => { setEditingBlock(null); load() }}
+        />
+      )}
+      {addingBlock && (
+        <AddBlockModal
+          onClose={() => setAddingBlock(false)}
+          onCreated={() => { setAddingBlock(false); load() }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SiteBuilderPage
diff --git a/production/web/src/staff/StaffPage.jsx b/production/web/src/staff/StaffPage.jsx
new file mode 100644
index 0000000..607c6b0
--- /dev/null
+++ b/production/web/src/staff/StaffPage.jsx
@@ -0,0 +1,282 @@
+import { useState, useEffect } from 'react'
+import { Plus, KeyRound, Banknote, ShieldCheck, Power, ChevronDown, Mail, Clock } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useAuth } from '../auth/AuthContext'
+import { useStaff } from './useStaff'
+import StaffPayrollModal from '../payroll/StaffPayrollModal'
+import StaffPermissionsEditor from './StaffPermissionsEditor'
+import Modal from '../ui/Modal'
+
+// Any staff role — the picker just needs role names, not who can grant them
+// (backend enforces the "staff" permission on the actual write).
+function useRoleOptions() {
+  const [roleOptions, setRoleOptions] = useState([])
+  useEffect(() => {
+    api.roles.list().then((list) => setRoleOptions(list || [])).catch(() => setRoleOptions([]))
+  }, [])
+  return roleOptions
+}
+
+// Owner-only page (gated by Sidebar's roles; the backend enforces the same
+// restriction independently — see core's RequireRole("owner") on every
+// /api/staff* route). Talks to core directly (api.staff.*), not production —
+// staff accounts and roles live where auth itself lives, same split as
+// api.login.
+const selectStyle = { ...inputStyle, width: 'auto', padding: '8px 10px', fontSize: '0.85rem' }
+const SYSTEM_ROLE_LABELS = { owner: 'Владелец', manager: 'Менеджер', master: 'Мастер' }
+const roleLabel = (name) => SYSTEM_ROLE_LABELS[name] || name
+const ROLE_ACCENTS = { owner: '#f59e0b', manager: '#8b5cf6', master: '#0ea5e9' }
+const roleAccent = (name) => ROLE_ACCENTS[name] || '#64748b'
+
+const initials = (name) => (name || '?')
+  .trim().split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() || '').join('')
+
+function CreateStaffForm({ onClose, onCreated }) {
+  const [form, setForm] = useState({ name: '', email: '', password: '', role: 'master' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const roleOptions = useRoleOptions()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.staff.create(form)
+      onCreated()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal title="Новый сотрудник" onClose={onClose} maxWidth="420px">
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div>
+          <label style={labelStyle}>Имя *</label>
+          <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Email *</label>
+          <input type="email" value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Пароль * (минимум 8 символов)</label>
+          <input value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} style={{ ...inputStyle, width: '100%' }} required minLength={8} />
+        </div>
+        <div>
+          <label style={labelStyle}>Роль</label>
+          <select value={form.role} onChange={(e) => setForm((f) => ({ ...f, role: e.target.value }))} style={{ ...inputStyle, width: '100%' }}>
+            {roleOptions.map((r) => <option key={r.id} value={r.name}>{roleLabel(r.name)}</option>)}
+          </select>
+        </div>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Создаём...' : 'Создать'}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+function ResetPasswordModal({ member, onClose, onDone }) {
+  const [password, setPassword] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      await api.staff.resetPassword(member.id, password)
+      onDone()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal title={`Новый пароль для ${member.name}`} onClose={onClose} maxWidth="380px">
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Нет самостоятельного сброса по почте — сообщите новый пароль сотруднику лично.</p>
+        <div>
+          <label style={labelStyle}>Новый пароль (минимум 8 символов)</label>
+          <input value={password} onChange={(e) => setPassword(e.target.value)} style={{ ...inputStyle, width: '100%' }} required minLength={8} />
+        </div>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Сохраняем...' : 'Сохранить'}
+        </button>
+      </form>
+    </Modal>
+  )
+}
+
+function IconAction({ icon: Icon, label, onClick, tone }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
+        padding: '8px 10px', borderRadius: '9px', fontSize: '0.78rem', fontWeight: 510,
+        background: 'var(--color-surface-sunken)',
+        color: tone === 'danger' ? 'var(--accent-red)' : 'var(--text-muted)',
+        flex: '1 1 auto', minWidth: '0',
+      }}
+    >
+      <Icon size={14} />
+    </button>
+  )
+}
+
+function StaffCard({ member, isSelf, onChanged }) {
+  const [error, setError] = useState('')
+  const [showResetPassword, setShowResetPassword] = useState(false)
+  const [showPayroll, setShowPayroll] = useState(false)
+  const [showPermissions, setShowPermissions] = useState(false)
+  const roleOptions = useRoleOptions()
+  const accent = roleAccent(member.role)
+
+  const handleRoleChange = async (role) => {
+    setError('')
+    try {
+      await api.staff.update(member.id, { role })
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleToggleActive = async () => {
+    setError('')
+    try {
+      await api.staff.update(member.id, { is_active: !member.is_active })
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const overrideCount = (member.permission_grants?.length || 0) + (member.permission_revokes?.length || 0)
+
+  return (
+    <div
+      className="glass-panel"
+      style={{
+        padding: '18px', display: 'flex', flexDirection: 'column', gap: '14px',
+        borderTop: `3px solid ${member.is_active ? accent : 'var(--color-border)'}`,
+        opacity: member.is_active ? 1 : 0.65,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
+        <div style={{
+          width: '44px', height: '44px', borderRadius: '13px', flexShrink: 0,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: `${accent}22`, color: accent, fontWeight: 590, fontSize: '0.95rem',
+          fontFamily: 'var(--font-heading)',
+        }}>
+          {initials(member.name)}
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p style={{ fontWeight: 590, fontSize: '0.98rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{member.name}</span>
+            {isSelf && <span style={{ color: 'var(--text-muted)', fontWeight: 400, fontSize: '0.78rem', flexShrink: 0 }}>(вы)</span>}
+          </p>
+          <p style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '0.76rem', color: 'var(--text-muted)', marginTop: '2px' }}>
+            <Mail size={11} /> <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{member.email}</span>
+          </p>
+        </div>
+        {!member.is_active && (
+          <span style={{ fontSize: '0.68rem', fontWeight: 590, color: 'var(--accent-red)', background: 'var(--color-danger-soft)', padding: '3px 8px', borderRadius: '50px', flexShrink: 0 }}>
+            отключён
+          </span>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+        <select value={member.role} onChange={(e) => handleRoleChange(e.target.value)} style={{ ...selectStyle, borderColor: accent, color: accent, fontWeight: 590 }}>
+          {roleOptions.map((r) => <option key={r.id} value={r.name}>{roleLabel(r.name)}</option>)}
+        </select>
+        {member.last_login_at && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.72rem', color: 'var(--text-muted)' }}>
+            <Clock size={11} /> {new Date(member.last_login_at).toLocaleDateString('ru-RU')}
+          </span>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', gap: '6px' }}>
+        <IconAction icon={Power} label={member.is_active ? 'Отключить' : 'Включить'} onClick={handleToggleActive} tone={member.is_active ? 'danger' : undefined} />
+        <IconAction icon={KeyRound} label="Сменить пароль" onClick={() => setShowResetPassword(true)} />
+        <IconAction icon={Banknote} label="Зарплата" onClick={() => setShowPayroll(true)} />
+        <button
+          type="button"
+          onClick={() => setShowPermissions((v) => !v)}
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
+            padding: '8px 12px', borderRadius: '9px', fontSize: '0.78rem', fontWeight: 510,
+            background: overrideCount > 0 ? 'var(--color-accent-soft)' : 'var(--color-surface-sunken)',
+            color: overrideCount > 0 ? 'var(--color-accent-fg)' : 'var(--text-muted)',
+            flex: '1 1 auto',
+          }}
+        >
+          <ShieldCheck size={14} />
+          Права{overrideCount > 0 ? ` · ${overrideCount}` : ''}
+          <ChevronDown size={13} style={{ transform: showPermissions ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s ease', marginLeft: 'auto' }} />
+        </button>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.78rem' }}>{error}</p>}
+
+      {showPermissions && (
+        <div style={{ paddingTop: '4px', borderTop: '1px solid var(--color-border)' }}>
+          <StaffPermissionsEditor member={member} onSaved={onChanged} />
+        </div>
+      )}
+
+      {showResetPassword && (
+        <ResetPasswordModal member={member} onClose={() => setShowResetPassword(false)} onDone={() => setShowResetPassword(false)} />
+      )}
+      {showPayroll && <StaffPayrollModal staffMember={member} onClose={() => setShowPayroll(false)} />}
+    </div>
+  )
+}
+
+const StaffPage = () => {
+  const { staff: currentStaff } = useAuth()
+  const { staffList, loading, error, refetch } = useStaff()
+  const [showCreate, setShowCreate] = useState(false)
+
+  if (loading) return <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+  if (error && staffList.length === 0) return <p style={{ color: 'var(--accent-red)' }}>{error}</p>
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
+        <h1 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Сотрудники</h1>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Сотрудник
+        </button>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '14px' }}>
+        {staffList.map((m) => (
+          <StaffCard key={m.id} member={m} isSelf={m.id === currentStaff?.id} onChanged={refetch} />
+        ))}
+      </div>
+
+      {showCreate && (
+        <CreateStaffForm onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); refetch() }} />
+      )}
+    </div>
+  )
+}
+
+export default StaffPage
diff --git a/production/web/src/staff/StaffPermissionsEditor.jsx b/production/web/src/staff/StaffPermissionsEditor.jsx
new file mode 100644
index 0000000..9cd0d25
--- /dev/null
+++ b/production/web/src/staff/StaffPermissionsEditor.jsx
@@ -0,0 +1,113 @@
+import { useState, useMemo } from 'react'
+import { Check, Plus, Minus, Save } from 'lucide-react'
+import * as api from '../lib/api'
+import { PERMISSION_LABELS, ALL_PERMISSIONS } from '../roles/permissionLabels'
+
+// Per-employee point overrides on top of whatever their role already
+// grants — the thing StaffPage's role dropdown alone couldn't do (an
+// owner previously had to make a whole new custom role just to give one
+// master the "cash" permission). Three visual states per permission:
+//   - filled, no marker   → comes from the role as-is
+//   - filled, "+" marker  → granted to this staff member specifically
+//   - empty, "−" marker   → this staff member's role would grant it, but
+//                           it's been revoked just for them
+// Toggling a chip only ever writes to grants/revokes, never touches the
+// role itself or role_permissions — see effectivePermissions on the Go
+// side (internal/auth + internal/staff) for the merge rule this mirrors.
+const StaffPermissionsEditor = ({ member, onSaved }) => {
+  const rolePerms = useMemo(() => new Set(member.role_permissions || []), [member.role_permissions])
+  const [grants, setGrants] = useState(() => new Set(member.permission_grants || []))
+  const [revokes, setRevokes] = useState(() => new Set(member.permission_revokes || []))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const initialGrants = member.permission_grants || []
+  const initialRevokes = member.permission_revokes || []
+  const dirty = JSON.stringify([...grants].sort()) !== JSON.stringify([...initialGrants].sort())
+    || JSON.stringify([...revokes].sort()) !== JSON.stringify([...initialRevokes].sort())
+
+  const toggle = (key) => {
+    const fromRole = rolePerms.has(key)
+    if (fromRole) {
+      setRevokes((prev) => {
+        const next = new Set(prev)
+        next.has(key) ? next.delete(key) : next.add(key)
+        return next
+      })
+    } else {
+      setGrants((prev) => {
+        const next = new Set(prev)
+        next.has(key) ? next.delete(key) : next.add(key)
+        return next
+      })
+    }
+  }
+
+  const save = async () => {
+    setSaving(true)
+    setError('')
+    try {
+      await api.staff.update(member.id, { permission_grants: [...grants], permission_revokes: [...revokes] })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))', gap: '7px' }}>
+        {ALL_PERMISSIONS.map((key) => {
+          const fromRole = rolePerms.has(key)
+          const granted = grants.has(key)
+          const revoked = revokes.has(key)
+          const on = fromRole ? !revoked : granted
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => toggle(key)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '6px', padding: '8px 10px',
+                borderRadius: '9px', fontSize: '0.8rem', fontWeight: 510, textAlign: 'left',
+                border: `1.5px solid ${on ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                background: on ? 'var(--color-accent-soft)' : 'transparent',
+                color: on ? 'var(--color-accent-fg)' : 'var(--text-muted)',
+              }}
+            >
+              <span style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                width: '16px', height: '16px', borderRadius: '5px', flexShrink: 0,
+                background: on ? 'var(--color-accent)' : 'var(--color-surface-sunken)',
+                color: on ? '#fff' : 'transparent',
+              }}>
+                {on && !fromRole && <Plus size={11} />}
+                {on && fromRole && <Check size={11} />}
+                {!on && fromRole && <Minus size={11} color="var(--accent-red)" />}
+              </span>
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {PERMISSION_LABELS[key]}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+      <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginTop: '8px' }}>
+        <Plus size={10} style={{ verticalAlign: '-1px' }} /> выдано лично · <Minus size={10} color="var(--accent-red)" style={{ verticalAlign: '-1px' }} /> отнято лично, роль осталась прежней
+      </p>
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.8rem', marginTop: '6px' }}>{error}</p>}
+      {dirty && (
+        <button
+          type="button" onClick={save} disabled={saving}
+          className="btn-primary" style={{ padding: '8px 16px', fontSize: '0.82rem', marginTop: '10px', display: 'flex', alignItems: 'center', gap: '6px' }}
+        >
+          <Save size={13} /> {saving ? 'Сохраняем...' : 'Сохранить права'}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default StaffPermissionsEditor
diff --git a/production/web/src/staff/useStaff.js b/production/web/src/staff/useStaff.js
new file mode 100644
index 0000000..83d2597
--- /dev/null
+++ b/production/web/src/staff/useStaff.js
@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useStaff() {
+  const [staffList, setStaffList] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const fetchStaff = useCallback(async () => {
+    setLoading(true)
+    try {
+      setStaffList(await api.staff.list())
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => {
+      await fetchStaff()
+    })()
+  }, [fetchStaff])
+
+  return { staffList, loading, error, refetch: fetchStaff }
+}
diff --git a/production/web/src/suppliers/SuppliersPage.jsx b/production/web/src/suppliers/SuppliersPage.jsx
new file mode 100644
index 0000000..bc6b357
--- /dev/null
+++ b/production/web/src/suppliers/SuppliersPage.jsx
@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { Search, X, Plus, Phone, Mail } from 'lucide-react'
+import * as api from '../lib/api'
+import { useSuppliers } from './useSuppliers'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+
+function SupplierForm({ supplier, onClose, onSaved }) {
+  const isEdit = !!supplier
+  const [form, setForm] = useState({
+    name: supplier?.name || '', phone: supplier?.phone || '', email: supplier?.email || '', note: supplier?.note || '',
+  })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }))
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!form.name) { setError('Укажите название'); return }
+    setSaving(true)
+    setError('')
+    try {
+      if (isEdit) await api.suppliers.update(supplier.id, form)
+      else await api.suppliers.create(form)
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }} onClick={onClose}>
+      <form onClick={(e) => e.stopPropagation()} onSubmit={handleSubmit} className="glass-panel modal-panel" style={{ padding: '24px', width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>{isEdit ? 'Поставщик' : 'Новый поставщик'}</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={18} /></button>
+        </div>
+        <div>
+          <label style={labelStyle}>Название *</label>
+          <input value={form.name} onChange={set('name')} style={{ ...inputStyle, width: '100%' }} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Телефон</label>
+          <input value={form.phone} onChange={set('phone')} style={{ ...inputStyle, width: '100%' }} />
+        </div>
+        <div>
+          <label style={labelStyle}>Email</label>
+          <input value={form.email} onChange={set('email')} style={{ ...inputStyle, width: '100%' }} />
+        </div>
+        <div>
+          <label style={labelStyle}>Заметка</label>
+          <textarea value={form.note} onChange={set('note')} rows={2} style={{ ...inputStyle, width: '100%', resize: 'vertical' }} />
+        </div>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Сохраняем...' : isEdit ? 'Сохранить' : 'Создать'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+const SuppliersPage = () => {
+  const [query, setQuery] = useState('')
+  const { suppliers, loading, refetch } = useSuppliers(query)
+  const [showForm, setShowForm] = useState(false)
+  const [editing, setEditing] = useState(null)
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px' }}>
+        <div style={{ position: 'relative', flex: 1, maxWidth: '360px' }}>
+          <Search size={16} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Поиск по названию..."
+            style={{ ...inputStyle, width: '100%', paddingLeft: '36px' }}
+          />
+        </div>
+        <button onClick={() => setShowForm(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Поставщик
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {suppliers.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Поставщики не найдены</p>}
+          {suppliers.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => setEditing(s)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{s.name}</p>
+                <div style={{ display: 'flex', gap: '12px', marginTop: '2px' }}>
+                  {s.phone && <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '4px' }}><Phone size={11} />{s.phone}</span>}
+                  {s.email && <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '4px' }}><Mail size={11} />{s.email}</span>}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showForm && <SupplierForm onClose={() => setShowForm(false)} onSaved={() => { setShowForm(false); refetch() }} />}
+      {editing && <SupplierForm supplier={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); refetch() }} />}
+    </div>
+  )
+}
+
+export default SuppliersPage
diff --git a/production/web/src/suppliers/useSuppliers.js b/production/web/src/suppliers/useSuppliers.js
new file mode 100644
index 0000000..ac5ee03
--- /dev/null
+++ b/production/web/src/suppliers/useSuppliers.js
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Same debounced-search shape as clients/useClients.js.
+export function useSuppliers(query) {
+  const [suppliers, setSuppliers] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchSuppliers = useCallback(async () => {
+    setLoading(true)
+    try {
+      setSuppliers(await api.suppliers.list(query))
+    } finally {
+      setLoading(false)
+    }
+  }, [query])
+
+  useEffect(() => {
+    const id = setTimeout(fetchSuppliers, 250)
+    return () => clearTimeout(id)
+  }, [fetchSuppliers])
+
+  return { suppliers, loading, refetch: fetchSuppliers }
+}
diff --git a/production/web/src/tasks/TasksPage.jsx b/production/web/src/tasks/TasksPage.jsx
new file mode 100644
index 0000000..e91d5dc
--- /dev/null
+++ b/production/web/src/tasks/TasksPage.jsx
@@ -0,0 +1,170 @@
+import { useState } from 'react'
+import { Plus, X, Trash2, User, Calendar } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import { useAssignableStaff } from '../orders/useAssignableStaff'
+import { useAuth } from '../auth/AuthContext'
+import { useTasks, STATUSES } from './useTasks'
+
+const COLUMN_LABELS = { new: 'Новые', in_progress: 'В работе', postponed: 'Отложенные', done: 'Завершённые' }
+const NEXT_STATUS = { new: 'in_progress', in_progress: 'done', postponed: 'in_progress' }
+const NEXT_LABEL = { new: 'Взять в работу', in_progress: 'Завершить', postponed: 'Возобновить' }
+
+function NewTaskForm({ onClose, onCreated }) {
+  const assignableStaff = useAssignableStaff()
+  const { staff } = useAuth()
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [assignedStaffId, setAssignedStaffId] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!title.trim()) { setError('Укажите название'); return }
+    setSaving(true)
+    setError('')
+    try {
+      const master = assignableStaff.find((s) => s.id === assignedStaffId)
+      await api.tasks.create({
+        title, description,
+        assigned_staff_id: assignedStaffId || undefined,
+        assigned_staff_name: master?.name || undefined,
+        due_date: dueDate || undefined,
+      })
+      onCreated()
+      onClose()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex',
+      alignItems: 'flex-start', justifyContent: 'center', padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+    }}>
+      <form onSubmit={handleSubmit} className="glass-panel" style={{ width: '100%', maxWidth: '480px', padding: '24px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>Новая задача</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        <div>
+          <label style={labelStyle}>Название *</label>
+          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Заказать этикетки у поставщика" style={inputStyle} autoFocus />
+        </div>
+        <div>
+          <label style={labelStyle}>Описание</label>
+          <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' }} />
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
+          <div>
+            <label style={labelStyle}>Исполнитель</label>
+            <div style={{ display: 'flex', gap: '6px' }}>
+              <select value={assignedStaffId} onChange={(e) => setAssignedStaffId(e.target.value)} style={inputStyle}>
+                <option value="">— не назначен —</option>
+                {assignableStaff.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+              </select>
+              <button type="button" className="btn-outline" style={{ padding: '0 12px', fontSize: '0.78rem', whiteSpace: 'nowrap' }} onClick={() => setAssignedStaffId(staff?.id || '')}>
+                Я
+              </button>
+            </div>
+          </div>
+          <div>
+            <label style={labelStyle}>Срок</label>
+            <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} style={inputStyle} />
+          </div>
+        </div>
+        {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+        <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '11px' }}>
+          {saving ? 'Создаём...' : 'Создать'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function TaskCard({ task, onStatusChange, onDelete }) {
+  const overdue = task.due_date && task.status !== 'done' && new Date(task.due_date) < new Date(new Date().toDateString())
+  return (
+    <div className="glass-panel" style={{ padding: '12px 14px', marginBottom: '10px' }}>
+      <p style={{ fontWeight: 510, fontSize: '0.88rem', marginBottom: '4px' }}>{task.title}</p>
+      {task.description && <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', marginBottom: '6px' }}>{task.description}</p>}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', fontSize: '0.74rem', color: 'var(--text-muted)', marginBottom: '8px' }}>
+        {task.assigned_staff_name && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}><User size={12} /> {task.assigned_staff_name}</span>
+        )}
+        {task.due_date && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '4px', color: overdue ? 'var(--accent-red)' : undefined, fontWeight: overdue ? 590 : 400 }}>
+            <Calendar size={12} /> {new Date(task.due_date).toLocaleDateString('ru-RU')}{overdue ? ' — просрочено' : ''}
+          </span>
+        )}
+      </div>
+      <div style={{ display: 'flex', gap: '6px' }}>
+        {NEXT_STATUS[task.status] && (
+          <button type="button" className="btn-outline" style={{ padding: '5px 10px', fontSize: '0.76rem' }} onClick={() => onStatusChange(task.id, NEXT_STATUS[task.status])}>
+            {NEXT_LABEL[task.status]}
+          </button>
+        )}
+        {task.status !== 'postponed' && task.status !== 'done' && (
+          <button type="button" style={{ background: 'none', color: 'var(--text-muted)', fontSize: '0.76rem', padding: '5px 6px' }} onClick={() => onStatusChange(task.id, 'postponed')}>
+            Отложить
+          </button>
+        )}
+        <button type="button" style={{ background: 'none', color: 'var(--text-muted)', padding: '5px 6px', marginLeft: 'auto' }} title="Удалить" onClick={() => onDelete(task.id)}>
+          <Trash2 size={13} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+const TasksPage = () => {
+  const { byStatus, loading, error, reload, setStatus } = useTasks()
+  const [showNew, setShowNew] = useState(false)
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Удалить задачу?')) return
+    await api.tasks.delete(id)
+    reload()
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '18px' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Задачи</h2>
+        <button type="button" onClick={() => setShowNew(true)} className="btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Создать
+        </button>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', marginBottom: '12px' }}>{error}</p>}
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '16px' }}>
+          {STATUSES.map((status) => (
+            <div key={status}>
+              <p style={{ fontSize: '0.82rem', fontWeight: 590, color: 'var(--text-muted)', marginBottom: '10px' }}>
+                {COLUMN_LABELS[status]} — {byStatus[status]?.length || 0}
+              </p>
+              {(byStatus[status] || []).map((task) => (
+                <TaskCard key={task.id} task={task} onStatusChange={setStatus} onDelete={handleDelete} />
+              ))}
+              {(byStatus[status] || []).length === 0 && (
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>Пусто</p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showNew && <NewTaskForm onClose={() => setShowNew(false)} onCreated={reload} />}
+    </div>
+  )
+}
+
+export default TasksPage
diff --git a/production/web/src/tasks/useTasks.js b/production/web/src/tasks/useTasks.js
new file mode 100644
index 0000000..e05fd09
--- /dev/null
+++ b/production/web/src/tasks/useTasks.js
@@ -0,0 +1,37 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+const STATUSES = ['new', 'in_progress', 'postponed', 'done']
+
+export function useTasks() {
+  const [tasksList, setTasksList] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setTasksList(await api.tasks.list())
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  const byStatus = STATUSES.reduce((acc, s) => ({ ...acc, [s]: tasksList.filter((t) => t.status === s) }), {})
+
+  const setStatus = async (id, status) => {
+    await api.tasks.updateStatus(id, status)
+    await load()
+  }
+
+  return { tasksList, byStatus, loading, error, reload: load, setStatus }
+}
+
+export { STATUSES }
diff --git a/production/web/src/tradein/TradeInModal.jsx b/production/web/src/tradein/TradeInModal.jsx
new file mode 100644
index 0000000..fcee146
--- /dev/null
+++ b/production/web/src/tradein/TradeInModal.jsx
@@ -0,0 +1,477 @@
+import { useState, useEffect } from 'react'
+import { X, Camera, Sparkles } from 'lucide-react'
+import * as api from '../lib/api'
+import { inputStyle, labelStyle } from '../orders/formStyles'
+import ClientPicker from '../orders/ClientPicker'
+import PhotoThumb from '../orders/PhotoThumb'
+import { templateForDeviceType, initChecklistState, CHECK_STATUS_LABELS } from '../lib/checklistTemplates'
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  padding: '40px 16px', overflowY: 'auto', zIndex: 200,
+}
+const panelStyle = {
+  background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth: '560px',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+}
+
+const STATUS_LABELS = { pending: 'Ожидает', completed: 'Выкуплено', rejected: 'Отклонено' }
+const STATUS_COLORS = { pending: 'var(--accent-orange)', completed: 'var(--accent-green)', rejected: 'var(--accent-red)' }
+const PAYOUT_LABELS = { cash: 'Наличные', card: 'На карту', loyalty_credit: 'Баллы лояльности' }
+const GRADE_LABELS = { A: 'A — как новое', B: 'B — есть следы использования', C: 'C — значительный износ/дефекты' }
+
+function CreateForm({ onClose, onSaved }) {
+  const [client, setClient] = useState(null)
+  const [form, setForm] = useState({
+    device_type: '', device_brand: '', device_model: '', serial_number: '',
+    condition_description: '', offered_price: '', payout_method: 'cash', grade: '',
+  })
+  // null until the device type first resolves to a template — distinct
+  // from "user cleared all answers", so handleDeviceTypeChange knows
+  // whether it's still safe to re-derive from a fresh template.
+  const [checklist, setChecklist] = useState(null)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [estimating, setEstimating] = useState(false)
+  const [estimate, setEstimate] = useState(null)
+  const [estimateError, setEstimateError] = useState('')
+
+  const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }))
+
+  const isChecklistUntouched = (cl) =>
+    !cl || (cl.checks.every((c) => c.status === 'unchecked' && !c.note) && cl.completeness.every((c) => !c.present))
+
+  const handleDeviceTypeChange = (e) => {
+    const value = e.target.value
+    setForm((f) => ({ ...f, device_type: value }))
+    // Re-derive the checklist from the template whenever the device type
+    // changes — only while staff haven't started ticking things off, so
+    // typing "ноутбук" letter by letter doesn't wipe answers already given.
+    if (isChecklistUntouched(checklist)) {
+      setChecklist(initChecklistState(templateForDeviceType(value)))
+    }
+  }
+
+  const cycleCheckStatus = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      checks: prev.checks.map((c, i) => {
+        if (i !== idx) return c
+        const next = { unchecked: 'ok', ok: 'defect', defect: 'unchecked' }[c.status]
+        return { ...c, status: next }
+      }),
+    }))
+  const setCheckNote = (idx, note) =>
+    setChecklist((prev) => ({ ...prev, checks: prev.checks.map((c, i) => (i === idx ? { ...c, note } : c)) }))
+  const toggleCompleteness = (idx) =>
+    setChecklist((prev) => ({
+      ...prev,
+      completeness: prev.completeness.map((c, i) => (i === idx ? { ...c, present: !c.present } : c)),
+    }))
+
+  const handleEstimate = async () => {
+    if (!form.device_type.trim()) { setEstimateError('Укажите тип техники'); return }
+    setEstimating(true)
+    setEstimateError('')
+    setEstimate(null)
+    try {
+      const res = await api.tradeIns.estimate({
+        device_type: form.device_type,
+        device_brand: form.device_brand,
+        device_model: form.device_model,
+        grade: GRADE_LABELS[form.grade] || '',
+        condition_description: form.condition_description,
+      })
+      setEstimate(res)
+    } catch (err) {
+      setEstimateError(err.message)
+    } finally {
+      setEstimating(false)
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!client) { setError('Выберите или создайте клиента'); return }
+    if (!form.device_type || !form.condition_description || !form.offered_price) { setError('Заполните обязательные поля'); return }
+    setSaving(true)
+    setError('')
+    try {
+      await api.tradeIns.create({ ...form, client_id: client.id, checklist: isChecklistUntouched(checklist) ? undefined : checklist })
+      onSaved()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.3rem' }}>Выкуп техники</h2>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Клиент *</label>
+        <ClientPicker selectedClient={client} onSelect={setClient} />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Тип техники *</label>
+          <input value={form.device_type} onChange={handleDeviceTypeChange} placeholder="телефон, ноутбук..." style={inputStyle} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Производитель</label>
+          <input value={form.device_brand} onChange={set('device_brand')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Модель</label>
+          <input value={form.device_model} onChange={set('device_model')} style={inputStyle} />
+        </div>
+        <div>
+          <label style={labelStyle}>Серийный номер / IMEI</label>
+          <input value={form.serial_number} onChange={set('serial_number')} style={inputStyle} />
+        </div>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Состояние устройства *</label>
+        <textarea value={form.condition_description} onChange={set('condition_description')} rows={3} placeholder="экран целый, аккумулятор держит плохо, трещина на корпусе..." style={{ ...inputStyle, resize: 'vertical' }} required />
+      </div>
+
+      {checklist && checklist.checks.length > 0 && (
+        <div>
+          <label style={labelStyle}>Чек-лист проверки</label>
+          <div style={{ border: '1.5px solid var(--color-border)', borderRadius: '8px', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {checklist.checks.map((c, idx) => {
+              const color = { ok: 'var(--color-success)', defect: 'var(--color-danger)', unchecked: 'var(--color-text-muted)' }[c.status]
+              return (
+                <div key={c.key} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                  <button
+                    type="button"
+                    onClick={() => cycleCheckStatus(idx)}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.82rem', minWidth: '260px',
+                      background: 'none', color: 'var(--color-text)', textAlign: 'left', padding: '2px 0',
+                    }}
+                  >
+                    <span style={{
+                      flexShrink: 0, fontSize: '0.68rem', fontWeight: 590, padding: '2px 8px', borderRadius: '50px',
+                      background: color, color: '#fff', minWidth: '92px', textAlign: 'center',
+                    }}>
+                      {CHECK_STATUS_LABELS[c.status]}
+                    </span>
+                    {c.label}
+                  </button>
+                  {c.status === 'defect' && (
+                    <input
+                      value={c.note}
+                      onChange={(e) => setCheckNote(idx, e.target.value)}
+                      placeholder="Что не так..."
+                      style={{ ...inputStyle, flex: 1, padding: '6px 10px' }}
+                    />
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {checklist && checklist.completeness.length > 0 && (
+        <div>
+          <label style={labelStyle}>Комплектация</label>
+          <div style={{ border: '1.5px solid var(--color-border)', borderRadius: '8px', padding: '10px 12px', display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+            {checklist.completeness.map((c, idx) => (
+              <label key={c.key} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.85rem' }}>
+                <input type="checkbox" checked={c.present} onChange={() => toggleCompleteness(idx)} />
+                {c.label}
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <button
+          type="button"
+          onClick={handleEstimate}
+          disabled={estimating || !form.device_type.trim()}
+          className="btn-outline"
+          style={{ padding: '8px 14px', fontSize: '0.82rem', display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+        >
+          <Sparkles size={14} />
+          {estimating ? 'Оцениваем...' : 'Оценить стоимость (ИИ)'}
+        </button>
+        {estimateError && <p style={{ color: 'var(--color-danger)', fontSize: '0.8rem', marginTop: '6px' }}>{estimateError}</p>}
+        {estimate && (
+          <div style={{
+            marginTop: '8px', padding: '10px 12px', borderRadius: '8px',
+            background: 'var(--color-accent-soft)', border: '1px solid var(--color-accent)',
+          }}>
+            <p style={{ fontSize: '0.68rem', fontWeight: 590, color: 'var(--color-accent-fg)', marginBottom: '4px', textTransform: 'uppercase' }}>
+              Примерная ИИ-оценка — проверьте перед подтверждением
+            </p>
+            <p style={{ fontSize: '0.82rem', whiteSpace: 'pre-wrap' }}>{estimate.estimate}</p>
+            {estimate.sources?.length > 0 && (
+              <p style={{ fontSize: '0.72rem', color: 'var(--color-text-muted)', marginTop: '6px' }}>
+                Источники: {estimate.sources.map((s, i) => (
+                  <a key={i} href={s.url} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-accent-fg)', marginRight: '6px' }}>
+                    {s.title || 'ссылка'}
+                  </a>
+                ))}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '10px' }}>
+        <div>
+          <label style={labelStyle}>Предложенная цена, ₽ *</label>
+          <input type="number" min="0" value={form.offered_price} onChange={set('offered_price')} style={inputStyle} required />
+        </div>
+        <div>
+          <label style={labelStyle}>Способ выплаты *</label>
+          <select value={form.payout_method} onChange={set('payout_method')} style={inputStyle}>
+            {Object.entries(PAYOUT_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Общая оценка состояния</label>
+        <select value={form.grade} onChange={set('grade')} style={inputStyle}>
+          <option value="">— не указана —</option>
+          {Object.entries(GRADE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+        </select>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem' }}>{error}</p>}
+      <button type="submit" disabled={saving} className="btn-primary" style={{ padding: '12px' }}>
+        {saving ? 'Сохраняем...' : 'Создать (ожидает решения)'}
+      </button>
+    </form>
+  )
+}
+
+function DetailView({ tradeInId, onClose, onChanged }) {
+  const [data, setData] = useState(null)
+  const [photos, setPhotos] = useState([])
+  const [rejectNote, setRejectNote] = useState('')
+  const [showReject, setShowReject] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [salePrice, setSalePrice] = useState('')
+  const [listError, setListError] = useState('')
+
+  const load = async () => {
+    setData(await api.tradeIns.get(tradeInId))
+    setPhotos((await api.tradeIns.listPhotos(tradeInId)) || [])
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tradeInId])
+
+  const handlePhotoUpload = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setBusy(true)
+    try {
+      await api.tradeIns.addPhoto(tradeInId, file)
+      await load()
+    } finally {
+      setBusy(false)
+      e.target.value = ''
+    }
+  }
+
+  const handleListForSale = async () => {
+    if (!salePrice || Number(salePrice) <= 0) { setListError('Укажите цену продажи'); return }
+    setBusy(true)
+    setListError('')
+    try {
+      await api.tradeIns.listForSale(tradeInId, salePrice)
+      await load()
+      onChanged()
+    } catch (err) {
+      setListError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleComplete = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.tradeIns.complete(tradeInId)
+      await load()
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleReject = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      await api.tradeIns.reject(tradeInId, rejectNote)
+      await load()
+      onChanged()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!data) return <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>Загрузка...</div>
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <div>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.25rem' }}>
+            {data.device_type}{data.device_brand ? ` · ${data.device_brand}` : ''}{data.device_model ? ` ${data.device_model}` : ''}
+          </h2>
+          <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '4px' }}>
+            {data.client_name} · {data.client_phone} · {new Date(data.created_at).toLocaleDateString('ru-RU')} · {data.created_by_staff_name}
+          </p>
+        </div>
+        <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+      </div>
+
+      <span style={{
+        display: 'inline-block', marginTop: '10px', fontSize: '0.78rem', fontWeight: 590,
+        color: STATUS_COLORS[data.status], background: 'var(--color-surface-sunken)', padding: '3px 10px', borderRadius: '50px',
+      }}>
+        {STATUS_LABELS[data.status] || data.status}
+      </span>
+
+      <p style={{ fontSize: '0.85rem', marginTop: '12px' }}>{data.condition_description}</p>
+      {data.grade && (
+        <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginTop: '4px' }}>{GRADE_LABELS[data.grade] || data.grade}</p>
+      )}
+      <p style={{ fontSize: '0.95rem', fontWeight: 590, marginTop: '10px' }}>
+        {Number(data.offered_price).toLocaleString('ru-RU')} ₽ <span style={{ fontWeight: 400, color: 'var(--text-muted)', fontSize: '0.82rem' }}>({PAYOUT_LABELS[data.payout_method]})</span>
+      </p>
+      {data.reject_note && <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginTop: '8px' }}>Причина отказа: {data.reject_note}</p>}
+
+      {Array.isArray(data.checklist) && data.checklist.length > 0 && (
+        // Legacy shape from before this checklist was restructured (flat
+        // array of {item, ok, note}) — still rendered as-is for trade-ins
+        // created before this change, never produced by CreateForm anymore.
+        <div style={{ marginTop: '14px' }}>
+          <h3 style={{ fontSize: '0.85rem', marginBottom: '6px' }}>Чек-лист проверки</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {data.checklist.map((c) => (
+              <p key={c.item} style={{ fontSize: '0.82rem', color: c.ok ? 'var(--color-text)' : 'var(--color-danger)' }}>
+                {c.ok ? '✓' : '✕'} {c.item}{c.note ? ` — ${c.note}` : ''}
+              </p>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {data.checklist && !Array.isArray(data.checklist) && data.checklist.checks?.length > 0 && (
+        <div style={{ marginTop: '14px' }}>
+          <h3 style={{ fontSize: '0.85rem', marginBottom: '6px' }}>Чек-лист проверки</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {data.checklist.checks.map((c) => {
+              const color = { ok: 'var(--color-success)', defect: 'var(--color-danger)', unchecked: 'var(--color-text-muted)' }[c.status]
+              return (
+                <p key={c.key} style={{ fontSize: '0.82rem' }}>
+                  <span style={{ color, fontWeight: 510 }}>{CHECK_STATUS_LABELS[c.status]}</span> {c.label}{c.note ? ` — ${c.note}` : ''}
+                </p>
+              )
+            })}
+          </div>
+          {data.checklist.completeness?.length > 0 && (
+            <>
+              <h3 style={{ fontSize: '0.85rem', marginTop: '10px', marginBottom: '6px' }}>Комплектация</h3>
+              <p style={{ fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>
+                {data.checklist.completeness.map((c) => `${c.present ? '✓' : '✕'} ${c.label}`).join(' · ')}
+              </p>
+            </>
+          )}
+        </div>
+      )}
+
+      <div style={{ marginTop: '14px' }}>
+        <h3 style={{ fontSize: '0.85rem', marginBottom: '8px' }}>Фото устройства</h3>
+        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
+          {photos.map((p) => <PhotoThumb key={p.id} fileKey={p.file_key} />)}
+          <label className="btn-outline" style={{ padding: '10px 14px', fontSize: '0.8rem', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <Camera size={14} /> Фото
+            <input type="file" accept="image/*" onChange={handlePhotoUpload} style={{ display: 'none' }} disabled={busy} />
+          </label>
+        </div>
+      </div>
+
+      {data.status === 'completed' && (
+        <div style={{ marginTop: '16px', paddingTop: '16px', borderTop: '1px solid var(--border-light)' }}>
+          {data.listed_part_id ? (
+            <p style={{ fontSize: '0.85rem', color: 'var(--accent-green)', fontWeight: 510 }}>Выставлено на продажу</p>
+          ) : (
+            <div>
+              <label style={labelStyle}>Выставить на продажу — цена, ₽</label>
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <input type="number" min="0" value={salePrice} onChange={(e) => setSalePrice(e.target.value)} style={{ ...inputStyle, flex: 1 }} />
+                <button type="button" onClick={handleListForSale} disabled={busy} className="btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem', whiteSpace: 'nowrap' }}>
+                  Выставить
+                </button>
+              </div>
+              {listError && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem', marginTop: '6px' }}>{listError}</p>}
+            </div>
+          )}
+        </div>
+      )}
+
+      {data.status === 'pending' && (
+        <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <button type="button" onClick={handleComplete} disabled={busy} className="btn-primary" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+              {busy ? 'Выполняем...' : 'Выкупить (выплатить)'}
+            </button>
+            <button type="button" onClick={() => setShowReject((v) => !v)} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+              Отклонить
+            </button>
+          </div>
+          {showReject && (
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <input value={rejectNote} onChange={(e) => setRejectNote(e.target.value)} placeholder="Причина (необязательно)" style={{ ...inputStyle, flex: 1 }} />
+              <button type="button" onClick={handleReject} disabled={busy} className="btn-outline" style={{ padding: '9px 16px', fontSize: '0.85rem' }}>
+                Подтвердить отказ
+              </button>
+            </div>
+          )}
+          {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.82rem' }}>{error}</p>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+const TradeInModal = ({ mode, tradeInId, onClose, onSaved }) => {
+  return (
+    <div className="modal-overlay" style={overlayStyle} onClick={onClose}>
+      <div className="modal-panel" style={panelStyle} onClick={(e) => e.stopPropagation()}>
+        {mode === 'create'
+          ? <CreateForm onClose={onClose} onSaved={onSaved} />
+          : <DetailView tradeInId={tradeInId} onClose={onClose} onChanged={onSaved} />}
+      </div>
+    </div>
+  )
+}
+
+export default TradeInModal
diff --git a/production/web/src/tradein/TradeInsPage.jsx b/production/web/src/tradein/TradeInsPage.jsx
new file mode 100644
index 0000000..5ea6fbd
--- /dev/null
+++ b/production/web/src/tradein/TradeInsPage.jsx
@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import { Plus } from 'lucide-react'
+import { useTradeIns } from './useTradeIns'
+import TradeInModal from './TradeInModal'
+
+const STATUS_LABELS = { pending: 'Ожидает', completed: 'Выкуплено', rejected: 'Отклонено' }
+const STATUS_COLORS = { pending: 'var(--accent-orange)', completed: 'var(--accent-green)', rejected: 'var(--accent-red)' }
+const TABS = [
+  { value: '', label: 'Все' },
+  { value: 'pending', label: 'Ожидают' },
+  { value: 'completed', label: 'Выкуплено' },
+  { value: 'rejected', label: 'Отклонено' },
+]
+
+// Only the new structured shape ({checks:[{status}], completeness:[...]})
+// carries a per-item status to summarize — the legacy flat-array shape
+// (pre-restructure trade-ins, still rendered as-is in TradeInModal's
+// DetailView) has no status field, so it gets no badge here.
+function ChecklistSummary({ checklist }) {
+  if (!checklist || Array.isArray(checklist) || !checklist.checks?.length) return null
+  const total = checklist.checks.length
+  const okCount = checklist.checks.filter((c) => c.status === 'ok').length
+  const defectCount = checklist.checks.filter((c) => c.status === 'defect').length
+  return (
+    <span style={{ fontSize: '0.74rem', color: 'var(--text-muted)' }}>
+      {okCount}/{total} ок
+      {defectCount > 0 && <span style={{ color: 'var(--color-danger)', fontWeight: 590 }}> · {defectCount} неисправно</span>}
+    </span>
+  )
+}
+
+const TradeInsPage = () => {
+  const [tab, setTab] = useState('')
+  const { tradeIns, loading, reload } = useTradeIns(tab)
+  const [showCreate, setShowCreate] = useState(false)
+  const [selectedId, setSelectedId] = useState(null)
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px', marginBottom: '18px', flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+          {TABS.map((t) => (
+            <button
+              key={t.value}
+              onClick={() => setTab(t.value)}
+              className={tab === t.value ? 'btn-primary' : 'btn-outline'}
+              style={{ padding: '7px 14px', fontSize: '0.82rem' }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <button onClick={() => setShowCreate(true)} className="btn-primary" style={{ padding: '10px 16px', fontSize: '0.85rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
+          <Plus size={15} /> Выкуп техники
+        </button>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {tradeIns.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Заявок нет</p>}
+          {tradeIns.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setSelectedId(t.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px 14px 15px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                borderLeft: `3px solid ${STATUS_COLORS[t.status] || 'transparent'}`,
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div>
+                <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{t.device_type}{t.device_brand ? ` · ${t.device_brand}` : ''}</p>
+                <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
+                  {t.client_name} · {Number(t.offered_price).toLocaleString('ru-RU')} ₽ · {new Date(t.created_at).toLocaleDateString('ru-RU')}
+                </p>
+                <ChecklistSummary checklist={t.checklist} />
+              </div>
+              <span style={{
+                fontSize: '0.72rem', fontWeight: 590, color: STATUS_COLORS[t.status],
+                background: 'var(--color-surface-sunken)', padding: '2px 9px', borderRadius: '50px', flexShrink: 0,
+              }}>
+                {STATUS_LABELS[t.status] || t.status}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <TradeInModal mode="create" onClose={() => setShowCreate(false)} onSaved={() => { setShowCreate(false); reload() }} />
+      )}
+      {selectedId && (
+        <TradeInModal mode="view" tradeInId={selectedId} onClose={() => setSelectedId(null)} onSaved={reload} />
+      )}
+    </div>
+  )
+}
+
+export default TradeInsPage
diff --git a/production/web/src/tradein/useTradeIns.js b/production/web/src/tradein/useTradeIns.js
new file mode 100644
index 0000000..921f902
--- /dev/null
+++ b/production/web/src/tradein/useTradeIns.js
@@ -0,0 +1,23 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+export function useTradeIns(status) {
+  const [tradeIns, setTradeIns] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setTradeIns(await api.tradeIns.list({ status }))
+    } finally {
+      setLoading(false)
+    }
+  }, [status])
+
+  useEffect(() => {
+    (async () => { await load() })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  return { tradeIns, loading, reload: load }
+}
diff --git a/production/web/src/ui/DatePicker.jsx b/production/web/src/ui/DatePicker.jsx
new file mode 100644
index 0000000..9b60bd1
--- /dev/null
+++ b/production/web/src/ui/DatePicker.jsx
@@ -0,0 +1,182 @@
+import { useState, useRef, useEffect } from 'react'
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from 'lucide-react'
+import { inputStyle } from '../orders/formStyles'
+
+const WEEKDAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
+const MONTHS = [
+  'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+  'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',
+]
+
+function startOfDay(d) {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+// Monday-first 6x7 grid — nulls pad the leading/trailing cells so every
+// month renders as a stable-height block regardless of which weekday it
+// starts on.
+function buildMonthGrid(year, month) {
+  const first = new Date(year, month, 1)
+  const startWeekday = (first.getDay() + 6) % 7
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const cells = []
+  for (let i = 0; i < startWeekday; i++) cells.push(null)
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d))
+  while (cells.length % 7 !== 0) cells.push(null)
+  return cells
+}
+
+// Bare month-grid calendar, no popover/input chrome of its own — DateTimeField
+// below wraps this with a text/button trigger and a dropdown-panel. Split out
+// because BookingPage's public form and the staff on-site-booking modal both
+// need the calendar but want slightly different surrounding chrome.
+export function CalendarGrid({ value, onChange, minDate }) {
+  const initial = value || new Date()
+  const [viewYear, setViewYear] = useState(initial.getFullYear())
+  const [viewMonth, setViewMonth] = useState(initial.getMonth())
+
+  const min = minDate ? startOfDay(minDate) : null
+  const selected = value ? startOfDay(value) : null
+  const today = startOfDay(new Date())
+  const cells = buildMonthGrid(viewYear, viewMonth)
+
+  const prevMonth = () => { if (viewMonth === 0) { setViewYear((v) => v - 1); setViewMonth(11) } else setViewMonth((v) => v - 1) }
+  const nextMonth = () => { if (viewMonth === 11) { setViewYear((v) => v + 1); setViewMonth(0) } else setViewMonth((v) => v + 1) }
+
+  return (
+    <div style={{ width: '272px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '10px' }}>
+        <button type="button" onClick={prevMonth} aria-label="Предыдущий месяц" style={{ background: 'none', color: 'var(--color-text-muted)', padding: '4px', display: 'flex', borderRadius: '6px' }}>
+          <ChevronLeft size={16} />
+        </button>
+        <span style={{ fontWeight: 510, fontSize: '0.86rem', fontFamily: 'var(--font-heading)' }}>{MONTHS[viewMonth]} {viewYear}</span>
+        <button type="button" onClick={nextMonth} aria-label="Следующий месяц" style={{ background: 'none', color: 'var(--color-text-muted)', padding: '4px', display: 'flex', borderRadius: '6px' }}>
+          <ChevronRight size={16} />
+        </button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px', marginBottom: '2px' }}>
+        {WEEKDAYS.map((w) => (
+          <div key={w} style={{ textAlign: 'center', fontSize: '0.66rem', color: 'var(--color-text-muted)', fontWeight: 510, padding: '2px 0' }}>{w}</div>
+        ))}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px' }}>
+        {cells.map((d, i) => {
+          if (!d) return <div key={i} />
+          const disabled = min ? d < min : false
+          const isSelected = selected && d.getTime() === selected.getTime()
+          const isToday = d.getTime() === today.getTime()
+          return (
+            <button
+              key={i}
+              type="button"
+              disabled={disabled}
+              onClick={() => onChange(d)}
+              style={{
+                aspectRatio: '1', borderRadius: '6px', fontSize: '0.8rem', fontFamily: 'var(--font-body)',
+                background: isSelected ? 'var(--color-accent)' : 'transparent',
+                color: disabled ? 'var(--color-border)' : (isSelected ? 'var(--color-text-inverse)' : 'var(--color-text)'),
+                border: isToday && !isSelected ? '1px solid var(--color-border)' : '1px solid transparent',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                fontWeight: isToday || isSelected ? 590 : 400,
+              }}
+            >
+              {d.getDate()}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function formatDisplay(date) {
+  if (!date) return ''
+  const datePart = date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' })
+  const timePart = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+  return `${datePart}, ${timePart}`
+}
+
+function toTimeInputValue(date) {
+  if (!date) return ''
+  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+// Combined calendar + time field — a single trigger button showing the
+// picked date/time, opening a dropdown-panel (same entrance animation as
+// NotificationBell's, see index.css) with a month-grid calendar plus a
+// native time input alongside it. Replaces the plain
+// <input type="datetime-local"> BookingPage used before — a real calendar
+// reads far more inviting for picking an appointment slot than a bare
+// native widget, especially on the public booking form.
+const DateTimeField = ({ value, onChange, minDate }) => {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onDocClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [open])
+
+  const handleDayPick = (day) => {
+    const next = new Date(day)
+    if (value) {
+      next.setHours(value.getHours(), value.getMinutes(), 0, 0)
+    } else {
+      // Default to the next half-hour slot so a freshly picked day doesn't
+      // silently carry 00:00 through validation as "in the past" grace.
+      const now = new Date()
+      next.setHours(now.getHours(), now.getMinutes() >= 30 ? 30 : 0, 0, 0)
+      if (next < now) next.setHours(now.getHours() + 1, 0, 0, 0)
+    }
+    onChange(next)
+  }
+
+  const handleTimeChange = (e) => {
+    const [h, m] = e.target.value.split(':').map(Number)
+    const base = value ? new Date(value) : new Date()
+    base.setHours(h || 0, m || 0, 0, 0)
+    onChange(base)
+  }
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        style={{ ...inputStyle, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', textAlign: 'left', cursor: 'pointer' }}
+      >
+        <span style={{ color: value ? 'var(--color-text)' : 'var(--color-text-muted)' }}>
+          {value ? formatDisplay(value) : 'Выберите дату и время'}
+        </span>
+        <CalendarIcon size={15} color="var(--color-text-muted)" style={{ flexShrink: 0 }} />
+      </button>
+
+      {open && (
+        <div className="dropdown-panel glass-panel" style={{
+          position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 60,
+          padding: '14px', transformOrigin: 'top left',
+        }}>
+          <CalendarGrid value={value} onChange={handleDayPick} minDate={minDate} />
+          <div style={{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span style={{ fontSize: '0.78rem', color: 'var(--color-text-muted)', fontWeight: 510 }}>Время</span>
+            <input
+              type="time"
+              value={toTimeInputValue(value)}
+              onChange={handleTimeChange}
+              disabled={!value}
+              style={{ ...inputStyle, padding: '7px 10px', width: 'auto', flex: 1 }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DateTimeField
diff --git a/production/web/src/ui/MessengerButtons.jsx b/production/web/src/ui/MessengerButtons.jsx
new file mode 100644
index 0000000..f19e5f8
--- /dev/null
+++ b/production/web/src/ui/MessengerButtons.jsx
@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { Check } from 'lucide-react'
+import { whatsappLink, telegramLink } from '../lib/contactLinks'
+
+// Real brand glyphs (not generic lucide icons) — paths verified against
+// simple-icons (simpleicons.org), official brand colors from the same
+// source. Inlined rather than pulling in a whole icon-library dependency
+// for three static paths.
+const ICON_PATHS = {
+  whatsapp: 'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z',
+  telegram: 'M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z',
+  max: 'M1.769 0A1.77 1.77 0 0 0 0 1.769V22.23A1.77 1.77 0 0 0 1.769 24H22.23A1.77 1.77 0 0 0 24 22.231V1.77A1.77 1.77 0 0 0 22.231 0zm12.485 3.28a4.301 4.301 0 0 1 4.3 4.302 4.301 4.301 0 0 1-1.993 3.63 6.085 6.085 0 0 1 1.054 3.422 6.085 6.085 0 0 1-6.085 6.085 6.085 6.085 0 0 1-6.085-6.085 6.085 6.085 0 0 1 4.66-5.916 4.301 4.301 0 0 1-.152-1.136 4.301 4.301 0 0 1 4.301-4.301zm0 1.849a2.453 2.453 0 0 0-2.453 2.453 2.453 2.453 0 0 0 2.453 2.453 2.453 2.453 0 0 0 2.453-2.453 2.453 2.453 0 0 0-2.453-2.453zm-2.724 5.268a4.237 4.237 0 0 0-4.237 4.237 4.237 4.237 0 0 0 4.237 4.237 4.237 4.237 0 0 0 4.237-4.237 4.237 4.237 0 0 0-4.237-4.237zm.032 2.54a1.781 1.781 0 1 1 0 3.562 1.781 1.781 0 0 1 0-3.562Z',
+}
+const BRAND_COLORS = { whatsapp: '#25D366', telegram: '#26A5E4', max: '#525252' }
+
+const BrandIcon = ({ name, size }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={{ display: 'block' }}>
+    <path d={ICON_PATHS[name]} />
+  </svg>
+)
+
+// MAX (max.ru) has no wa.me-style deep link to open a chat by phone number
+// — a deliberate platform restriction, not a gap in this app — so the best
+// we can do is copy the number and hand off to max.ru for a manual search.
+const MAX_URL = 'https://max.ru/'
+
+// Shared "jump to a chat with this client" icon row — used wherever a
+// client's phone is shown (order client picker, client detail card, order
+// card).
+const MessengerButtons = ({ phone, size = 18 }) => {
+  const [copied, setCopied] = useState(false)
+  const wa = whatsappLink(phone)
+  const tg = telegramLink(phone)
+
+  const handleMaxClick = async () => {
+    try {
+      await navigator.clipboard.writeText(phone)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // Clipboard API unavailable (permissions/insecure context) — still open MAX.
+    }
+    window.open(MAX_URL, '_blank', 'noopener,noreferrer')
+  }
+
+  if (!phone) return null
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      {wa && (
+        <a href={wa} target="_blank" rel="noopener noreferrer" title="Написать в WhatsApp" style={{ display: 'flex', color: BRAND_COLORS.whatsapp }}>
+          <BrandIcon name="whatsapp" size={size} />
+        </a>
+      )}
+      {tg && (
+        <a href={tg} target="_blank" rel="noopener noreferrer" title="Написать в Telegram" style={{ display: 'flex', color: BRAND_COLORS.telegram }}>
+          <BrandIcon name="telegram" size={size} />
+        </a>
+      )}
+      <button
+        type="button"
+        onClick={handleMaxClick}
+        title="Скопировать номер и открыть MAX (в MAX нет прямой ссылки на чат по номеру)"
+        style={{ display: 'flex', background: 'none', color: BRAND_COLORS.max, padding: 0 }}
+      >
+        {copied ? <Check size={size} color="var(--accent-green)" /> : <BrandIcon name="max" size={size} />}
+      </button>
+    </div>
+  )
+}
+
+export default MessengerButtons
diff --git a/production/web/src/ui/Modal.jsx b/production/web/src/ui/Modal.jsx
new file mode 100644
index 0000000..475f723
--- /dev/null
+++ b/production/web/src/ui/Modal.jsx
@@ -0,0 +1,28 @@
+import { X } from 'lucide-react'
+
+// Shared overlay used across Cash/Payroll/Delivery quick-actions — third
+// call site is what justified pulling this out of its per-page duplicates
+// (CashPage.jsx, PayrollRunsSection.jsx both had byte-identical copies).
+const Modal = ({ title, onClose, children, maxWidth = '520px' }) => {
+  return (
+    <div
+      className="modal-overlay"
+      style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '40px 16px', overflowY: 'auto', zIndex: 200 }}
+      onClick={onClose}
+    >
+      <div
+        className="modal-panel"
+        style={{ background: 'var(--color-surface)', borderRadius: '16px', width: '100%', maxWidth, boxShadow: 'var(--shadow-elevated)', padding: '24px' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+          <h2 style={{ fontFamily: 'var(--font-heading)', fontSize: '1.2rem' }}>{title}</h2>
+          <button type="button" onClick={onClose} style={{ background: 'none', color: 'var(--text-muted)' }}><X size={20} /></button>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Modal
diff --git a/production/web/src/ui/ScanField.jsx b/production/web/src/ui/ScanField.jsx
new file mode 100644
index 0000000..a84f00c
--- /dev/null
+++ b/production/web/src/ui/ScanField.jsx
@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react'
+import jsQR from 'jsqr'
+import { Camera, X } from 'lucide-react'
+
+// Camera-based decode, opened from the button next to the code input below.
+// Polls video frames onto an offscreen canvas and hands each ImageData to
+// jsQR — no continuous-scan library needed for what's a single decode-then-
+// close interaction. Stops its own camera stream on every exit path
+// (found a code, closed manually, or unmounted) so the tab doesn't keep
+// holding the camera after the modal's gone. jsQR reads 1D barcodes fine
+// too in practice (most retail barcodes still carry a scannable quiet zone
+// a QR decoder tolerates) — no separate 1D-specific library pulled in for
+// what's a bonus input method, not the primary one (USB scanners below
+// are).
+function CameraScanModal({ onDetected, onClose }) {
+  const videoRef = useRef(null)
+  const canvasRef = useRef(null)
+  const rafRef = useRef(null)
+  const streamRef = useRef(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+      .then((stream) => {
+        if (cancelled) { stream.getTracks().forEach((t) => t.stop()); return }
+        streamRef.current = stream
+        videoRef.current.srcObject = stream
+        videoRef.current.play()
+        const tick = () => {
+          const video = videoRef.current
+          const canvas = canvasRef.current
+          if (video && canvas && video.readyState === video.HAVE_ENOUGH_DATA) {
+            canvas.width = video.videoWidth
+            canvas.height = video.videoHeight
+            const ctx = canvas.getContext('2d')
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+            const frame = ctx.getImageData(0, 0, canvas.width, canvas.height)
+            const result = jsQR(frame.data, frame.width, frame.height)
+            if (result?.data) { onDetected(result.data); return }
+          }
+          rafRef.current = requestAnimationFrame(tick)
+        }
+        rafRef.current = requestAnimationFrame(tick)
+      })
+      .catch(() => setError('Нет доступа к камере — проверьте разрешения браузера'))
+    return () => {
+      cancelled = true
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+      if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop())
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div
+      style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 300 }}
+      onClick={onClose}
+    >
+      <div style={{ position: 'relative', width: '90vw', maxWidth: '420px' }} onClick={(e) => e.stopPropagation()}>
+        <button type="button" onClick={onClose} style={{ position: 'absolute', top: '-36px', right: 0, background: 'none', color: '#fff' }}>
+          <X size={24} />
+        </button>
+        {error ? (
+          <p style={{ color: '#fff', textAlign: 'center' }}>{error}</p>
+        ) : (
+          <video ref={videoRef} playsInline muted style={{ width: '100%', borderRadius: '12px' }} />
+        )}
+        <canvas ref={canvasRef} style={{ display: 'none' }} />
+      </div>
+    </div>
+  )
+}
+
+// One code input that works two ways at once: a USB "keyboard-wedge"
+// scanner just types the decoded text into whatever's focused and sends
+// Enter — this is a plain autoFocus-friendly text input for that. The
+// camera icon opens CameraScanModal above for a phone/tablet with no
+// separate hardware. Both paths converge on the same onScan(code) call —
+// deliberately dumb (no lookup/error handling of its own) so it's reusable
+// across domains (cartridge QR codes, part barcodes, ...); the caller owns
+// what a scanned code means. Originally cartridges/QrScanField.jsx, pulled
+// out here once a second caller (inventory barcode lookup) needed the same
+// input+camera shell.
+function ScanField({ onScan, placeholder = 'Скан или код вручную...', icon: Icon, busy, className, inputStyle: inputStyleProp }) {
+  const [code, setCode] = useState('')
+  const [showCamera, setShowCamera] = useState(false)
+
+  const submit = (value) => {
+    const trimmed = value.trim()
+    if (!trimmed) return
+    onScan(trimmed)
+    setCode('')
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); submit(code) }
+  }
+  const handleDetected = (value) => {
+    setShowCamera(false)
+    setCode(value)
+    submit(value)
+  }
+
+  return (
+    <div className={className}>
+      <div style={{ display: 'flex', gap: '6px' }}>
+        <div style={{ position: 'relative', flex: 1 }}>
+          {Icon && <Icon size={15} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-text-muted)' }} />}
+          <input
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={busy}
+            style={{ ...inputStyleProp, paddingLeft: Icon ? '32px' : undefined }}
+          />
+        </div>
+        <button type="button" onClick={() => setShowCamera(true)} disabled={busy} className="btn-outline" style={{ padding: '0 12px' }} title="Сканировать камерой">
+          <Camera size={16} />
+        </button>
+      </div>
+      {showCamera && <CameraScanModal onDetected={handleDetected} onClose={() => setShowCamera(false)} />}
+    </div>
+  )
+}
+
+export default ScanField
diff --git a/production/web/src/ui/Tabs.jsx b/production/web/src/ui/Tabs.jsx
new file mode 100644
index 0000000..fca2245
--- /dev/null
+++ b/production/web/src/ui/Tabs.jsx
@@ -0,0 +1,67 @@
+// Minimal controlled tabs — first use of this pattern in the app (see
+// OrderModal.jsx). Panels stay mounted (display:none when inactive) rather
+// than unmounting, so self-fetching child sections (ServiceItemsSection,
+// PartsUsedSection, CashSection) don't refetch every time staff switches
+// tabs.
+//
+// A tab entry may carry an optional `icon` (a lucide component) — purely
+// decorative accent, not a new requirement, so every existing tabs array
+// without one still renders exactly as before.
+function Tabs({ tabs, activeTab, onChange }) {
+  const handleKeyDown = (e, idx) => {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      onChange(tabs[(idx + 1) % tabs.length].key)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      onChange(tabs[(idx - 1 + tabs.length) % tabs.length].key)
+    }
+  }
+
+  return (
+    <div role="tablist" style={{ display: 'flex', gap: '2px', borderBottom: '1px solid var(--color-border)', padding: '0 20px', overflowX: 'auto' }}>
+      {tabs.map((t, idx) => {
+        const active = activeTab === t.key
+        const Icon = t.icon
+        return (
+          <button
+            key={t.key}
+            type="button"
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={active}
+            aria-controls={`tabpanel-${t.key}`}
+            tabIndex={active ? 0 : -1}
+            onClick={() => onChange(t.key)}
+            onKeyDown={(e) => handleKeyDown(e, idx)}
+            className="tab-trigger"
+            style={{
+              display: 'flex', alignItems: 'center', gap: '6px',
+              padding: '11px 14px 10px', background: active ? 'var(--color-accent-soft)' : 'none',
+              fontSize: '0.85rem', fontWeight: 510,
+              fontFamily: 'var(--font-heading)', whiteSpace: 'nowrap',
+              color: active ? 'var(--color-accent-fg)' : 'var(--color-text-muted)',
+              borderRadius: '8px 8px 0 0',
+              borderBottom: active ? '2px solid var(--color-accent)' : '2px solid transparent',
+              marginBottom: '-1px',
+              transition: 'background-color 140ms var(--ease-out-expo, ease), color 140ms var(--ease-out-expo, ease)',
+            }}
+          >
+            {Icon && <Icon size={14} strokeWidth={active ? 2.3 : 2} style={{ flexShrink: 0 }} />}
+            {t.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export function TabPanel({ tabKey, activeTab, children }) {
+  return (
+    <div role="tabpanel" id={`tabpanel-${tabKey}`} aria-labelledby={`tab-${tabKey}`} style={{ display: activeTab === tabKey ? 'block' : 'none' }}>
+      {children}
+    </div>
+  )
+}
+
+export default Tabs
diff --git a/production/web/src/warranty/WarrantiesPage.jsx b/production/web/src/warranty/WarrantiesPage.jsx
new file mode 100644
index 0000000..4eefa4e
--- /dev/null
+++ b/production/web/src/warranty/WarrantiesPage.jsx
@@ -0,0 +1,148 @@
+import { useState, useEffect, useMemo } from 'react'
+import * as api from '../lib/api'
+import { warrantyStatus, WARRANTY_STATUS_COLORS, formatWarranty } from '../lib/warranty'
+import OrderModal from '../orders/OrderModal'
+
+const FILTER_TABS = [
+  { key: '', label: 'Все' },
+  { key: 'active', label: 'Активные' },
+  { key: 'expiring', label: 'Истекают' },
+  { key: 'expired', label: 'Истекшие' },
+]
+
+const tabStyle = (active) => ({
+  display: 'flex', alignItems: 'center', gap: '7px',
+  padding: '6px 12px', borderRadius: '50px', fontSize: '0.8rem', fontWeight: 510,
+  background: active ? 'var(--color-accent-soft)' : 'var(--color-surface-sunken)',
+  border: `1px solid ${active ? 'var(--color-accent)' : 'var(--color-border)'}`,
+  color: active ? 'var(--color-accent-fg)' : 'var(--text-main)',
+  whiteSpace: 'nowrap',
+})
+
+function CountTile({ label, count, color }) {
+  return (
+    <div className="glass-panel" style={{ padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '120px' }}>
+      <span style={{ fontSize: '1.6rem', fontWeight: 600, color }}>{count}</span>
+      <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{label}</span>
+    </div>
+  )
+}
+
+// Aggregate view of every completed order's warranty coverage — WarrantyBadge
+// (Kanban card, client card, tracking page, order form) only ever shows one
+// order's state at a time; this is the "which warranties need attention
+// right now" screen, grouped by the same three states warranty.js computes
+// everywhere else. Same LIMIT-500-completed-orders tradeoff as
+// OrdersListPage's own SummaryBar — fine for the same reason: an owner
+// checking warranty exposure doesn't need the 501st oldest completed order.
+const WarrantiesPage = () => {
+  const [orders, setOrders] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [filter, setFilter] = useState('')
+  const [selectedOrder, setSelectedOrder] = useState(null)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const all = await api.orders.list({ status: 'completed' })
+      setOrders((all || []).filter((o) => o.warranty_until))
+      setError('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [])
+
+  const withStatus = useMemo(
+    () => orders.map((o) => ({ ...o, _warranty: warrantyStatus(o.warranty_until) })),
+    [orders],
+  )
+  const counts = useMemo(() => ({
+    active: withStatus.filter((o) => o._warranty === 'active').length,
+    expiring: withStatus.filter((o) => o._warranty === 'expiring').length,
+    expired: withStatus.filter((o) => o._warranty === 'expired').length,
+  }), [withStatus])
+  const filtered = filter ? withStatus.filter((o) => o._warranty === filter) : withStatus
+  const sorted = [...filtered].sort((a, b) => new Date(a.warranty_until) - new Date(b.warranty_until))
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginBottom: '18px' }}>
+        <CountTile label="Активные" count={counts.active} color={WARRANTY_STATUS_COLORS.active} />
+        <CountTile label="Истекают" count={counts.expiring} color={WARRANTY_STATUS_COLORS.expiring} />
+        <CountTile label="Истекшие" count={counts.expired} color={WARRANTY_STATUS_COLORS.expired} />
+      </div>
+
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
+        {FILTER_TABS.map((t) => (
+          <button key={t.key} type="button" onClick={() => setFilter(t.key)} style={tabStyle(filter === t.key)}>
+            {t.label}
+          </button>
+        ))}
+        <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginLeft: 'auto' }}>
+          {loading ? 'Загрузка...' : `Найдено: ${sorted.length}`}
+        </span>
+      </div>
+
+      {error && <p style={{ color: 'var(--accent-red)', fontSize: '0.85rem', marginBottom: '12px' }}>{error}</p>}
+
+      <div className="glass-panel" style={{ overflowX: 'auto' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid var(--border-light)', textAlign: 'left' }}>
+              <th style={{ padding: '12px 14px' }}>№</th>
+              <th style={{ padding: '12px 14px' }}>Устройство</th>
+              <th style={{ padding: '12px 14px' }}>Мастер</th>
+              <th style={{ padding: '12px 14px' }}>Гарантия</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((o) => (
+              <tr
+                key={o.id}
+                onClick={() => setSelectedOrder(o)}
+                className="list-row"
+                style={{
+                  borderBottom: '1px solid var(--border-light)', cursor: 'pointer',
+                  borderLeft: `3px solid ${WARRANTY_STATUS_COLORS[o._warranty]}`,
+                }}
+              >
+                <td style={{ padding: '10px 14px', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{o.order_number || '—'}</td>
+                <td style={{ padding: '10px 14px' }}>
+                  {o.device_type}{o.device_brand ? ` · ${o.device_brand}` : ''}{o.device_model ? ` ${o.device_model}` : ''}
+                </td>
+                <td style={{ padding: '10px 14px', color: 'var(--text-muted)' }}>{o.assigned_master_name || '—'}</td>
+                <td style={{ padding: '10px 14px', fontWeight: 510, color: WARRANTY_STATUS_COLORS[o._warranty] }}>
+                  {formatWarranty(o.warranty_until)}
+                </td>
+              </tr>
+            ))}
+            {!loading && sorted.length === 0 && (
+              <tr>
+                <td colSpan={4} style={{ padding: '24px', textAlign: 'center', color: 'var(--text-muted)' }}>
+                  Ничего не найдено
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {selectedOrder && (
+        <OrderModal
+          orderId={selectedOrder.id}
+          mode="edit"
+          onClose={() => { setSelectedOrder(null); load() }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default WarrantiesPage
diff --git a/production/web/src/warranty/WarrantyClaimsPage.jsx b/production/web/src/warranty/WarrantyClaimsPage.jsx
new file mode 100644
index 0000000..4665c6a
--- /dev/null
+++ b/production/web/src/warranty/WarrantyClaimsPage.jsx
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { ShieldCheck } from 'lucide-react'
+import { useWarrantyClaims } from './useWarrantyClaims'
+import { useOrderStatuses } from '../orders/statuses'
+import OrderModal from '../orders/OrderModal'
+
+const WarrantyClaimsPage = () => {
+  const { labels: STATUS_LABELS, colors: STATUS_COLORS } = useOrderStatuses()
+  const { claims, loading, reload } = useWarrantyClaims()
+  const [selectedId, setSelectedId] = useState(null)
+
+  return (
+    <div>
+      <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '18px' }}>
+        Заказы, оформленные как гарантийный случай (со ссылкой на исходный заказ) — независимо от текущего статуса.
+      </p>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Загрузка...</p>
+      ) : (
+        <div className="glass-panel" style={{ overflow: 'hidden' }}>
+          {claims.length === 0 && <p style={{ padding: '20px', color: 'var(--text-muted)' }}>Гарантийных случаев нет</p>}
+          {claims.map((o) => (
+            <button
+              key={o.id}
+              onClick={() => setSelectedId(o.id)}
+              className="list-row"
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
+                padding: '14px 18px', borderBottom: '1px solid var(--border-light)', background: 'var(--color-surface)',
+                color: 'var(--text-main)',
+                fontFamily: 'var(--font-body)', fontWeight: 400, textAlign: 'left',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <ShieldCheck size={16} color="var(--accent-green)" />
+                <div>
+                  {o.order_number && <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontWeight: 510 }}>№ {o.order_number}</p>}
+                  <p style={{ fontWeight: 510, fontSize: '0.92rem' }}>{o.device_type}{o.device_brand ? ` · ${o.device_brand}` : ''}</p>
+                  <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{new Date(o.created_at).toLocaleDateString('ru-RU')}</p>
+                </div>
+              </div>
+              <span style={{
+                fontSize: '0.72rem', fontWeight: 590, color: STATUS_COLORS[o.status],
+                background: 'rgba(100,116,139,0.08)', padding: '2px 9px', borderRadius: '50px', flexShrink: 0,
+              }}>
+                {STATUS_LABELS[o.status] || o.status}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {selectedId && (
+        <OrderModal mode="edit" orderId={selectedId} onClose={() => setSelectedId(null)} onSaved={reload} />
+      )}
+    </div>
+  )
+}
+
+export default WarrantyClaimsPage
diff --git a/production/web/src/warranty/useWarrantyClaims.js b/production/web/src/warranty/useWarrantyClaims.js
new file mode 100644
index 0000000..10d6747
--- /dev/null
+++ b/production/web/src/warranty/useWarrantyClaims.js
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as api from '../lib/api'
+
+// Warranty claims are just orders filtered server-side by
+// ?is_warranty_claim=true (internal/order.List) — no separate entity.
+export function useWarrantyClaims() {
+  const [claims, setClaims] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      setClaims(await api.orders.list({ is_warranty_claim: 'true' }))
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    (async () => { await load() })()
+  }, [load])
+
+  return { claims, loading, reload: load }
+}
diff --git a/production/web/vite.config.js b/production/web/vite.config.js
new file mode 100644
index 0000000..d150c14
--- /dev/null
+++ b/production/web/vite.config.js
@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    // Installable home-screen app for masters — app-shell only (JS/CSS/
+    // icons precached so it opens fast), no offline data story: order/
+    // Kanban state changes need a live connection, so every /api/ request
+    // is explicitly NetworkOnly below rather than ever risking stale stock
+    // levels or order status served from a cache.
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.png', 'apple-touch-icon.png'],
+      manifest: {
+        name: 'Aura CRM — панель управления',
+        short_name: 'Aura CRM',
+        description: 'CRM для сервисного центра: заявки, картриджи, склад, касса',
+        lang: 'ru',
+        theme_color: '#4361ee',
+        background_color: '#ffffff',
+        display: 'standalone',
+        start_url: '/',
+        scope: '/',
+        icons: [
+          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+          { src: 'pwa-maskable-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+        ],
+      },
+      workbox: {
+        // The SPA fallback (unmatched navigations → index.html) must never
+        // catch an API path — an offline/unmatched /api/orders/123 should
+        // 404-equivalent-fail visibly, not silently return the app shell.
+        navigateFallbackDenylist: [/^\/api\//],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }) => url.pathname.startsWith('/api/'),
+            handler: 'NetworkOnly',
+          },
+        ],
+      },
+    }),
+  ],
+})

AI-сводка

{title}

{title}

Главная

{title}

+ Вход в панель +