From df3558b63ae3e82221ee56d668ffab4bd1ce11a0 Mon Sep 17 00:00:00 2001
From: "gorbenko.pavel" <gorbenko.pavel@tansu.kz>
Date: Wed, 29 Jul 2026 17:08:52 +0500
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ApprovalAdmin.tsx              |   7 +-
 .../approvalAdmin/components/app/TopNav.tsx   |  13 +-
 .../screens/DashboardScreen.module.scss       |  17 +
 .../components/screens/DashboardScreen.tsx    |  43 ++-
 .../components/screens/RequestTypesScreen.tsx | 134 +++----
 .../screens/ResolveScreen.module.scss         |   3 +
 .../components/screens/ResolveScreen.tsx      | 133 +++----
 .../components/screens/RouteFormModal.tsx     | 188 ++++++++++
 .../components/screens/RouteStepFormModal.tsx | 206 +++++++++++
 .../components/screens/RouteStepsScreen.tsx   | 327 +++---------------
 .../screens/RoutesScreen.module.scss          |   4 +
 .../components/screens/RoutesScreen.tsx       | 327 ++++--------------
 .../components/ui/ActionsCell.tsx             |   7 +
 .../components/ui/AsyncSearchableSelect.tsx   |  11 +-
 .../components/ui/Breadcrumbs.tsx             |  27 ++
 .../approvalAdmin/components/ui/Button.tsx    |  15 -
 .../approvalAdmin/components/ui/CardGrid.tsx  |  11 +
 .../approvalAdmin/components/ui/CellNote.tsx  |  17 +
 .../approvalAdmin/components/ui/Checkbox.tsx  |  22 ++
 .../components/ui/ConfirmDialog.tsx           |  33 ++
 .../approvalAdmin/components/ui/DataTable.tsx |  17 -
 .../approvalAdmin/components/ui/Field.tsx     |  24 ++
 .../approvalAdmin/components/ui/FormField.tsx | 111 ------
 .../approvalAdmin/components/ui/FormGrid.tsx  |  11 +
 .../approvalAdmin/components/ui/FormModal.tsx |  37 ++
 .../components/ui/Icon.module.scss            |   9 +
 .../approvalAdmin/components/ui/Icon.tsx      |  17 +-
 .../components/ui/IconButton.tsx              |  19 +
 .../approvalAdmin/components/ui/Modal.tsx     |  28 +-
 .../components/ui/{Card.tsx => NavCard.tsx}   |  16 +-
 .../ui/{PageChrome.tsx => PageHeader.tsx}     |  21 +-
 .../components/ui/Panel.module.scss           |  10 +
 .../approvalAdmin/components/ui/Panel.tsx     |  11 +
 .../components/ui/PrimaryCell.tsx             |   7 +
 .../components/ui/RadioGroup.tsx              |  40 +++
 .../components/ui/SearchableSelect.tsx        |  15 +-
 .../approvalAdmin/components/ui/Select.tsx    |  21 ++
 .../approvalAdmin/components/ui/StatCard.tsx  |  14 +
 .../approvalAdmin/components/ui/StatRow.tsx   |  11 +
 .../approvalAdmin/components/ui/TextInput.tsx |   6 +
 .../approvalAdmin/components/ui/Textarea.tsx  |   6 +
 .../approvalAdmin/components/ui/index.ts      |  23 +-
 .../approvalAdmin/hooks/useAsyncList.ts       |  34 ++
 .../approvalAdmin/hooks/useAsyncSubmit.ts     |  30 ++
 .../approvalAdmin/hooks/useDeleteTarget.ts    |  40 +++
 .../hooks/usePortalDictionaries.ts            |  39 +++
 .../approvalAdmin/hooks/useRequestTypes.ts    |  10 +
 .../approvalAdmin/hooks/useResolveRoute.ts    |  27 ++
 .../approvalAdmin/hooks/useRouteSteps.ts      |  17 +
 .../approvalAdmin/hooks/useTemplateRoutes.ts  |  10 +
 .../approvalAdmin/models/dictionaries.ts      |  24 ++
 .../webparts/approvalAdmin/models/enums.ts    |  30 ++
 .../webparts/approvalAdmin/models/index.ts    | 227 +-----------
 .../approvalAdmin/models/requestTypes.ts      |  19 +
 .../webparts/approvalAdmin/models/resolve.ts  |  28 ++
 .../models/templateRouteSteps.ts              |  45 +++
 .../approvalAdmin/models/templateRoutes.ts    |  39 +++
 frontend/src/webparts/approvalAdmin/texts.ts  | 240 +++++++++++++
 .../src/webparts/approvalAdmin/utils/guid.ts  |  10 +
 .../webparts/approvalAdmin/utils/plural.ts    |  16 +
 .../approvalAdmin/utils/stepExecutor.ts       |  28 ++
 61 files changed, 1743 insertions(+), 1189 deletions(-)
 create mode 100644 frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.module.scss
 create mode 100644 frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.module.scss
 create mode 100644 frontend/src/webparts/approvalAdmin/components/screens/RouteFormModal.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/screens/RouteStepFormModal.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.module.scss
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/ActionsCell.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Breadcrumbs.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/CardGrid.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/CellNote.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Checkbox.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/ConfirmDialog.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Field.tsx
 delete mode 100644 frontend/src/webparts/approvalAdmin/components/ui/FormField.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/FormGrid.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/FormModal.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Icon.module.scss
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/IconButton.tsx
 rename frontend/src/webparts/approvalAdmin/components/ui/{Card.tsx => NavCard.tsx} (57%)
 rename frontend/src/webparts/approvalAdmin/components/ui/{PageChrome.tsx => PageHeader.tsx} (55%)
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Panel.module.scss
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Panel.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/PrimaryCell.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/RadioGroup.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Select.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/StatCard.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/StatRow.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/TextInput.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/components/ui/Textarea.tsx
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useAsyncList.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useAsyncSubmit.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useDeleteTarget.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/usePortalDictionaries.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useRequestTypes.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useResolveRoute.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useRouteSteps.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/hooks/useTemplateRoutes.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/dictionaries.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/enums.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/requestTypes.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/resolve.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/templateRouteSteps.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/models/templateRoutes.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/texts.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/utils/guid.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/utils/plural.ts
 create mode 100644 frontend/src/webparts/approvalAdmin/utils/stepExecutor.ts

diff --git a/frontend/src/webparts/approvalAdmin/components/ApprovalAdmin.tsx b/frontend/src/webparts/approvalAdmin/components/ApprovalAdmin.tsx
index d4f0df1..7064d0c 100644
--- a/frontend/src/webparts/approvalAdmin/components/ApprovalAdmin.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ApprovalAdmin.tsx
@@ -5,6 +5,7 @@ import { AdminApp } from './app/AdminApp';
 import { ApprovalRouteApi } from '../services/api';
 import { AadApiHttpClient, DevApiHttpClient, IHttpClient } from '../services/httpClient';
 import { PortalDictionaryClient } from '../services/portalDictionary';
+import { texts } from '../texts';
 
 const FONTS_LINK_ID = 'tnsu-approval-admin-fonts';
 
@@ -69,12 +70,12 @@ const ApprovalAdmin: React.FC<IApprovalAdminProps> = props => {
     <section className={styles.approvalAdmin}>
       {error && (
         <div className={styles.stateBox}>
-          Не удалось подключиться к API: {error}
+          {texts.app.connectFailed(error)}
           <br />
-          Проверьте свойства веб-части (Api Base Url, режим авторизации) в панели настроек.
+          {texts.app.connectHint}
         </div>
       )}
-      {!error && !api && <div className={styles.stateBox}>Подключение к API...</div>}
+      {!error && !api && <div className={styles.stateBox}>{texts.app.connecting}</div>}
       {api && (
         <AdminApp
           api={api}
diff --git a/frontend/src/webparts/approvalAdmin/components/app/TopNav.tsx b/frontend/src/webparts/approvalAdmin/components/app/TopNav.tsx
index 88f4d28..f47167f 100644
--- a/frontend/src/webparts/approvalAdmin/components/app/TopNav.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/app/TopNav.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from './TopNav.module.scss';
 import { ScreenKey } from './types';
+import { texts } from '../../texts';
 
 interface ITab {
   key: ScreenKey;
@@ -8,10 +9,10 @@ interface ITab {
 }
 
 const TABS: ITab[] = [
-  { key: 'dashboard', label: 'Дашборд' },
-  { key: 'requestTypes', label: 'Типы заявок' },
-  { key: 'routes', label: 'Маршруты' },
-  { key: 'resolve', label: 'Проверка маршрута' }
+  { key: 'dashboard', label: texts.nav.dashboard },
+  { key: 'requestTypes', label: texts.nav.requestTypes },
+  { key: 'routes', label: texts.nav.routes },
+  { key: 'resolve', label: texts.nav.resolve }
 ];
 
 export interface ITopNavProps {
@@ -71,8 +72,8 @@ export const TopNav: React.FC<ITopNavProps> = ({ active, onSelect }) => {
   return (
     <nav className={styles.topnav}>
       <div className={styles.brand}>
-        <div className={styles.mark}>T</div>
-        <div className={styles.brandText}>TNSU <em>Approval Route</em></div>
+        <div className={styles.mark}>{texts.nav.brand.charAt(0)}</div>
+        <div className={styles.brandText}>{texts.nav.brand} <em>{texts.nav.brandAccent}</em></div>
       </div>
       <div className={styles.tabs} ref={tabsRef}>
         {TABS.map(tab => {
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.module.scss b/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.module.scss
new file mode 100644
index 0000000..18ab797
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.module.scss
@@ -0,0 +1,17 @@
+@import '../../../../styles/design-tokens';
+
+.sectionsLabel {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1.6px;
+  color: $gray-400;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.sectionsDivider {
+  height: 1px;
+  background: linear-gradient(90deg, $gold-400, transparent 70%);
+  border: 0;
+  margin: 6px 0 22px;
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.tsx b/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.tsx
index 9bb51b5..dd12dd5 100644
--- a/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/screens/DashboardScreen.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
+import styles from './DashboardScreen.module.scss';
 import { ApprovalRouteApi } from '../../services/api';
 import { ScreenKey } from '../app/types';
+import { texts } from '../../texts';
+import { useRequestTypes } from '../../hooks/useRequestTypes';
+import { useTemplateRoutes } from '../../hooks/useTemplateRoutes';
+import { AsyncList } from '../../hooks/useAsyncList';
 import { CardGrid, NavCard, StatCard, StatRow } from '../ui';
 
 export interface IDashboardScreenProps {
@@ -8,43 +13,43 @@ export interface IDashboardScreenProps {
   onNavigate: (key: ScreenKey) => void;
 }
 
-export const DashboardScreen: React.FC<IDashboardScreenProps> = ({ api, onNavigate }) => {
-  const [requestTypesCount, setRequestTypesCount] = React.useState<number | undefined>();
-  const [routesCount, setRoutesCount] = React.useState<number | undefined>();
+// Пока список грузится или запрос упал — показываем прочерк, а не «0»,
+// чтобы не соврать пользователю про реальное количество записей.
+function statValue(list: AsyncList<unknown>): React.ReactNode {
+  if (list.isLoading || list.error) return texts.common.empty;
+  return list.items.length;
+}
 
-  React.useEffect(() => {
-    api.requestTypes.list().then(items => setRequestTypesCount(items.length)).catch(() => setRequestTypesCount(undefined));
-    api.templateRoutes.list().then(items => setRoutesCount(items.length)).catch(() => setRoutesCount(undefined));
-  }, [api]);
+export const DashboardScreen: React.FC<IDashboardScreenProps> = ({ api, onNavigate }) => {
+  const requestTypes = useRequestTypes(api);
+  const routes = useTemplateRoutes(api);
 
   return (
     <div>
       <StatRow>
-        <StatCard label="Типов заявок" value={requestTypesCount ?? '—'} />
-        <StatCard label="Маршрутов согласования" value={routesCount ?? '—'} />
+        <StatCard label={texts.dashboard.requestTypesStat} value={statValue(requestTypes)} />
+        <StatCard label={texts.dashboard.routesStat} value={statValue(routes)} />
       </StatRow>
 
-      <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.6, color: 'var(--gray-400)', fontWeight: 600, marginBottom: 12 }}>
-        Разделы
-      </div>
-      <hr style={{ height: 1, background: 'linear-gradient(90deg, var(--gold-400), transparent 70%)', border: 0, margin: '6px 0 22px' }} />
+      <div className={styles.sectionsLabel}>{texts.dashboard.sections}</div>
+      <hr className={styles.sectionsDivider} />
       <CardGrid>
         <NavCard
           icon="clipboard"
-          title="Типы заявок"
-          description="Справочник типов заявок и их страниц"
+          title={texts.dashboard.requestTypesCard.title}
+          description={texts.dashboard.requestTypesCard.description}
           onClick={() => onNavigate('requestTypes')}
         />
         <NavCard
           icon="route"
-          title="Маршруты согласования"
-          description="Маршруты, шаги и исполнители"
+          title={texts.dashboard.routesCard.title}
+          description={texts.dashboard.routesCard.description}
           onClick={() => onNavigate('routes')}
         />
         <NavCard
           icon="search"
-          title="Проверка маршрута"
-          description="Как разрешится маршрут для конкретного пользователя"
+          title={texts.dashboard.resolveCard.title}
+          description={texts.dashboard.resolveCard.description}
           onClick={() => onNavigate('resolve')}
         />
       </CardGrid>
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RequestTypesScreen.tsx b/frontend/src/webparts/approvalAdmin/components/screens/RequestTypesScreen.tsx
index b6dc64d..2fcb723 100644
--- a/frontend/src/webparts/approvalAdmin/components/screens/RequestTypesScreen.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RequestTypesScreen.tsx
@@ -1,18 +1,21 @@
 import * as React from 'react';
 import { ApprovalRouteApi } from '../../services/api';
-import { ApiClientError } from '../../services/httpClient';
 import { RequestType } from '../../models';
+import { texts } from '../../texts';
+import { useRequestTypes } from '../../hooks/useRequestTypes';
+import { useAsyncSubmit } from '../../hooks/useAsyncSubmit';
+import { useDeleteTarget } from '../../hooks/useDeleteTarget';
 import {
   ActionsCell,
   Alert,
   Breadcrumbs,
   Button,
+  ConfirmDialog,
   DataTable,
   Field,
   FormGrid,
+  FormModal,
   IconButton,
-  Modal,
-  ConfirmDialog,
   PageHeader,
   PrimaryCell,
   TextInput
@@ -30,99 +33,60 @@ interface IFormState {
 const EMPTY_FORM: IFormState = { name: '', pageUrl: '' };
 
 export const RequestTypesScreen: React.FC<IRequestTypesScreenProps> = ({ api }) => {
-  const [items, setItems] = React.useState<RequestType[]>([]);
-  const [loading, setLoading] = React.useState(true);
-  const [loadError, setLoadError] = React.useState<string | undefined>();
+  const list = useRequestTypes(api);
 
   const [editing, setEditing] = React.useState<RequestType | undefined>();
   const [showForm, setShowForm] = React.useState(false);
   const [form, setForm] = React.useState<IFormState>(EMPTY_FORM);
-  const [formError, setFormError] = React.useState<string | undefined>();
-  const [saving, setSaving] = React.useState(false);
+  const submit = useAsyncSubmit();
 
-  const [deleting, setDeleting] = React.useState<RequestType | undefined>();
-  const [deleteError, setDeleteError] = React.useState<string | undefined>();
-  const [deleteBusy, setDeleteBusy] = React.useState(false);
-
-  const load = React.useCallback(() => {
-    setLoading(true);
-    setLoadError(undefined);
-    api.requestTypes
-      .list()
-      .then(setItems)
-      .catch((e: ApiClientError) => setLoadError(e.message))
-      .finally(() => setLoading(false));
-  }, [api]);
-
-  React.useEffect(() => { load(); }, [load]);
+  const deleteTarget = useDeleteTarget<RequestType>(item => api.requestTypes.remove(item.id), list.reload);
 
   const openCreate = (): void => {
     setEditing(undefined);
     setForm(EMPTY_FORM);
-    setFormError(undefined);
     setShowForm(true);
   };
 
   const openEdit = (item: RequestType): void => {
     setEditing(item);
     setForm({ name: item.name, pageUrl: item.pageUrl });
-    setFormError(undefined);
     setShowForm(true);
   };
 
-  const submit = (): void => {
+  const submitForm = (): void => {
     if (!form.name.trim() || !form.pageUrl.trim()) {
-      setFormError('Заполните имя и Url страницы.');
+      submit.fail(texts.requestTypes.validationRequired);
       return;
     }
-    setSaving(true);
-    setFormError(undefined);
-    const request = editing
-      ? api.requestTypes.update(editing.id, { name: form.name.trim(), pageUrl: form.pageUrl.trim() })
-      : api.requestTypes.create({ name: form.name.trim(), pageUrl: form.pageUrl.trim() });
+    const input = { name: form.name.trim(), pageUrl: form.pageUrl.trim() };
+    const request = editing ? api.requestTypes.update(editing.id, input) : api.requestTypes.create(input);
 
-    request
-      .then(() => {
+    submit.run(() =>
+      request.then(() => {
         setShowForm(false);
-        load();
+        list.reload();
       })
-      .catch((e: ApiClientError) => setFormError(e.message))
-      .finally(() => setSaving(false));
-  };
-
-  const confirmDelete = (): void => {
-    if (!deleting) return;
-    setDeleteBusy(true);
-    setDeleteError(undefined);
-    api.requestTypes
-      .remove(deleting.id)
-      .then(() => {
-        setDeleting(undefined);
-        load();
-      })
-      .catch((e: ApiClientError) => setDeleteError(e.message))
-      .finally(() => setDeleteBusy(false));
+    );
   };
 
   return (
     <div>
-      <Breadcrumbs items={[{ label: 'Главная' }, { label: 'Типы заявок' }]} />
+      <Breadcrumbs items={[{ label: texts.common.home }, { label: texts.requestTypes.breadcrumb }]} />
       <PageHeader
         icon="clipboard"
-        subtitle="Справочник"
-        title="Типы заявок"
-        actions={
-          <Button variant="accent" icon="plus" onClick={openCreate}>Добавить тип</Button>
-        }
+        subtitle={texts.requestTypes.subtitle}
+        title={texts.requestTypes.title}
+        actions={<Button variant="accent" icon="plus" onClick={openCreate}>{texts.requestTypes.add}</Button>}
       />
 
-      {loadError && <Alert kind="err">{loadError}</Alert>}
-      {deleteError && <Alert kind="err">{deleteError}</Alert>}
+      {list.error && <Alert kind="err">{list.error}</Alert>}
+      {deleteTarget.error && <Alert kind="err">{deleteTarget.error}</Alert>}
 
       <DataTable
         columns={[
-          { key: 'name', header: 'Название', render: r => <PrimaryCell>{r.name}</PrimaryCell> },
-          { key: 'url', header: 'Url страницы', render: r => r.pageUrl },
+          { key: 'name', header: texts.requestTypes.columnName, render: r => <PrimaryCell>{r.name}</PrimaryCell> },
+          { key: 'url', header: texts.requestTypes.columnPageUrl, render: r => r.pageUrl },
           {
             key: 'actions',
             header: '',
@@ -131,58 +95,52 @@ export const RequestTypesScreen: React.FC<IRequestTypesScreenProps> = ({ api })
             sticky: true,
             render: r => (
               <ActionsCell>
-                <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
-                <IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
+                <IconButton icon="edit" label={texts.common.edit} onClick={() => openEdit(r)} />
+                <IconButton icon="trash" label={texts.common.remove} danger onClick={() => deleteTarget.ask(r)} />
               </ActionsCell>
             )
           }
         ]}
-        rows={items}
+        rows={list.items}
         keyOf={r => r.id}
-        emptyMessage={loading ? 'Загрузка...' : 'Типов заявок пока нет.'}
+        emptyMessage={list.isLoading ? texts.common.loading : texts.requestTypes.emptyList}
       />
 
       {showForm && (
-        <Modal
-          title={editing ? 'Редактировать тип заявки' : 'Новый тип заявки'}
+        <FormModal
+          title={editing ? texts.requestTypes.editTitle : texts.requestTypes.createTitle}
+          error={submit.error}
+          isSaving={submit.isBusy}
+          onSubmit={submitForm}
           onClose={() => setShowForm(false)}
-          footer={
-            <>
-              <Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
-              <Button variant="accent" icon="check" onClick={submit} disabled={saving}>
-                {saving ? 'Сохранение...' : 'Сохранить'}
-              </Button>
-            </>
-          }
         >
-          {formError && <Alert kind="err">{formError}</Alert>}
           <FormGrid>
-            <Field label="Название" required full>
+            <Field label={texts.requestTypes.nameLabel} required full>
               <TextInput
                 value={form.name}
                 onChange={e => setForm({ ...form, name: e.target.value })}
-                placeholder="Например, Заявка на командировку"
+                placeholder={texts.requestTypes.namePlaceholder}
               />
             </Field>
-            <Field label="Url страницы" required full hint="Страница формы заявки на портале.">
+            <Field label={texts.requestTypes.pageUrlLabel} required full hint={texts.requestTypes.pageUrlHint}>
               <TextInput
                 value={form.pageUrl}
                 onChange={e => setForm({ ...form, pageUrl: e.target.value })}
-                placeholder="/pages/business-trip"
+                placeholder={texts.requestTypes.pageUrlPlaceholder}
               />
             </Field>
           </FormGrid>
-        </Modal>
+        </FormModal>
       )}
 
-      {deleting && (
+      {deleteTarget.target && (
         <ConfirmDialog
-          title="Удалить тип заявки?"
-          text={`Тип «${deleting.name}» будет удалён безвозвратно. Связанные маршруты могут перестать разрешаться.`}
-          confirmLabel="Удалить"
-          busy={deleteBusy}
-          onCancel={() => setDeleting(undefined)}
-          onConfirm={confirmDelete}
+          title={texts.requestTypes.deleteTitle}
+          text={texts.requestTypes.deleteText(deleteTarget.target.name)}
+          confirmLabel={texts.common.remove}
+          busy={deleteTarget.isBusy}
+          onCancel={deleteTarget.cancel}
+          onConfirm={deleteTarget.confirm}
         />
       )}
     </div>
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.module.scss b/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.module.scss
new file mode 100644
index 0000000..add0064
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.module.scss
@@ -0,0 +1,3 @@
+.runButtonRow {
+  margin-top: 18px;
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.tsx b/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.tsx
index 4691e1a..4279103 100644
--- a/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/screens/ResolveScreen.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
+import styles from './ResolveScreen.module.scss';
 import { ApprovalRouteApi } from '../../services/api';
-import { ApiClientError } from '../../services/httpClient';
 import { PortalDictionaryClient } from '../../services/portalDictionary';
-import {
-  Project,
-  RequestType,
-  ResolveTemplateRouteResult,
-  routeStepStatusLabels,
-  RouteStepStatus,
-  routeTypeLabels
-} from '../../models';
+import { Project, RouteStepStatus } from '../../models';
+import { routeStepStatusLabels, routeTypeLabels, texts } from '../../texts';
+import { useRequestTypes } from '../../hooks/useRequestTypes';
+import { useResolveRoute } from '../../hooks/useResolveRoute';
 import {
   Alert,
   AsyncSearchableSelect,
@@ -20,6 +16,7 @@ import {
   Field,
   FormGrid,
   PageHeader,
+  Panel,
   PrimaryCell,
   Select,
   TextInput
@@ -35,93 +32,72 @@ export interface IResolveScreenProps {
 const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
   .map(v => ({ value: v, label: routeStepStatusLabels[v] }));
 
-function stepsWord(count: number): string {
-  const mod100 = count % 100;
-  const mod10 = count % 10;
-  if (mod100 >= 11 && mod100 <= 14) return 'шагах';
-  if (mod10 === 1) return 'шаге';
-  return 'шагах';
-}
-
 export const ResolveScreen: React.FC<IResolveScreenProps> = ({ api, dictionary, currentUserEmail }) => {
-  const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
+  const requestTypes = useRequestTypes(api);
   const [requestTypeId, setRequestTypeId] = React.useState('');
   const [userEmail, setUserEmail] = React.useState('');
   const [projectId, setProjectId] = React.useState('');
   const [projectLabel, setProjectLabel] = React.useState('');
   const [status, setStatus] = React.useState<RouteStepStatus>(RouteStepStatus.Approval);
 
-  const [busy, setBusy] = React.useState(false);
-  const [error, setError] = React.useState<string | undefined>();
-  const [result, setResult] = React.useState<ResolveTemplateRouteResult | undefined>();
-
-  React.useEffect(() => {
-    api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается при попытке проверки */ });
-  }, [api]);
+  const resolved = useResolveRoute(api);
 
   const searchProjects = React.useCallback(
     (query: string, page: number) => {
       if (!dictionary) {
-        return Promise.reject(new Error('Справочник проектов ещё загружается.'));
+        return Promise.reject(new Error(texts.resolve.projectDictionaryLoading));
       }
       return dictionary.searchProjects(query, page);
     },
     [dictionary]
   );
 
-  const unresolvedCount = result ? result.steps.filter(s => !s.executorEmail).length : 0;
-
   const run = (): void => {
     if (!requestTypeId) {
-      setError('Выберите тип заявки.');
+      resolved.fail(texts.resolve.validationRequestType);
       return;
     }
-    setBusy(true);
-    setError(undefined);
-    setResult(undefined);
-    api.templateRoutes
-      .resolve({
-        requestTypeId: Number(requestTypeId),
-        userEmail: userEmail.trim() || undefined,
-        projectId: projectId.trim() || undefined,
-        status
-      })
-      .then(setResult)
-      .catch((e: ApiClientError) => setError(e.message))
-      .finally(() => setBusy(false));
+    resolved.resolve({
+      requestTypeId: Number(requestTypeId),
+      userEmail: userEmail.trim() || undefined,
+      projectId: projectId.trim() || undefined,
+      status
+    });
   };
 
+  const result = resolved.result;
+  const unresolvedCount = result ? result.steps.filter(s => !s.executorEmail).length : 0;
+
   return (
     <div>
-      <Breadcrumbs items={[{ label: 'Главная' }, { label: 'Проверка маршрута' }]} />
-      <PageHeader
-        icon="search"
-        subtitle="Диагностика"
-        title="Проверка разрешения маршрута"
-      />
+      <Breadcrumbs items={[{ label: texts.common.home }, { label: texts.resolve.breadcrumb }]} />
+      <PageHeader icon="search" subtitle={texts.resolve.subtitle} title={texts.resolve.title} />
 
-      <div style={{ background: '#fff', borderRadius: 14, padding: 26, boxShadow: 'var(--sh-1)', border: '1px solid var(--gray-200)', marginBottom: 24 }}>
+      <Panel>
         <FormGrid>
-          <Field label="Тип заявки" required full>
+          <Field label={texts.resolve.requestTypeLabel} required full>
             <Select
-              options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
-              placeholder="Выберите тип заявки"
+              options={requestTypes.items.map(rt => ({ value: String(rt.id), label: rt.name }))}
+              placeholder={texts.resolve.requestTypePlaceholder}
               value={requestTypeId}
               onChange={e => setRequestTypeId(e.target.value)}
             />
           </Field>
-          <Field label="Email инициатора" hint={currentUserEmail ? `Пусто = текущий пользователь (${currentUserEmail}).` : 'Пусто = текущий пользователь из токена.'}>
-            <TextInput value={userEmail} onChange={e => setUserEmail(e.target.value)} placeholder="user@tnsu.kz" />
+          <Field
+            label={texts.resolve.userEmailLabel}
+            hint={currentUserEmail ? texts.resolve.userEmailHint(currentUserEmail) : texts.resolve.userEmailHintUnknown}
+          >
+            <TextInput value={userEmail} onChange={e => setUserEmail(e.target.value)} placeholder={texts.resolve.userEmailPlaceholder} />
           </Field>
-          <Field label="Проект" hint="Заполните, если маршрут зависит от проекта (ByProject = true).">
+          <Field label={texts.resolve.projectLabel} hint={texts.resolve.projectHint}>
             <AsyncSearchableSelect<Project>
               value={projectId}
               selectedLabel={projectLabel}
               disabled={!dictionary}
               allowClear
-              clearLabel="Без проекта"
-              placeholder={dictionary ? 'Не выбран' : 'Справочник загружается...'}
-              searchPlaceholder="Поиск проекта по названию..."
+              clearLabel={texts.resolve.projectClear}
+              placeholder={dictionary ? texts.resolve.projectPlaceholder : texts.resolve.projectLoadingPlaceholder}
+              searchPlaceholder={texts.resolve.projectSearchPlaceholder}
               search={searchProjects}
               getValue={p => p.oid}
               getLabel={p => p.name}
@@ -132,65 +108,58 @@ export const ResolveScreen: React.FC<IResolveScreenProps> = ({ api, dictionary,
               }}
             />
           </Field>
-          <Field label="Статус" required>
+          <Field label={texts.resolve.statusLabel} required>
             <Select options={STATUS_OPTIONS} value={status} onChange={e => setStatus(e.target.value as RouteStepStatus)} />
           </Field>
         </FormGrid>
-        <div style={{ marginTop: 18 }}>
-          <Button variant="accent" icon="search" onClick={run} disabled={busy}>
-            {busy ? 'Проверка...' : 'Проверить'}
+        <div className={styles.runButtonRow}>
+          <Button variant="accent" icon="search" onClick={run} disabled={resolved.isBusy}>
+            {resolved.isBusy ? texts.resolve.running : texts.resolve.run}
           </Button>
         </div>
-      </div>
+      </Panel>
 
-      {error && <Alert kind="err">{error}</Alert>}
+      {resolved.error && <Alert kind="err">{resolved.error}</Alert>}
 
       {result && (
         <>
           <Alert kind="ok">
-            Маршрут #{result.routeId} · {routeTypeLabels[result.routeType]}
-            {result.requiresControl ? ' · требуется контроль исполнения' : ''}
+            {texts.resolve.summary(result.routeId, routeTypeLabels[result.routeType], result.requiresControl)}
           </Alert>
-          {unresolvedCount > 0 && (
-            <Alert kind="warn">
-              Исполнитель не определён на {unresolvedCount} {stepsWord(unresolvedCount)} — причина указана в строке шага.
-            </Alert>
-          )}
+          {unresolvedCount > 0 && <Alert kind="warn">{texts.resolve.unresolved(unresolvedCount)}</Alert>}
           <DataTable
             columns={[
-              { key: 'order', header: '№', width: '50px', render: r => r.orderNo },
+              { key: 'order', header: texts.resolve.columnOrderNo, width: '50px', render: r => r.orderNo },
               {
                 key: 'executor',
-                header: 'Исполнитель',
+                header: texts.resolve.columnExecutor,
                 render: r => (
                   <div>
-                    <PrimaryCell>{r.executorEmail ?? '—'}</PrimaryCell>
+                    <PrimaryCell>{r.executorEmail ?? texts.common.empty}</PrimaryCell>
                     {r.warning && <CellNote kind="warn">{r.warning}</CellNote>}
                   </div>
                 )
               },
               {
                 key: 'position',
-                header: 'Должность',
+                header: texts.resolve.columnPosition,
                 render: r => (
                   <div>
-                    {r.position ?? '—'}
-                    {!r.position && !r.warning && r.executorEmail && (
-                      <CellNote>Должность не указана в карточке сотрудника.</CellNote>
-                    )}
+                    {r.position ?? texts.common.empty}
+                    {!r.position && !r.warning && r.executorEmail && <CellNote>{texts.resolve.positionMissing}</CellNote>}
                   </div>
                 )
               },
               {
                 key: 'reassign',
-                header: 'Переназначение',
+                header: texts.resolve.columnReassign,
                 align: 'center',
-                render: r => (r.allowReassignToOtherApprovers ? 'Разрешено' : 'Нет')
+                render: r => (r.allowReassignToOtherApprovers ? texts.resolve.reassignAllowed : texts.common.no)
               }
             ]}
             rows={result.steps}
             keyOf={r => r.id}
-            emptyMessage="Маршрут разрешился без шагов для этого статуса."
+            emptyMessage={texts.resolve.emptySteps}
           />
         </>
       )}
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RouteFormModal.tsx b/frontend/src/webparts/approvalAdmin/components/screens/RouteFormModal.tsx
new file mode 100644
index 0000000..7c2e986
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RouteFormModal.tsx
@@ -0,0 +1,188 @@
+import * as React from 'react';
+import { Company, Department, RequestType, RouteType, TemplateRoute } from '../../models';
+import { routeTypeLabels, texts } from '../../texts';
+import { useAsyncSubmit } from '../../hooks/useAsyncSubmit';
+import { ApprovalRouteApi } from '../../services/api';
+import { Checkbox, Field, FormGrid, FormModal, SearchableSelect, Select } from '../ui';
+
+export interface IRouteFormModalProps {
+  api: ApprovalRouteApi;
+  /** Undefined — создание нового маршрута, иначе редактирование существующего. */
+  editing?: TemplateRoute;
+  /** Тип заявки, под которым открыли форму создания (например, из активного фильтра списка). */
+  initialRequestTypeId: string;
+  requestTypes: RequestType[];
+  companies: Company[];
+  departments: Department[];
+  dictionaryLoading: boolean;
+  onSaved: () => void;
+  onClose: () => void;
+}
+
+interface IFormState {
+  requestTypeId: string;
+  routeType: RouteType;
+  companyId: string;
+  departmentId: string;
+  byProject: boolean;
+  requiresControl: boolean;
+}
+
+const ROUTE_TYPE_OPTIONS = Object.values(RouteType)
+  .filter(v => v !== RouteType.None)
+  .map(v => ({ value: v, label: routeTypeLabels[v] }));
+
+function toFormState(editing: TemplateRoute | undefined, initialRequestTypeId: string): IFormState {
+  if (!editing) {
+    return {
+      requestTypeId: initialRequestTypeId,
+      routeType: RouteType.Sequential,
+      companyId: '',
+      departmentId: '',
+      byProject: false,
+      requiresControl: false
+    };
+  }
+  return {
+    requestTypeId: String(editing.requestTypeId),
+    routeType: editing.routeType,
+    companyId: editing.companyId,
+    departmentId: editing.departmentId ?? '',
+    byProject: editing.byProject,
+    requiresControl: editing.requiresControl
+  };
+}
+
+/** Форма создания/редактирования маршрута — вынесена из RoutesScreen, чтобы тот не разрастался. */
+export const RouteFormModal: React.FC<IRouteFormModalProps> = ({
+  api,
+  editing,
+  initialRequestTypeId,
+  requestTypes,
+  companies,
+  departments,
+  dictionaryLoading,
+  onSaved,
+  onClose
+}) => {
+  const [form, setForm] = React.useState<IFormState>(() => toFormState(editing, initialRequestTypeId));
+  const submit = useAsyncSubmit();
+
+  // Отдел принадлежит компании, поэтому список сужаем под выбранную:
+  // иначе пользователь листает ~700 позиций из всех юрлиц сразу.
+  const departmentsForSelectedCompany = React.useMemo(
+    () => (form.companyId ? departments.filter(d => d.companyId === form.companyId) : []),
+    [departments, form.companyId]
+  );
+
+  const submitForm = (): void => {
+    if (!editing && !form.requestTypeId) {
+      submit.fail(texts.routes.validationRequestType);
+      return;
+    }
+    if (!form.companyId.trim()) {
+      submit.fail(texts.routes.validationCompany);
+      return;
+    }
+
+    const departmentId = form.departmentId.trim() ? form.departmentId.trim() : null;
+    const request = editing
+      ? api.templateRoutes.update(editing.id, {
+          routeType: form.routeType,
+          companyId: form.companyId.trim(),
+          departmentId,
+          byProject: form.byProject,
+          requiresControl: form.requiresControl
+        })
+      : api.templateRoutes.create({
+          routeType: form.routeType,
+          requestTypeId: Number(form.requestTypeId),
+          companyId: form.companyId.trim(),
+          departmentId,
+          byProject: form.byProject,
+          requiresControl: form.requiresControl
+        });
+
+    submit.run(() =>
+      request.then(() => {
+        onSaved();
+        onClose();
+      })
+    );
+  };
+
+  return (
+    <FormModal
+      title={editing ? texts.routes.editTitle(editing.id) : texts.routes.createTitle}
+      error={submit.error}
+      isSaving={submit.isBusy}
+      onSubmit={submitForm}
+      onClose={onClose}
+    >
+      <FormGrid>
+        <Field label={texts.routes.requestTypeLabel} required full>
+          <Select
+            options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
+            placeholder={texts.routes.requestTypePlaceholder}
+            value={form.requestTypeId}
+            disabled={!!editing}
+            onChange={e => setForm({ ...form, requestTypeId: e.target.value })}
+          />
+        </Field>
+        <Field label={texts.routes.routeTypeLabel} required full>
+          <Select
+            options={ROUTE_TYPE_OPTIONS}
+            value={form.routeType}
+            onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
+          />
+        </Field>
+        <Field label={texts.routes.companyLabel} required full hint={texts.routes.companyHint}>
+          <SearchableSelect
+            options={companies.map(c => ({ value: c.id, label: c.name }))}
+            value={form.companyId}
+            loading={dictionaryLoading}
+            placeholder={texts.routes.companyPlaceholder}
+            searchPlaceholder={texts.routes.companySearchPlaceholder}
+            onChange={companyId =>
+              // Смена компании обнуляет отдел: прежний принадлежал другой
+              // компании, и бэкенд не нашёл бы такой маршрут при resolve.
+              setForm({ ...form, companyId, departmentId: '' })
+            }
+          />
+        </Field>
+        <Field
+          label={texts.routes.departmentLabel}
+          full
+          hint={form.companyId ? texts.routes.departmentHint : texts.routes.departmentHintNoCompany}
+        >
+          <SearchableSelect
+            options={departmentsForSelectedCompany.map(d => ({ value: d.id, label: d.name }))}
+            value={form.departmentId}
+            loading={dictionaryLoading}
+            disabled={!form.companyId}
+            allowClear
+            clearLabel={texts.routes.departmentPlaceholder}
+            placeholder={texts.routes.departmentPlaceholder}
+            searchPlaceholder={texts.routes.departmentSearchPlaceholder}
+            emptyMessage={texts.routes.departmentEmpty}
+            onChange={departmentId => setForm({ ...form, departmentId })}
+          />
+        </Field>
+        <Field label={texts.routes.byProjectLabel}>
+          <Checkbox
+            label={texts.routes.byProjectCheckbox}
+            checked={form.byProject}
+            onChange={v => setForm({ ...form, byProject: v })}
+          />
+        </Field>
+        <Field label={texts.routes.controlLabel}>
+          <Checkbox
+            label={texts.routes.controlCheckbox}
+            checked={form.requiresControl}
+            onChange={v => setForm({ ...form, requiresControl: v })}
+          />
+        </Field>
+      </FormGrid>
+    </FormModal>
+  );
+};
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RouteStepFormModal.tsx b/frontend/src/webparts/approvalAdmin/components/screens/RouteStepFormModal.tsx
new file mode 100644
index 0000000..8173cef
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RouteStepFormModal.tsx
@@ -0,0 +1,206 @@
+import * as React from 'react';
+import {
+  HeadType,
+  ProjectRole,
+  RouteStepStatus,
+  StepExecutorKind,
+  TemplateRoute,
+  TemplateRouteStep
+} from '../../models';
+import { headTypeLabels, projectRoleLabels, routeStepStatusLabels, texts } from '../../texts';
+import { detectExecutorKind } from '../../utils/stepExecutor';
+import { useAsyncSubmit } from '../../hooks/useAsyncSubmit';
+import { ApprovalRouteApi } from '../../services/api';
+import { Checkbox, Field, FormGrid, FormModal, RadioGroup, Select, TextInput } from '../ui';
+
+export interface IRouteStepFormModalProps {
+  api: ApprovalRouteApi;
+  route: TemplateRoute;
+  /** Undefined — создание нового шага, иначе редактирование существующего. */
+  editing?: TemplateRouteStep;
+  nextOrderNo: number;
+  onSaved: (savedStep: TemplateRouteStep) => void;
+  onClose: () => void;
+}
+
+interface IFormState {
+  orderNo: string;
+  status: RouteStepStatus;
+  kind: StepExecutorKind;
+  executorEmail: string;
+  position: string;
+  projectRole: ProjectRole;
+  headType: HeadType;
+  allowReassignToOtherApprovers: boolean;
+}
+
+const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
+  .map(v => ({ value: v, label: routeStepStatusLabels[v] }));
+
+const PROJECT_ROLE_OPTIONS = Object.values(ProjectRole)
+  .filter(v => v !== ProjectRole.None)
+  .map(v => ({ value: v, label: projectRoleLabels[v] }));
+
+const HEAD_TYPE_OPTIONS = Object.values(HeadType)
+  .filter(v => v !== HeadType.None)
+  .map(v => ({ value: v, label: headTypeLabels[v] }));
+
+function toFormState(editing: TemplateRouteStep | undefined, nextOrderNo: number): IFormState {
+  if (!editing) {
+    return {
+      orderNo: String(nextOrderNo),
+      status: RouteStepStatus.Approval,
+      kind: 'email',
+      executorEmail: '',
+      position: '',
+      projectRole: ProjectRole.ProjectManager,
+      headType: HeadType.Chief,
+      allowReassignToOtherApprovers: false
+    };
+  }
+  return {
+    orderNo: String(editing.orderNo),
+    status: editing.status,
+    kind: detectExecutorKind(editing),
+    executorEmail: editing.executorEmail ?? '',
+    position: editing.position ?? '',
+    projectRole: editing.projectRole && editing.projectRole !== ProjectRole.None ? editing.projectRole : ProjectRole.ProjectManager,
+    headType: editing.headType && editing.headType !== HeadType.None ? editing.headType : HeadType.Chief,
+    allowReassignToOtherApprovers: editing.allowReassignToOtherApprovers
+  };
+}
+
+/** Форма создания/редактирования шага маршрута — вынесена из RouteStepsScreen. */
+export const RouteStepFormModal: React.FC<IRouteStepFormModalProps> = ({ api, route, editing, nextOrderNo, onSaved, onClose }) => {
+  const [form, setForm] = React.useState<IFormState>(() => toFormState(editing, nextOrderNo));
+  const submit = useAsyncSubmit();
+
+  const submitForm = (): void => {
+    const orderNo = Number(form.orderNo);
+    if (!orderNo || orderNo < 1) {
+      submit.fail(texts.routeSteps.validationOrderNo);
+      return;
+    }
+    if (form.kind === 'email' && !form.executorEmail.trim()) {
+      submit.fail(texts.routeSteps.validationEmail);
+      return;
+    }
+    if (form.kind === 'position' && !form.position.trim()) {
+      submit.fail(texts.routeSteps.validationPosition);
+      return;
+    }
+
+    const payload = {
+      orderNo,
+      status: form.status,
+      allowReassignToOtherApprovers: form.allowReassignToOtherApprovers,
+      executorEmail: form.kind === 'email' ? form.executorEmail.trim() : null,
+      position: form.kind === 'position' ? form.position.trim() : null,
+      projectRole: form.kind === 'projectRole' ? form.projectRole : null,
+      headType: form.kind === 'headType' ? form.headType : null
+    };
+
+    const request = editing
+      ? api.templateRouteSteps.update(route.id, editing.id, payload)
+      : api.templateRouteSteps.create(route.id, payload);
+
+    submit.run(() =>
+      request.then(step => {
+        onSaved(step);
+        onClose();
+      })
+    );
+  };
+
+  return (
+    <FormModal
+      title={editing ? texts.routeSteps.editTitle(editing.orderNo) : texts.routeSteps.createTitle}
+      error={submit.error}
+      isSaving={submit.isBusy}
+      onSubmit={submitForm}
+      onClose={onClose}
+    >
+      <FormGrid>
+        <Field label={texts.routeSteps.orderNoLabel} required>
+          <TextInput
+            type="number"
+            min={1}
+            value={form.orderNo}
+            onChange={e => setForm({ ...form, orderNo: e.target.value })}
+          />
+        </Field>
+        <Field label={texts.routeSteps.statusLabel} required>
+          <Select
+            options={STATUS_OPTIONS}
+            value={form.status}
+            onChange={e => setForm({ ...form, status: e.target.value as RouteStepStatus })}
+          />
+        </Field>
+
+        <Field label={texts.routeSteps.kindLabel} required full hint={texts.routeSteps.kindHint}>
+          <RadioGroup
+            name="executorKind"
+            value={form.kind}
+            onChange={kind => setForm({ ...form, kind })}
+            options={[
+              { value: 'email', label: texts.routeSteps.kindEmail },
+              { value: 'position', label: texts.routeSteps.kindPosition },
+              {
+                value: 'projectRole',
+                label: texts.routeSteps.kindProjectRole,
+                disabled: !route.byProject,
+                disabledHint: texts.routeSteps.kindProjectRoleDisabled
+              },
+              { value: 'headType', label: texts.routeSteps.kindHeadType }
+            ]}
+          />
+        </Field>
+
+        {form.kind === 'email' && (
+          <Field label={texts.routeSteps.emailLabel} required full>
+            <TextInput
+              value={form.executorEmail}
+              onChange={e => setForm({ ...form, executorEmail: e.target.value })}
+              placeholder={texts.routeSteps.emailPlaceholder}
+            />
+          </Field>
+        )}
+        {form.kind === 'position' && (
+          <Field label={texts.routeSteps.positionLabel} required full hint={texts.routeSteps.positionHint}>
+            <TextInput
+              value={form.position}
+              onChange={e => setForm({ ...form, position: e.target.value })}
+              placeholder={texts.routeSteps.positionPlaceholder}
+            />
+          </Field>
+        )}
+        {form.kind === 'projectRole' && (
+          <Field label={texts.routeSteps.projectRoleLabel} required full>
+            <Select
+              options={PROJECT_ROLE_OPTIONS}
+              value={form.projectRole}
+              onChange={e => setForm({ ...form, projectRole: e.target.value as ProjectRole })}
+            />
+          </Field>
+        )}
+        {form.kind === 'headType' && (
+          <Field label={texts.routeSteps.headTypeLabel} required full>
+            <Select
+              options={HEAD_TYPE_OPTIONS}
+              value={form.headType}
+              onChange={e => setForm({ ...form, headType: e.target.value as HeadType })}
+            />
+          </Field>
+        )}
+
+        <Field label={texts.routeSteps.reassignLabel} full>
+          <Checkbox
+            label={texts.routeSteps.reassignCheckbox}
+            checked={form.allowReassignToOtherApprovers}
+            onChange={v => setForm({ ...form, allowReassignToOtherApprovers: v })}
+          />
+        </Field>
+      </FormGrid>
+    </FormModal>
+  );
+};
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx b/frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx
index 3020322..fdaffeb 100644
--- a/frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx
@@ -1,37 +1,22 @@
 import * as React from 'react';
+import { RouteStepFormModal } from './RouteStepFormModal';
 import { ApprovalRouteApi } from '../../services/api';
-import { ApiClientError } from '../../services/httpClient';
-import {
-  HeadType,
-  headTypeLabels,
-  ProjectRole,
-  projectRoleLabels,
-  RouteStepStatus,
-  routeStepStatusLabels,
-  routeTypeLabels,
-  StepExecutorKind,
-  TemplateRoute,
-  TemplateRouteStep,
-  detectExecutorKind
-} from '../../models';
+import { RouteStepStatus, TemplateRoute, TemplateRouteStep } from '../../models';
+import { routeStepStatusLabels, routeTypeLabels, texts } from '../../texts';
+import { describeStepExecutor } from '../../utils/stepExecutor';
+import { useRouteSteps } from '../../hooks/useRouteSteps';
+import { useDeleteTarget } from '../../hooks/useDeleteTarget';
 import {
   ActionsCell,
   Alert,
   Badge,
   Breadcrumbs,
   Button,
-  Checkbox,
   ConfirmDialog,
   DataTable,
-  Field,
-  FormGrid,
   IconButton,
-  Modal,
   PageHeader,
-  PrimaryCell,
-  RadioGroup,
-  Select,
-  TextInput
+  PrimaryCell
 } from '../ui';
 
 export interface IRouteStepsScreenProps {
@@ -41,186 +26,71 @@ export interface IRouteStepsScreenProps {
   onBack: () => void;
 }
 
-interface IFormState {
-  orderNo: string;
-  status: RouteStepStatus;
-  kind: StepExecutorKind;
-  executorEmail: string;
-  position: string;
-  projectRole: ProjectRole;
-  headType: HeadType;
-  allowReassignToOtherApprovers: boolean;
-}
-
-function emptyForm(nextOrderNo: number): IFormState {
-  return {
-    orderNo: String(nextOrderNo),
-    status: RouteStepStatus.Approval,
-    kind: 'email',
-    executorEmail: '',
-    position: '',
-    projectRole: ProjectRole.ProjectManager,
-    headType: HeadType.Chief,
-    allowReassignToOtherApprovers: false
-  };
-}
-
-const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
-  .map(v => ({ value: v, label: routeStepStatusLabels[v] }));
-
-const PROJECT_ROLE_OPTIONS = Object.values(ProjectRole)
-  .filter(v => v !== ProjectRole.None)
-  .map(v => ({ value: v, label: projectRoleLabels[v] }));
-
-const HEAD_TYPE_OPTIONS = Object.values(HeadType)
-  .filter(v => v !== HeadType.None)
-  .map(v => ({ value: v, label: headTypeLabels[v] }));
-
 export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route, requestTypeName, onBack }) => {
-  const [items, setItems] = React.useState<TemplateRouteStep[]>([]);
-  const [loading, setLoading] = React.useState(true);
-  const [loadError, setLoadError] = React.useState<string | undefined>();
-  const [warning, setWarning] = React.useState<string | undefined>();
+  const steps = useRouteSteps(api, route.id);
+  const [savedWarning, setSavedWarning] = React.useState<string | undefined>();
 
   const [editing, setEditing] = React.useState<TemplateRouteStep | undefined>();
   const [showForm, setShowForm] = React.useState(false);
-  const [form, setForm] = React.useState<IFormState>(emptyForm(1));
-  const [formError, setFormError] = React.useState<string | undefined>();
-  const [saving, setSaving] = React.useState(false);
 
-  const [deleting, setDeleting] = React.useState<TemplateRouteStep | undefined>();
-  const [deleteError, setDeleteError] = React.useState<string | undefined>();
-  const [deleteBusy, setDeleteBusy] = React.useState(false);
-
-  const load = React.useCallback(() => {
-    setLoading(true);
-    setLoadError(undefined);
-    api.templateRouteSteps
-      .list(route.id)
-      .then(setItems)
-      .catch((e: ApiClientError) => setLoadError(e.message))
-      .finally(() => setLoading(false));
-  }, [api, route.id]);
-
-  React.useEffect(() => { load(); }, [load]);
+  const deleteTarget = useDeleteTarget<TemplateRouteStep>(
+    item => api.templateRouteSteps.remove(route.id, item.id),
+    steps.reload
+  );
 
   const openCreate = (): void => {
     setEditing(undefined);
-    const nextOrder = items.length > 0 ? Math.max(...items.map(s => s.orderNo)) + 1 : 1;
-    setForm(emptyForm(nextOrder));
-    setFormError(undefined);
     setShowForm(true);
   };
 
   const openEdit = (item: TemplateRouteStep): void => {
     setEditing(item);
-    setForm({
-      orderNo: String(item.orderNo),
-      status: item.status,
-      kind: detectExecutorKind(item),
-      executorEmail: item.executorEmail ?? '',
-      position: item.position ?? '',
-      projectRole: item.projectRole && item.projectRole !== ProjectRole.None ? item.projectRole : ProjectRole.ProjectManager,
-      headType: item.headType && item.headType !== HeadType.None ? item.headType : HeadType.Chief,
-      allowReassignToOtherApprovers: item.allowReassignToOtherApprovers
-    });
-    setFormError(undefined);
     setShowForm(true);
   };
 
-  const submit = (): void => {
-    const orderNo = Number(form.orderNo);
-    if (!orderNo || orderNo < 1) {
-      setFormError('Порядковый номер шага обязателен.');
-      return;
-    }
-    if (form.kind === 'email' && !form.executorEmail.trim()) {
-      setFormError('Укажите email исполнителя.');
-      return;
-    }
-    if (form.kind === 'position' && !form.position.trim()) {
-      setFormError('Укажите должность.');
-      return;
-    }
-
-    const payload = {
-      orderNo,
-      status: form.status,
-      allowReassignToOtherApprovers: form.allowReassignToOtherApprovers,
-      executorEmail: form.kind === 'email' ? form.executorEmail.trim() : null,
-      position: form.kind === 'position' ? form.position.trim() : null,
-      projectRole: form.kind === 'projectRole' ? form.projectRole : null,
-      headType: form.kind === 'headType' ? form.headType : null
-    };
-
-    setSaving(true);
-    setFormError(undefined);
-    const request = editing
-      ? api.templateRouteSteps.update(route.id, editing.id, payload)
-      : api.templateRouteSteps.create(route.id, payload);
-
-    request
-      .then(step => {
-        setShowForm(false);
-        setWarning(step.warning ?? undefined);
-        load();
-      })
-      .catch((e: ApiClientError) => setFormError(e.message))
-      .finally(() => setSaving(false));
+  const handleSaved = (savedStep: TemplateRouteStep): void => {
+    setSavedWarning(savedStep.warning ?? undefined);
+    steps.reload();
   };
 
-  const confirmDelete = (): void => {
-    if (!deleting) return;
-    setDeleteBusy(true);
-    setDeleteError(undefined);
-    api.templateRouteSteps
-      .remove(route.id, deleting.id)
-      .then(() => {
-        setDeleting(undefined);
-        load();
-      })
-      .catch((e: ApiClientError) => setDeleteError(e.message))
-      .finally(() => setDeleteBusy(false));
-  };
-
-  const sorted = [...items].sort((a, b) => a.orderNo - b.orderNo);
+  const nextOrderNo = steps.items.length > 0 ? Math.max(...steps.items.map(s => s.orderNo)) + 1 : 1;
 
   return (
     <div>
       <Breadcrumbs
         items={[
-          { label: 'Главная' },
-          { label: 'Маршруты согласования', onClick: onBack },
-          { label: `Шаги маршрута #${route.id}` }
+          { label: texts.common.home },
+          { label: texts.routes.breadcrumb, onClick: onBack },
+          { label: texts.routeSteps.breadcrumb(route.id) }
         ]}
       />
       <PageHeader
         icon="flag-check"
-        subtitle={`${requestTypeName} · ${routeTypeLabels[route.routeType]}`}
-        title={`Маршрут #${route.id}`}
+        subtitle={texts.routeSteps.subtitle(requestTypeName, routeTypeLabels[route.routeType])}
+        title={texts.routeSteps.title(route.id)}
         actions={
           <>
-            <Button variant="ghost" icon="arrow-left" onClick={onBack}>К маршрутам</Button>
-            <Button variant="accent" icon="plus" onClick={openCreate}>Добавить шаг</Button>
+            <Button variant="ghost" icon="arrow-left" onClick={onBack}>{texts.routeSteps.back}</Button>
+            <Button variant="accent" icon="plus" onClick={openCreate}>{texts.routeSteps.add}</Button>
           </>
         }
       />
 
-      {warning && <Alert kind="warn">{warning}</Alert>}
-      {loadError && <Alert kind="err">{loadError}</Alert>}
-      {deleteError && <Alert kind="err">{deleteError}</Alert>}
+      {savedWarning && <Alert kind="warn">{savedWarning}</Alert>}
+      {steps.error && <Alert kind="err">{steps.error}</Alert>}
+      {deleteTarget.error && <Alert kind="err">{deleteTarget.error}</Alert>}
 
       <DataTable
         columns={[
-          { key: 'order', header: '№', width: '50px', render: r => r.orderNo },
+          { key: 'order', header: texts.routeSteps.columnOrderNo, width: '50px', render: r => r.orderNo },
           {
             key: 'executor',
-            header: 'Исполнитель',
-            render: r => <PrimaryCell>{describeExecutor(r)}</PrimaryCell>
+            header: texts.routeSteps.columnExecutor,
+            render: r => <PrimaryCell>{describeStepExecutor(r)}</PrimaryCell>
           },
           {
             key: 'status',
-            header: 'Статус',
+            header: texts.routeSteps.columnStatus,
             render: r => (
               <Badge variant={r.status === RouteStepStatus.Approval ? 'gold' : 'blue'}>
                 {routeStepStatusLabels[r.status]}
@@ -229,9 +99,9 @@ export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route,
           },
           {
             key: 'reassign',
-            header: 'Переназначение',
+            header: texts.routeSteps.columnReassign,
             align: 'center',
-            render: r => (r.allowReassignToOtherApprovers ? <Badge variant="ok">Разрешено</Badge> : <Badge variant="neutral">Нет</Badge>)
+            render: r => (r.allowReassignToOtherApprovers ? <Badge variant="ok">{texts.routeSteps.reassignAllowed}</Badge> : <Badge variant="neutral">{texts.common.no}</Badge>)
           },
           {
             key: 'actions',
@@ -241,133 +111,38 @@ export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route,
             sticky: true,
             render: r => (
               <ActionsCell>
-                <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
-                <IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
+                <IconButton icon="edit" label={texts.common.edit} onClick={() => openEdit(r)} />
+                <IconButton icon="trash" label={texts.common.remove} danger onClick={() => deleteTarget.ask(r)} />
               </ActionsCell>
             )
           }
         ]}
-        rows={sorted}
+        rows={steps.items}
         keyOf={r => r.id}
-        emptyMessage={loading ? 'Загрузка...' : 'Шагов пока нет — добавьте первый.'}
+        emptyMessage={steps.isLoading ? texts.common.loading : texts.routeSteps.emptyList}
       />
 
       {showForm && (
-        <Modal
-          title={editing ? `Шаг #${editing.orderNo}` : 'Новый шаг маршрута'}
+        <RouteStepFormModal
+          api={api}
+          route={route}
+          editing={editing}
+          nextOrderNo={nextOrderNo}
+          onSaved={handleSaved}
           onClose={() => setShowForm(false)}
-          footer={
-            <>
-              <Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
-              <Button variant="accent" icon="check" onClick={submit} disabled={saving}>
-                {saving ? 'Сохранение...' : 'Сохранить'}
-              </Button>
-            </>
-          }
-        >
-          {formError && <Alert kind="err">{formError}</Alert>}
-          <FormGrid>
-            <Field label="Порядковый номер" required>
-              <TextInput
-                type="number"
-                min={1}
-                value={form.orderNo}
-                onChange={e => setForm({ ...form, orderNo: e.target.value })}
-              />
-            </Field>
-            <Field label="Статус шага" required>
-              <Select
-                options={STATUS_OPTIONS}
-                value={form.status}
-                onChange={e => setForm({ ...form, status: e.target.value as RouteStepStatus })}
-              />
-            </Field>
-
-            <Field label="Кто исполнитель" required full hint="Должно быть заполнено ровно одно из полей.">
-              <RadioGroup
-                name="executorKind"
-                value={form.kind}
-                onChange={kind => setForm({ ...form, kind })}
-                options={[
-                  { value: 'email', label: 'Конкретный сотрудник (email)' },
-                  { value: 'position', label: 'По должности в компании инициатора' },
-                  {
-                    value: 'projectRole',
-                    label: 'По роли в проекте',
-                    disabled: !route.byProject,
-                    disabledHint: 'Недоступно: маршрут не учитывает проект (по проекту = нет).'
-                  },
-                  { value: 'headType', label: 'По типу руководителя' }
-                ]}
-              />
-            </Field>
-
-            {form.kind === 'email' && (
-              <Field label="Email исполнителя" required full>
-                <TextInput
-                  value={form.executorEmail}
-                  onChange={e => setForm({ ...form, executorEmail: e.target.value })}
-                  placeholder="user@tnsu.kz"
-                />
-              </Field>
-            )}
-            {form.kind === 'position' && (
-              <Field label="Должность" required full hint="Ищется в справочнике api.tnsu.kz по компании инициатора.">
-                <TextInput
-                  value={form.position}
-                  onChange={e => setForm({ ...form, position: e.target.value })}
-                  placeholder="Главный инженер"
-                />
-              </Field>
-            )}
-            {form.kind === 'projectRole' && (
-              <Field label="Роль в проекте" required full>
-                <Select
-                  options={PROJECT_ROLE_OPTIONS}
-                  value={form.projectRole}
-                  onChange={e => setForm({ ...form, projectRole: e.target.value as ProjectRole })}
-                />
-              </Field>
-            )}
-            {form.kind === 'headType' && (
-              <Field label="Тип руководителя" required full>
-                <Select
-                  options={HEAD_TYPE_OPTIONS}
-                  value={form.headType}
-                  onChange={e => setForm({ ...form, headType: e.target.value as HeadType })}
-                />
-              </Field>
-            )}
-
-            <Field label="Переназначение" full>
-              <Checkbox
-                label="Разрешить переназначать другим согласующим"
-                checked={form.allowReassignToOtherApprovers}
-                onChange={v => setForm({ ...form, allowReassignToOtherApprovers: v })}
-              />
-            </Field>
-          </FormGrid>
-        </Modal>
+        />
       )}
 
-      {deleting && (
+      {deleteTarget.target && (
         <ConfirmDialog
-          title="Удалить шаг?"
-          text={`Шаг #${deleting.orderNo} будет удалён безвозвратно.`}
-          confirmLabel="Удалить"
-          busy={deleteBusy}
-          onCancel={() => setDeleting(undefined)}
-          onConfirm={confirmDelete}
+          title={texts.routeSteps.deleteTitle}
+          text={texts.routeSteps.deleteText(deleteTarget.target.orderNo)}
+          confirmLabel={texts.common.remove}
+          busy={deleteTarget.isBusy}
+          onCancel={deleteTarget.cancel}
+          onConfirm={deleteTarget.confirm}
         />
       )}
     </div>
   );
 };
-
-function describeExecutor(step: TemplateRouteStep): string {
-  if (step.executorEmail) return step.executorEmail;
-  if (step.position) return step.position;
-  if (step.projectRole && step.projectRole !== ProjectRole.None) return `Роль: ${projectRoleLabels[step.projectRole]}`;
-  if (step.headType && step.headType !== HeadType.None) return `Руководитель: ${headTypeLabels[step.headType]}`;
-  return '—';
-}
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.module.scss b/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.module.scss
new file mode 100644
index 0000000..71c71ac
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.module.scss
@@ -0,0 +1,4 @@
+.filter {
+  margin-bottom: 18px;
+  max-width: 320px;
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx b/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx
index ded5d1b..8a533b0 100644
--- a/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx
@@ -1,24 +1,27 @@
 import * as React from 'react';
+import styles from './RoutesScreen.module.scss';
+import { RouteFormModal } from './RouteFormModal';
 import { ApprovalRouteApi } from '../../services/api';
-import { ApiClientError } from '../../services/httpClient';
 import { PortalDictionaryClient } from '../../services/portalDictionary';
-import { Company, Department, RequestType, routeTypeLabels, RouteType, TemplateRoute } from '../../models';
+import { RouteType, TemplateRoute } from '../../models';
+import { routeTypeLabels, texts } from '../../texts';
+import { shortGuid } from '../../utils/guid';
+import { useRequestTypes } from '../../hooks/useRequestTypes';
+import { useTemplateRoutes } from '../../hooks/useTemplateRoutes';
+import { usePortalDictionaries } from '../../hooks/usePortalDictionaries';
+import { useDeleteTarget } from '../../hooks/useDeleteTarget';
 import {
   ActionsCell,
   Alert,
   Badge,
   Breadcrumbs,
   Button,
-  Checkbox,
   ConfirmDialog,
   DataTable,
   Field,
-  FormGrid,
   IconButton,
-  Modal,
   PageHeader,
   PrimaryCell,
-  SearchableSelect,
   Select
 } from '../ui';
 
@@ -28,222 +31,85 @@ export interface IRoutesScreenProps {
   onOpenSteps: (route: TemplateRoute) => void;
 }
 
-interface IFormState {
-  requestTypeId: string;
-  routeType: RouteType;
-  companyId: string;
-  departmentId: string;
-  byProject: boolean;
-  requiresControl: boolean;
-}
-
-const EMPTY_FORM: IFormState = {
-  requestTypeId: '',
-  routeType: RouteType.Sequential,
-  companyId: '',
-  departmentId: '',
-  byProject: false,
-  requiresControl: false
-};
-
-const ROUTE_TYPE_OPTIONS = Object.values(RouteType)
-  .filter(v => v !== RouteType.None)
-  .map(v => ({ value: v, label: routeTypeLabels[v] }));
-
 export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, dictionary, onOpenSteps }) => {
-  const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
-  const [companies, setCompanies] = React.useState<Company[]>([]);
-  const [departments, setDepartments] = React.useState<Department[]>([]);
-  const [dictLoading, setDictLoading] = React.useState(true);
-  const [dictError, setDictError] = React.useState<string | undefined>();
-  const [items, setItems] = React.useState<TemplateRoute[]>([]);
-  const [filterRequestTypeId, setFilterRequestTypeId] = React.useState<string>('');
-  const [loading, setLoading] = React.useState(true);
-  const [loadError, setLoadError] = React.useState<string | undefined>();
+  const requestTypes = useRequestTypes(api);
+  const portalDictionaries = usePortalDictionaries(dictionary);
+
+  const [filterRequestTypeId, setFilterRequestTypeId] = React.useState('');
+  const routes = useTemplateRoutes(api, filterRequestTypeId ? Number(filterRequestTypeId) : undefined);
 
   const [editing, setEditing] = React.useState<TemplateRoute | undefined>();
   const [showForm, setShowForm] = React.useState(false);
-  const [form, setForm] = React.useState<IFormState>(EMPTY_FORM);
-  const [formError, setFormError] = React.useState<string | undefined>();
-  const [saving, setSaving] = React.useState(false);
 
-  const [deleting, setDeleting] = React.useState<TemplateRoute | undefined>();
-  const [deleteError, setDeleteError] = React.useState<string | undefined>();
-  const [deleteBusy, setDeleteBusy] = React.useState(false);
+  const deleteTarget = useDeleteTarget<TemplateRoute>(item => api.templateRoutes.remove(item.id), routes.reload);
 
-  React.useEffect(() => {
-    api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается в общей ошибке ниже */ });
-  }, [api]);
-
-  // Справочники 1С грузим один раз на экран: они статичны, а отделов ~700 —
-  // поиск делаем на клиенте, без запроса на каждый символ.
-  React.useEffect(() => {
-    if (!dictionary) return;
-
-    setDictLoading(true);
-    setDictError(undefined);
-    Promise.all([dictionary.companies(), dictionary.departments()])
-      .then(([loadedCompanies, loadedDepartments]) => {
-        setCompanies(loadedCompanies);
-        setDepartments(loadedDepartments);
-      })
-      .catch((e: ApiClientError) => setDictError(e.message))
-      .finally(() => setDictLoading(false));
-  }, [dictionary]);
-
-  const load = React.useCallback(() => {
-    setLoading(true);
-    setLoadError(undefined);
-    const requestTypeId = filterRequestTypeId ? Number(filterRequestTypeId) : undefined;
-    api.templateRoutes
-      .list(requestTypeId)
-      .then(setItems)
-      .catch((e: ApiClientError) => setLoadError(e.message))
-      .finally(() => setLoading(false));
-  }, [api, filterRequestTypeId]);
-
-  React.useEffect(() => { load(); }, [load]);
-
-  const requestTypeName = (id: number): string => requestTypes.find(rt => rt.id === id)?.name ?? `#${id}`;
+  const requestTypeName = (id: number): string => requestTypes.items.find(rt => rt.id === id)?.name ?? `#${id}`;
 
   // Пока справочник не загрузился (или маршрут ссылается на удалённую запись),
   // показываем усечённый Guid — чтобы строка таблицы не выглядела пустой.
-  const companyName = (id: string): string => companies.find(c => c.id === id)?.name ?? shortGuid(id);
-
-  const departmentName = (id: string): string => departments.find(d => d.id === id)?.name ?? shortGuid(id);
-
-  // Отдел принадлежит компании, поэтому список сужаем под выбранную:
-  // иначе пользователь листает ~700 позиций из всех юрлиц сразу.
-  const departmentsForSelectedCompany = React.useMemo(
-    () => (form.companyId ? departments.filter(d => d.companyId === form.companyId) : []),
-    [departments, form.companyId]
-  );
+  const companyName = (id: string): string => portalDictionaries.companies.find(c => c.id === id)?.name ?? shortGuid(id);
+  const departmentName = (id: string): string => portalDictionaries.departments.find(d => d.id === id)?.name ?? shortGuid(id);
 
   const openCreate = (): void => {
     setEditing(undefined);
-    setForm({ ...EMPTY_FORM, requestTypeId: filterRequestTypeId });
-    setFormError(undefined);
     setShowForm(true);
   };
 
   const openEdit = (item: TemplateRoute): void => {
     setEditing(item);
-    setForm({
-      requestTypeId: String(item.requestTypeId),
-      routeType: item.routeType,
-      companyId: item.companyId,
-      departmentId: item.departmentId ?? '',
-      byProject: item.byProject,
-      requiresControl: item.requiresControl
-    });
-    setFormError(undefined);
     setShowForm(true);
   };
 
-  const submit = (): void => {
-    if (!editing && !form.requestTypeId) {
-      setFormError('Выберите тип заявки.');
-      return;
-    }
-    if (!form.companyId.trim()) {
-      setFormError('Компания обязательна (Guid из справочника api.tnsu.kz).');
-      return;
-    }
-
-    setSaving(true);
-    setFormError(undefined);
-
-    const departmentId = form.departmentId.trim() ? form.departmentId.trim() : null;
-    const request = editing
-      ? api.templateRoutes.update(editing.id, {
-          routeType: form.routeType,
-          companyId: form.companyId.trim(),
-          departmentId,
-          byProject: form.byProject,
-          requiresControl: form.requiresControl
-        })
-      : api.templateRoutes.create({
-          routeType: form.routeType,
-          requestTypeId: Number(form.requestTypeId),
-          companyId: form.companyId.trim(),
-          departmentId,
-          byProject: form.byProject,
-          requiresControl: form.requiresControl
-        });
-
-    request
-      .then(() => {
-        setShowForm(false);
-        load();
-      })
-      .catch((e: ApiClientError) => setFormError(e.message))
-      .finally(() => setSaving(false));
-  };
-
-  const confirmDelete = (): void => {
-    if (!deleting) return;
-    setDeleteBusy(true);
-    setDeleteError(undefined);
-    api.templateRoutes
-      .remove(deleting.id)
-      .then(() => {
-        setDeleting(undefined);
-        load();
-      })
-      .catch((e: ApiClientError) => setDeleteError(e.message))
-      .finally(() => setDeleteBusy(false));
-  };
-
   return (
     <div>
-      <Breadcrumbs items={[{ label: 'Главная' }, { label: 'Маршруты согласования' }]} />
+      <Breadcrumbs items={[{ label: texts.common.home }, { label: texts.routes.breadcrumb }]} />
       <PageHeader
         icon="route"
-        subtitle="Настройка согласований"
-        title="Маршруты согласования"
-        actions={<Button variant="accent" icon="plus" onClick={openCreate}>Добавить маршрут</Button>}
+        subtitle={texts.routes.subtitle}
+        title={texts.routes.title}
+        actions={<Button variant="accent" icon="plus" onClick={openCreate}>{texts.routes.add}</Button>}
       />
 
-      <div style={{ marginBottom: 18, maxWidth: 320 }}>
-        <Field label="Фильтр по типу заявки">
+      <div className={styles.filter}>
+        <Field label={texts.routes.filterLabel}>
           <Select
-            options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
-            placeholder="Все типы заявок"
+            options={requestTypes.items.map(rt => ({ value: String(rt.id), label: rt.name }))}
+            placeholder={texts.routes.filterAll}
             value={filterRequestTypeId}
             onChange={e => setFilterRequestTypeId(e.target.value)}
           />
         </Field>
       </div>
 
-      {dictError && <Alert kind="warn">Справочник компаний и отделов недоступен: {dictError}</Alert>}
-      {loadError && <Alert kind="err">{loadError}</Alert>}
-      {deleteError && <Alert kind="err">{deleteError}</Alert>}
+      {portalDictionaries.error && <Alert kind="warn">{texts.routes.dictionaryFailed(portalDictionaries.error)}</Alert>}
+      {routes.error && <Alert kind="err">{routes.error}</Alert>}
+      {deleteTarget.error && <Alert kind="err">{deleteTarget.error}</Alert>}
 
       <DataTable
         columns={[
           {
             key: 'requestType',
-            header: 'Тип заявки',
+            header: texts.routes.columnRequestType,
             render: r => <PrimaryCell>{requestTypeName(r.requestTypeId)}</PrimaryCell>
           },
           {
             key: 'routeType',
-            header: 'Тип маршрута',
+            header: texts.routes.columnRouteType,
             render: r => <Badge variant={r.routeType === RouteType.Parallel ? 'blue' : 'gold'}>{routeTypeLabels[r.routeType]}</Badge>
           },
-          { key: 'company', header: 'Компания', render: r => companyName(r.companyId) },
-          { key: 'department', header: 'Отдел', render: r => (r.departmentId ? departmentName(r.departmentId) : '—') },
+          { key: 'company', header: texts.routes.columnCompany, render: r => companyName(r.companyId) },
+          { key: 'department', header: texts.routes.columnDepartment, render: r => (r.departmentId ? departmentName(r.departmentId) : texts.common.empty) },
           {
             key: 'byProject',
-            header: 'По проекту',
+            header: texts.routes.columnByProject,
             align: 'center',
-            render: r => (r.byProject ? <Badge variant="ok">Да</Badge> : <Badge variant="neutral">Нет</Badge>)
+            render: r => (r.byProject ? <Badge variant="ok">{texts.common.yes}</Badge> : <Badge variant="neutral">{texts.common.no}</Badge>)
           },
           {
             key: 'control',
-            header: 'Контроль',
+            header: texts.routes.columnControl,
             align: 'center',
-            render: r => (r.requiresControl ? <Badge variant="gold">Требуется</Badge> : <Badge variant="neutral">Нет</Badge>)
+            render: r => (r.requiresControl ? <Badge variant="gold">{texts.routes.controlRequired}</Badge> : <Badge variant="neutral">{texts.common.no}</Badge>)
           },
           {
             key: 'actions',
@@ -253,117 +119,42 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, dictionary, on
             sticky: true,
             render: r => (
               <ActionsCell>
-                <Button size="sm" variant="secondary" icon="clipboard" onClick={() => onOpenSteps(r)}>Шаги</Button>
-                <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
-                <IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
+                <Button size="sm" variant="secondary" icon="clipboard" onClick={() => onOpenSteps(r)}>{texts.routes.openSteps}</Button>
+                <IconButton icon="edit" label={texts.common.edit} onClick={() => openEdit(r)} />
+                <IconButton icon="trash" label={texts.common.remove} danger onClick={() => deleteTarget.ask(r)} />
               </ActionsCell>
             )
           }
         ]}
-        rows={items}
+        rows={routes.items}
         keyOf={r => r.id}
-        emptyMessage={loading ? 'Загрузка...' : 'Маршрутов пока нет.'}
+        emptyMessage={routes.isLoading ? texts.common.loading : texts.routes.emptyList}
       />
 
       {showForm && (
-        <Modal
-          title={editing ? `Маршрут #${editing.id}` : 'Новый маршрут'}
+        <RouteFormModal
+          api={api}
+          editing={editing}
+          initialRequestTypeId={filterRequestTypeId}
+          requestTypes={requestTypes.items}
+          companies={portalDictionaries.companies}
+          departments={portalDictionaries.departments}
+          dictionaryLoading={portalDictionaries.isLoading}
+          onSaved={routes.reload}
           onClose={() => setShowForm(false)}
-          footer={
-            <>
-              <Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
-              <Button variant="accent" icon="check" onClick={submit} disabled={saving}>
-                {saving ? 'Сохранение...' : 'Сохранить'}
-              </Button>
-            </>
-          }
-        >
-          {formError && <Alert kind="err">{formError}</Alert>}
-          <FormGrid>
-            <Field label="Тип заявки" required full>
-              <Select
-                options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
-                placeholder="Выберите тип заявки"
-                value={form.requestTypeId}
-                disabled={!!editing}
-                onChange={e => setForm({ ...form, requestTypeId: e.target.value })}
-              />
-            </Field>
-            <Field label="Тип маршрута" required full>
-              <Select
-                options={ROUTE_TYPE_OPTIONS}
-                value={form.routeType}
-                onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
-              />
-            </Field>
-            <Field label="Компания" required full hint="Справочник 1С (api.tnsu.kz).">
-              <SearchableSelect
-                options={companies.map(c => ({ value: c.id, label: c.name }))}
-                value={form.companyId}
-                loading={dictLoading}
-                placeholder="Выберите компанию"
-                searchPlaceholder="Поиск по названию компании..."
-                onChange={companyId =>
-                  // Смена компании обнуляет отдел: прежний принадлежал другой
-                  // компании, и бэкенд не нашёл бы такой маршрут при resolve.
-                  setForm({ ...form, companyId, departmentId: '' })
-                }
-              />
-            </Field>
-            <Field
-              label="Отдел"
-              full
-              hint={
-                form.companyId
-                  ? 'Необязательно — пусто означает маршрут «по умолчанию» для всей компании.'
-                  : 'Сначала выберите компанию.'
-              }
-            >
-              <SearchableSelect
-                options={departmentsForSelectedCompany.map(d => ({ value: d.id, label: d.name }))}
-                value={form.departmentId}
-                loading={dictLoading}
-                disabled={!form.companyId}
-                allowClear
-                clearLabel="Без отдела (маршрут по умолчанию)"
-                placeholder="Без отдела (маршрут по умолчанию)"
-                searchPlaceholder="Поиск по названию отдела..."
-                emptyMessage="У выбранной компании нет отделов в справочнике"
-                onChange={departmentId => setForm({ ...form, departmentId })}
-              />
-            </Field>
-            <Field label="По проекту">
-              <Checkbox
-                label="Маршрут учитывает конкретный проект"
-                checked={form.byProject}
-                onChange={v => setForm({ ...form, byProject: v })}
-              />
-            </Field>
-            <Field label="Контроль">
-              <Checkbox
-                label="Требуется отдельный контроль исполнения"
-                checked={form.requiresControl}
-                onChange={v => setForm({ ...form, requiresControl: v })}
-              />
-            </Field>
-          </FormGrid>
-        </Modal>
+        />
       )}
 
-      {deleting && (
+      {deleteTarget.target && (
         <ConfirmDialog
-          title="Удалить маршрут?"
-          text={`Маршрут #${deleting.id} и все его шаги будут удалены безвозвратно.`}
-          confirmLabel="Удалить"
-          busy={deleteBusy}
-          onCancel={() => setDeleting(undefined)}
-          onConfirm={confirmDelete}
+          title={texts.routes.deleteTitle}
+          text={texts.routes.deleteText(deleteTarget.target.id)}
+          confirmLabel={texts.common.remove}
+          busy={deleteTarget.isBusy}
+          onCancel={deleteTarget.cancel}
+          onConfirm={deleteTarget.confirm}
         />
       )}
     </div>
   );
 };
-
-function shortGuid(guid: string): string {
-  return guid.length > 8 ? `${guid.slice(0, 8)}…` : guid;
-}
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/ActionsCell.tsx b/frontend/src/webparts/approvalAdmin/components/ui/ActionsCell.tsx
new file mode 100644
index 0000000..45bbea7
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/ActionsCell.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import styles from './DataTable.module.scss';
+
+/** Ряд кнопок действий в последней колонке таблицы. */
+export const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <span className={styles.actionsCell}>{children}</span>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/AsyncSearchableSelect.tsx b/frontend/src/webparts/approvalAdmin/components/ui/AsyncSearchableSelect.tsx
index 8d74d1b..2c5ece1 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/AsyncSearchableSelect.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/AsyncSearchableSelect.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from './SearchableSelect.module.scss';
 import { Icon } from './Icon';
+import { texts } from '../../texts';
 
 export interface IAsyncSearchResult<T> {
   items: T[];
@@ -33,11 +34,11 @@ export function AsyncSearchableSelect<T>({
   getValue,
   getLabel,
   getSublabel,
-  placeholder = 'Выберите значение',
-  searchPlaceholder = 'Поиск...',
+  placeholder = texts.select.placeholder,
+  searchPlaceholder = texts.select.searchPlaceholder,
   disabled,
   allowClear,
-  clearLabel = 'Не выбрано',
+  clearLabel = texts.select.notSelected,
   debounceMs = 350
 }: IAsyncSearchableSelectProps<T>): React.ReactElement {
   const [open, setOpen] = React.useState(false);
@@ -176,10 +177,10 @@ export function AsyncSearchableSelect<T>({
             onChange={e => setQuery(e.target.value)}
           />
           <div className={styles.list} ref={listRef}>
-            {loading && <div className={styles.empty}>Поиск...</div>}
+            {loading && <div className={styles.empty}>{texts.select.searching}</div>}
             {!loading && error && <div className={styles.errorText}>{error}</div>}
             {!loading && !error && items.length === 0 && (
-              <div className={styles.empty}>Ничего не найдено</div>
+              <div className={styles.empty}>{texts.select.nothingFound}</div>
             )}
             {!loading && !error && items.map(item => {
               const itemValue = getValue(item);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Breadcrumbs.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Breadcrumbs.tsx
new file mode 100644
index 0000000..4f29645
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Breadcrumbs.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from './PageChrome.module.scss';
+
+export interface IBreadcrumbItem {
+  label: string;
+  /** Без onClick пункт неинтерактивен — это текущая страница. */
+  onClick?: () => void;
+}
+
+export interface IBreadcrumbsProps {
+  items: IBreadcrumbItem[];
+}
+
+export const Breadcrumbs: React.FC<IBreadcrumbsProps> = ({ items }) => (
+  <div className={styles.bread}>
+    {items.map((item, index) => (
+      <React.Fragment key={item.label}>
+        {index > 0 && <span className={styles.sep}>&#9670;</span>}
+        {item.onClick ? (
+          <button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>
+        ) : (
+          <span>{item.label}</span>
+        )}
+      </React.Fragment>
+    ))}
+  </div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Button.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Button.tsx
index 3722e2b..9e2e313 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/Button.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Button.tsx
@@ -29,18 +29,3 @@ export const Button: React.FC<IButtonProps> = ({
     </button>
   );
 };
-
-export interface IIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: IconName;
-  danger?: boolean;
-  label: string;
-}
-
-export const IconButton: React.FC<IIconButtonProps> = ({ icon, danger, label, className, ...rest }) => {
-  const classes = [styles.iconButton, danger ? styles.danger : '', className].filter(Boolean).join(' ');
-  return (
-    <button type="button" className={classes} aria-label={label} title={label} {...rest}>
-      <Icon name={icon} size="sm" />
-    </button>
-  );
-};
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/CardGrid.tsx b/frontend/src/webparts/approvalAdmin/components/ui/CardGrid.tsx
new file mode 100644
index 0000000..1f9b47a
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/CardGrid.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import styles from './Card.module.scss';
+
+export interface ICardGridProps {
+  children: React.ReactNode;
+}
+
+/** Адаптивная сетка карточек-разделов. */
+export const CardGrid: React.FC<ICardGridProps> = ({ children }) => (
+  <div className={styles.grid}>{children}</div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/CellNote.tsx b/frontend/src/webparts/approvalAdmin/components/ui/CellNote.tsx
new file mode 100644
index 0000000..210f873
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/CellNote.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styles from './DataTable.module.scss';
+import { Icon } from './Icon';
+
+export interface ICellNoteProps {
+  children: React.ReactNode;
+  /** 'warn' — амбер с иконкой (например, причина от бэкенда), 'muted' — нейтральная пометка. */
+  kind?: 'warn' | 'muted';
+}
+
+/** Пояснение под основным значением ячейки — например, причина, по которой оно пустое. */
+export const CellNote: React.FC<ICellNoteProps> = ({ children, kind = 'muted' }) => (
+  <span className={`${styles.cellNote} ${kind === 'warn' ? styles.cellNoteWarn : ''}`}>
+    {kind === 'warn' && <Icon name="warning" size="sm" />}
+    <span>{children}</span>
+  </span>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Checkbox.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..11bb0ce
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Checkbox.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export interface ICheckboxProps {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Checkbox: React.FC<ICheckboxProps> = ({ label, checked, onChange, disabled }) => (
+  <label className={styles.checkboxRow}>
+    <input
+      type="checkbox"
+      className={styles.checkbox}
+      checked={checked}
+      disabled={disabled}
+      onChange={e => onChange(e.target.checked)}
+    />
+    {label}
+  </label>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/ConfirmDialog.tsx b/frontend/src/webparts/approvalAdmin/components/ui/ConfirmDialog.tsx
new file mode 100644
index 0000000..e90a50c
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/ConfirmDialog.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styles from './Modal.module.scss';
+import { Button } from './Button';
+import { texts } from '../../texts';
+
+export interface IConfirmDialogProps {
+  title: string;
+  text: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  busy?: boolean;
+}
+
+export const ConfirmDialog: React.FC<IConfirmDialogProps> = ({
+  title,
+  text,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  busy
+}) => (
+  <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
+    <div className={`${styles.box} ${styles.narrow}`}>
+      <div className={styles.title}>{title}</div>
+      <p className={styles.text}>{text}</p>
+      <div className={styles.narrowFooter}>
+        <Button variant="secondary" onClick={onCancel} disabled={busy}>{texts.common.cancel}</Button>
+        <Button variant="danger" icon="trash" onClick={onConfirm} disabled={busy}>{confirmLabel}</Button>
+      </div>
+    </div>
+  </div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx b/frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx
index 4b76fde..f6371ed 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './DataTable.module.scss';
-import { Icon } from './Icon';
 
 export interface IColumn<T> {
   key: string;
@@ -59,19 +58,3 @@ export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableP
     </div>
   );
 }
-
-export const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <span className={styles.primaryCell}>{children}</span>
-);
-
-export const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <span className={styles.actionsCell}>{children}</span>
-);
-
-// Пояснение под значением ячейки — например, причина, по которой значение пустое.
-export const CellNote: React.FC<{ children: React.ReactNode; kind?: 'warn' | 'muted' }> = ({ children, kind = 'muted' }) => (
-  <span className={`${styles.cellNote} ${kind === 'warn' ? styles.cellNoteWarn : ''}`}>
-    {kind === 'warn' && <Icon name="warning" size="sm" />}
-    <span>{children}</span>
-  </span>
-);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Field.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Field.tsx
new file mode 100644
index 0000000..7d19bea
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Field.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export interface IFieldProps {
+  label: string;
+  required?: boolean;
+  /** Занять обе колонки FormGrid. */
+  full?: boolean;
+  error?: string;
+  hint?: string;
+  children: React.ReactNode;
+}
+
+/** Подпись + контрол + текст ошибки/подсказки под ним. */
+export const Field: React.FC<IFieldProps> = ({ label, required, full, error, hint, children }) => (
+  <div className={`${styles.field} ${full ? styles.full : ''}`}>
+    <span className={styles.label}>
+      {label} {required && <span className={styles.req}>*</span>}
+    </span>
+    {children}
+    {error && <span className={styles.errorText}>{error}</span>}
+    {!error && hint && <span className={styles.hint}>{hint}</span>}
+  </div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/FormField.tsx b/frontend/src/webparts/approvalAdmin/components/ui/FormField.tsx
deleted file mode 100644
index e9de57e..0000000
--- a/frontend/src/webparts/approvalAdmin/components/ui/FormField.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import styles from './FormField.module.scss';
-
-export const FormGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className={styles.grid}>{children}</div>
-);
-
-export interface IFieldProps {
-  label: string;
-  required?: boolean;
-  full?: boolean;
-  error?: string;
-  hint?: string;
-  children: React.ReactNode;
-}
-
-export const Field: React.FC<IFieldProps> = ({ label, required, full, error, hint, children }) => (
-  <div className={`${styles.field} ${full ? styles.full : ''}`}>
-    <span className={styles.label}>
-      {label} {required && <span className={styles.req}>*</span>}
-    </span>
-    {children}
-    {error && <span className={styles.errorText}>{error}</span>}
-    {!error && hint && <span className={styles.hint}>{hint}</span>}
-  </div>
-);
-
-export const TextInput: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = props => (
-  <input {...props} className={styles.input} />
-);
-
-export const Textarea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement>> = props => (
-  <textarea {...props} className={styles.textarea} />
-);
-
-export interface ISelectOption {
-  value: string;
-  label: string;
-}
-
-export interface ISelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
-  options: ISelectOption[];
-  placeholder?: string;
-}
-
-export const Select: React.FC<ISelectProps> = ({ options, placeholder, ...rest }) => (
-  <select {...rest} className={styles.select}>
-    {placeholder && <option value="">{placeholder}</option>}
-    {options.map(opt => (
-      <option key={opt.value} value={opt.value}>{opt.label}</option>
-    ))}
-  </select>
-);
-
-export interface ICheckboxProps {
-  label: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-}
-
-export const Checkbox: React.FC<ICheckboxProps> = ({ label, checked, onChange, disabled }) => (
-  <label className={styles.checkboxRow}>
-    <input
-      type="checkbox"
-      className={styles.checkbox}
-      checked={checked}
-      disabled={disabled}
-      onChange={e => onChange(e.target.checked)}
-    />
-    {label}
-  </label>
-);
-
-export interface IRadioOption<T extends string> {
-  value: T;
-  label: string;
-  disabled?: boolean;
-  disabledHint?: string;
-}
-
-export interface IRadioGroupProps<T extends string> {
-  name: string;
-  value: T;
-  options: IRadioOption<T>[];
-  onChange: (value: T) => void;
-}
-
-export function RadioGroup<T extends string>({ name, value, options, onChange }: IRadioGroupProps<T>): React.ReactElement {
-  return (
-    <div className={styles.radioGroup}>
-      {options.map(opt => (
-        <label
-          key={opt.value}
-          className={`${styles.radioRow} ${opt.disabled ? styles.disabled : ''}`}
-          title={opt.disabled ? opt.disabledHint : undefined}
-        >
-          <input
-            type="radio"
-            className={styles.radio}
-            name={name}
-            checked={value === opt.value}
-            disabled={opt.disabled}
-            onChange={() => onChange(opt.value)}
-          />
-          {opt.label}
-        </label>
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/FormGrid.tsx b/frontend/src/webparts/approvalAdmin/components/ui/FormGrid.tsx
new file mode 100644
index 0000000..df8bb10
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/FormGrid.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export interface IFormGridProps {
+  children: React.ReactNode;
+}
+
+/** Двухколоночная сетка полей формы; поле помечает себя `full`, чтобы занять обе колонки. */
+export const FormGrid: React.FC<IFormGridProps> = ({ children }) => (
+  <div className={styles.grid}>{children}</div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/FormModal.tsx b/frontend/src/webparts/approvalAdmin/components/ui/FormModal.tsx
new file mode 100644
index 0000000..4d3c504
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/FormModal.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Alert } from './Alert';
+import { Button } from './Button';
+import { Modal } from './Modal';
+import { texts } from '../../texts';
+
+export interface IFormModalProps {
+  title: string;
+  /** Текст ошибки: и валидации формы, и ответа бэкенда. */
+  error?: string;
+  isSaving: boolean;
+  onSubmit: () => void;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Модальное окно формы: одинаковая обвязка «ошибка сверху, Отмена/Сохранить снизу»
+ * для всех справочников, чтобы экраны описывали только поля.
+ */
+export const FormModal: React.FC<IFormModalProps> = ({ title, error, isSaving, onSubmit, onClose, children }) => (
+  <Modal
+    title={title}
+    onClose={onClose}
+    footer={
+      <>
+        <Button variant="secondary" onClick={onClose} disabled={isSaving}>{texts.common.cancel}</Button>
+        <Button variant="accent" icon="check" onClick={onSubmit} disabled={isSaving}>
+          {isSaving ? texts.common.saving : texts.common.save}
+        </Button>
+      </>
+    }
+  >
+    {error && <Alert kind="err">{error}</Alert>}
+    {children}
+  </Modal>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Icon.module.scss b/frontend/src/webparts/approvalAdmin/components/ui/Icon.module.scss
new file mode 100644
index 0000000..3428db4
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Icon.module.scss
@@ -0,0 +1,9 @@
+.icon {
+  // Иконка не должна сжиматься внутри flex-строки (кнопки, алерты, ячейки).
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Icon.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Icon.tsx
index 2d66a03..9ceac07 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/Icon.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Icon.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from './Icon.module.scss';
 
 // Единый набор иконок в стиле референса (stroke, round caps, viewBox 24x24).
 export type IconName =
@@ -61,28 +62,24 @@ function ensureSpriteInjected(): void {
   spriteInjected = true;
 }
 
+export type IconSize = 'sm' | 'md' | 'lg';
+
 export interface IIconProps {
   name: IconName;
-  size?: 'sm' | 'md' | 'lg';
+  size?: IconSize;
   className?: string;
-  style?: React.CSSProperties;
 }
 
-const SIZE_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 16, md: 20, lg: 24 };
+const SIZE_PX: Record<IconSize, number> = { sm: 16, md: 20, lg: 24 };
 
-export const Icon: React.FC<IIconProps> = ({ name, size = 'md', className, style }) => {
+export const Icon: React.FC<IIconProps> = ({ name, size = 'md', className }) => {
   React.useEffect(() => {
     ensureSpriteInjected();
   }, []);
 
   const px = SIZE_PX[size];
   return (
-    <svg
-      width={px}
-      height={px}
-      className={className}
-      style={{ flexShrink: 0, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round', ...style }}
-    >
+    <svg width={px} height={px} className={[styles.icon, className].filter(Boolean).join(' ')}>
       <use href={`#i-${name}`} />
     </svg>
   );
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/IconButton.tsx b/frontend/src/webparts/approvalAdmin/components/ui/IconButton.tsx
new file mode 100644
index 0000000..d11e9fa
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/IconButton.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styles from './Button.module.scss';
+import { Icon, IconName } from './Icon';
+
+export interface IIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: IconName;
+  danger?: boolean;
+  /** Подпись только для скринридера и подсказки — визуально видна лишь иконка. */
+  label: string;
+}
+
+export const IconButton: React.FC<IIconButtonProps> = ({ icon, danger, label, className, ...rest }) => {
+  const classes = [styles.iconButton, danger ? styles.danger : '', className].filter(Boolean).join(' ');
+  return (
+    <button type="button" className={classes} aria-label={label} title={label} {...rest}>
+      <Icon name={icon} size="sm" />
+    </button>
+  );
+};
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Modal.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Modal.tsx
index 9357a15..25cf093 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/Modal.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Modal.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from './Modal.module.scss';
-import { Button, IconButton } from './Button';
+import { IconButton } from './IconButton';
+import { texts } from '../../texts';
 
 export interface IModalProps {
   title: string;
@@ -10,36 +11,15 @@ export interface IModalProps {
 }
 
 export const Modal: React.FC<IModalProps> = ({ title, onClose, footer, children }) => (
+  // Клик по подложке закрывает окно, клик внутри — нет (проверяем сам currentTarget).
   <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
     <div className={styles.box}>
       <div className={styles.header}>
         <div className={styles.title}>{title}</div>
-        <IconButton icon="close" label="Закрыть" onClick={onClose} />
+        <IconButton icon="close" label={texts.common.close} onClick={onClose} />
       </div>
       <div className={styles.body}>{children}</div>
       {footer && <div className={styles.footer}>{footer}</div>}
     </div>
   </div>
 );
-
-export interface IConfirmDialogProps {
-  title: string;
-  text: string;
-  confirmLabel: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  busy?: boolean;
-}
-
-export const ConfirmDialog: React.FC<IConfirmDialogProps> = ({ title, text, confirmLabel, onConfirm, onCancel, busy }) => (
-  <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
-    <div className={`${styles.box} ${styles.narrow}`}>
-      <div className={styles.title}>{title}</div>
-      <p className={styles.text}>{text}</p>
-      <div className={styles.narrowFooter}>
-        <Button variant="secondary" onClick={onCancel} disabled={busy}>Отмена</Button>
-        <Button variant="danger" icon="trash" onClick={onConfirm} disabled={busy}>{confirmLabel}</Button>
-      </div>
-    </div>
-  </div>
-);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Card.tsx b/frontend/src/webparts/approvalAdmin/components/ui/NavCard.tsx
similarity index 57%
rename from frontend/src/webparts/approvalAdmin/components/ui/Card.tsx
rename to frontend/src/webparts/approvalAdmin/components/ui/NavCard.tsx
index 6f6159c..85fa64f 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/Card.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/NavCard.tsx
@@ -2,10 +2,6 @@ import * as React from 'react';
 import styles from './Card.module.scss';
 import { Icon, IconName } from './Icon';
 
-export const CardGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className={styles.grid}>{children}</div>
-);
-
 export interface INavCardProps {
   icon: IconName;
   title: string;
@@ -13,6 +9,7 @@ export interface INavCardProps {
   onClick: () => void;
 }
 
+/** Карточка-ссылка на раздел админки. */
 export const NavCard: React.FC<INavCardProps> = ({ icon, title, description, onClick }) => (
   <a className={styles.navCard} onClick={e => { e.preventDefault(); onClick(); }} href="#">
     <div className={styles.navIcon}><Icon name={icon} /></div>
@@ -23,14 +20,3 @@ export const NavCard: React.FC<INavCardProps> = ({ icon, title, description, onC
     <div className={styles.navArrow}><Icon name="chevron-right" size="sm" /></div>
   </a>
 );
-
-export const StatRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className={styles.statRow}>{children}</div>
-);
-
-export const StatCard: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
-  <div className={styles.statCard}>
-    <div className={styles.statLabel}>{label}</div>
-    <div className={styles.statValue}>{value}</div>
-  </div>
-);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/PageChrome.tsx b/frontend/src/webparts/approvalAdmin/components/ui/PageHeader.tsx
similarity index 55%
rename from frontend/src/webparts/approvalAdmin/components/ui/PageChrome.tsx
rename to frontend/src/webparts/approvalAdmin/components/ui/PageHeader.tsx
index d53e94e..d663be7 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/PageChrome.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/PageHeader.tsx
@@ -2,30 +2,11 @@ import * as React from 'react';
 import styles from './PageChrome.module.scss';
 import { Icon, IconName } from './Icon';
 
-export interface IBreadcrumbItem {
-  label: string;
-  onClick?: () => void;
-}
-
-export const Breadcrumbs: React.FC<{ items: IBreadcrumbItem[] }> = ({ items }) => (
-  <div className={styles.bread}>
-    {items.map((item, i) => (
-      <React.Fragment key={i}>
-        {i > 0 && <span className={styles.sep}>&#9670;</span>}
-        {item.onClick ? (
-          <button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>
-        ) : (
-          <span>{item.label}</span>
-        )}
-      </React.Fragment>
-    ))}
-  </div>
-);
-
 export interface IPageHeaderProps {
   icon: IconName;
   subtitle: string;
   title: string;
+  /** Кнопки действий страницы — выравниваются по правому краю заголовка. */
   actions?: React.ReactNode;
 }
 
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Panel.module.scss b/frontend/src/webparts/approvalAdmin/components/ui/Panel.module.scss
new file mode 100644
index 0000000..da416f1
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Panel.module.scss
@@ -0,0 +1,10 @@
+@import '../../../../styles/design-tokens';
+
+.panel {
+  background: #fff;
+  border-radius: $r-lg;
+  border: 1px solid $gray-200;
+  box-shadow: $sh-1;
+  padding: 26px;
+  margin-bottom: 24px;
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Panel.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Panel.tsx
new file mode 100644
index 0000000..c70879a
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Panel.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import styles from './Panel.module.scss';
+
+export interface IPanelProps {
+  children: React.ReactNode;
+}
+
+/** Белая карточка-контейнер для блоков на странице (например, формы фильтров). */
+export const Panel: React.FC<IPanelProps> = ({ children }) => (
+  <div className={styles.panel}>{children}</div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/PrimaryCell.tsx b/frontend/src/webparts/approvalAdmin/components/ui/PrimaryCell.tsx
new file mode 100644
index 0000000..90ddabf
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/PrimaryCell.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import styles from './DataTable.module.scss';
+
+/** Основное (выделенное) значение ячейки таблицы. */
+export const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <span className={styles.primaryCell}>{children}</span>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/RadioGroup.tsx b/frontend/src/webparts/approvalAdmin/components/ui/RadioGroup.tsx
new file mode 100644
index 0000000..5bce292
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/RadioGroup.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export interface IRadioOption<T extends string> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+  disabledHint?: string;
+}
+
+export interface IRadioGroupProps<T extends string> {
+  name: string;
+  value: T;
+  options: IRadioOption<T>[];
+  onChange: (value: T) => void;
+}
+
+export function RadioGroup<T extends string>({ name, value, options, onChange }: IRadioGroupProps<T>): React.ReactElement {
+  return (
+    <div className={styles.radioGroup}>
+      {options.map(opt => (
+        <label
+          key={opt.value}
+          className={`${styles.radioRow} ${opt.disabled ? styles.disabled : ''}`}
+          title={opt.disabled ? opt.disabledHint : undefined}
+        >
+          <input
+            type="radio"
+            className={styles.radio}
+            name={name}
+            checked={value === opt.value}
+            disabled={opt.disabled}
+            onChange={() => onChange(opt.value)}
+          />
+          {opt.label}
+        </label>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/SearchableSelect.tsx b/frontend/src/webparts/approvalAdmin/components/ui/SearchableSelect.tsx
index d4f0685..7f99b0e 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/SearchableSelect.tsx
+++ b/frontend/src/webparts/approvalAdmin/components/ui/SearchableSelect.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from './SearchableSelect.module.scss';
 import { Icon } from './Icon';
+import { texts } from '../../texts';
 
 export interface ISearchableOption {
   value: string;
@@ -28,13 +29,13 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
   options,
   value,
   onChange,
-  placeholder = 'Выберите значение',
-  searchPlaceholder = 'Поиск...',
+  placeholder = texts.select.placeholder,
+  searchPlaceholder = texts.select.searchPlaceholder,
   disabled,
   loading,
   allowClear,
-  clearLabel = 'Не выбрано',
-  emptyMessage = 'Ничего не найдено'
+  clearLabel = texts.select.notSelected,
+  emptyMessage = texts.select.nothingFound
 }) => {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState('');
@@ -47,7 +48,7 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
   // Поэтому подмешиваем недостающую опцию явным образом.
   const effectiveOptions = React.useMemo(() => {
     if (!value || options.some(o => o.value === value)) return options;
-    return [{ value, label: value, sublabel: 'Нет в справочнике' }, ...options];
+    return [{ value, label: value, sublabel: texts.select.missingInDictionary }, ...options];
   }, [options, value]);
 
   const selected = effectiveOptions.filter(o => o.value === value)[0];
@@ -107,7 +108,7 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
         disabled={disabled || loading}
       >
         <span className={`${styles.value} ${selected ? '' : styles.placeholder}`}>
-          {loading ? 'Загрузка справочника...' : (selected ? selected.label : placeholder)}
+          {loading ? texts.select.loadingDictionary : (selected ? selected.label : placeholder)}
         </span>
         <Icon name="chevron-down" size="sm" className={styles.chevron} />
       </button>
@@ -124,7 +125,7 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
           <div className={styles.list}>
             {filtered.length === 0 && (
               <div className={styles.empty}>
-                {effectiveOptions.length === 0 ? emptyMessage : 'Ничего не найдено'}
+                {effectiveOptions.length === 0 ? emptyMessage : texts.select.nothingFound}
               </div>
             )}
             {filtered.map(opt => (
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Select.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Select.tsx
new file mode 100644
index 0000000..484be8d
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Select.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export interface ISelectOption {
+  value: string;
+  label: string;
+}
+
+export interface ISelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  options: ISelectOption[];
+  placeholder?: string;
+}
+
+export const Select: React.FC<ISelectProps> = ({ options, placeholder, ...rest }) => (
+  <select {...rest} className={styles.select}>
+    {placeholder && <option value="">{placeholder}</option>}
+    {options.map(opt => (
+      <option key={opt.value} value={opt.value}>{opt.label}</option>
+    ))}
+  </select>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/StatCard.tsx b/frontend/src/webparts/approvalAdmin/components/ui/StatCard.tsx
new file mode 100644
index 0000000..294b54f
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/StatCard.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import styles from './Card.module.scss';
+
+export interface IStatCardProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+export const StatCard: React.FC<IStatCardProps> = ({ label, value }) => (
+  <div className={styles.statCard}>
+    <div className={styles.statLabel}>{label}</div>
+    <div className={styles.statValue}>{value}</div>
+  </div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/StatRow.tsx b/frontend/src/webparts/approvalAdmin/components/ui/StatRow.tsx
new file mode 100644
index 0000000..4cd17bd
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/StatRow.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import styles from './Card.module.scss';
+
+export interface IStatRowProps {
+  children: React.ReactNode;
+}
+
+/** Строка счётчиков в верхней части дашборда. */
+export const StatRow: React.FC<IStatRowProps> = ({ children }) => (
+  <div className={styles.statRow}>{children}</div>
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/TextInput.tsx b/frontend/src/webparts/approvalAdmin/components/ui/TextInput.tsx
new file mode 100644
index 0000000..df1b7ae
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/TextInput.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export const TextInput: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = props => (
+  <input {...props} className={styles.input} />
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/Textarea.tsx b/frontend/src/webparts/approvalAdmin/components/ui/Textarea.tsx
new file mode 100644
index 0000000..c448ce7
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/components/ui/Textarea.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import styles from './FormField.module.scss';
+
+export const Textarea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement>> = props => (
+  <textarea {...props} className={styles.textarea} />
+);
diff --git a/frontend/src/webparts/approvalAdmin/components/ui/index.ts b/frontend/src/webparts/approvalAdmin/components/ui/index.ts
index 7974472..fb17e8f 100644
--- a/frontend/src/webparts/approvalAdmin/components/ui/index.ts
+++ b/frontend/src/webparts/approvalAdmin/components/ui/index.ts
@@ -1,11 +1,28 @@
 export * from './Icon';
 export * from './Button';
+export * from './IconButton';
 export * from './Badge';
 export * from './Alert';
-export * from './PageChrome';
-export * from './Card';
+export * from './Panel';
+export * from './Breadcrumbs';
+export * from './PageHeader';
+export * from './CardGrid';
+export * from './NavCard';
+export * from './StatRow';
+export * from './StatCard';
 export * from './DataTable';
+export * from './PrimaryCell';
+export * from './ActionsCell';
+export * from './CellNote';
 export * from './Modal';
-export * from './FormField';
+export * from './ConfirmDialog';
+export * from './FormModal';
+export * from './FormGrid';
+export * from './Field';
+export * from './TextInput';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './RadioGroup';
 export * from './SearchableSelect';
 export * from './AsyncSearchableSelect';
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useAsyncList.ts b/frontend/src/webparts/approvalAdmin/hooks/useAsyncList.ts
new file mode 100644
index 0000000..17945fd
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useAsyncList.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ApiClientError } from '../services/httpClient';
+
+export interface AsyncList<T> {
+  items: T[];
+  isLoading: boolean;
+  error?: string;
+  reload: () => void;
+}
+
+/**
+ * Загрузка списка с бэкенда: держит данные, признак загрузки и текст ошибки
+ * в одном месте, чтобы экраны не повторяли этот код.
+ *
+ * load обязан быть стабильным (React.useCallback) — иначе загрузка пойдёт по кругу.
+ */
+export function useAsyncList<T>(load: () => Promise<T[]>): AsyncList<T> {
+  const [items, setItems] = React.useState<T[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | undefined>();
+
+  const reload = React.useCallback(() => {
+    setIsLoading(true);
+    setError(undefined);
+    load()
+      .then(setItems)
+      .catch((e: ApiClientError) => setError(e.message))
+      .finally(() => setIsLoading(false));
+  }, [load]);
+
+  React.useEffect(() => { reload(); }, [reload]);
+
+  return { items, isLoading, error, reload };
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useAsyncSubmit.ts b/frontend/src/webparts/approvalAdmin/hooks/useAsyncSubmit.ts
new file mode 100644
index 0000000..b58de82
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useAsyncSubmit.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ApiClientError } from '../services/httpClient';
+
+export interface AsyncSubmit {
+  isBusy: boolean;
+  error?: string;
+  /** Показать ошибку без запроса — например, результат валидации формы. */
+  fail: (message: string) => void;
+  run: (action: () => Promise<void>) => void;
+}
+
+/**
+ * Состояние вокруг одного пишущего запроса: «выполняется» + текст ошибки.
+ * Используется формами и подтверждением удаления, чтобы не дублировать
+ * setBusy/setError/finally в каждом экране.
+ */
+export function useAsyncSubmit(): AsyncSubmit {
+  const [isBusy, setIsBusy] = React.useState(false);
+  const [error, setError] = React.useState<string | undefined>();
+
+  const run = (action: () => Promise<void>): void => {
+    setIsBusy(true);
+    setError(undefined);
+    action()
+      .catch((e: ApiClientError) => setError(e.message))
+      .finally(() => setIsBusy(false));
+  };
+
+  return { isBusy, error, fail: setError, run };
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useDeleteTarget.ts b/frontend/src/webparts/approvalAdmin/hooks/useDeleteTarget.ts
new file mode 100644
index 0000000..37ee042
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useDeleteTarget.ts
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { AsyncSubmit, useAsyncSubmit } from './useAsyncSubmit';
+
+export interface DeleteTarget<T> {
+  /** Запись, для которой открыт диалог подтверждения. */
+  target?: T;
+  isBusy: boolean;
+  error?: string;
+  ask: (item: T) => void;
+  cancel: () => void;
+  confirm: () => void;
+}
+
+/**
+ * Сценарий «спросили — удалили — обновили список», одинаковый на всех экранах:
+ * какая запись удаляется, идёт ли запрос и что показать при ошибке.
+ */
+export function useDeleteTarget<T>(remove: (item: T) => Promise<void>, onDeleted: () => void): DeleteTarget<T> {
+  const [target, setTarget] = React.useState<T | undefined>();
+  const submit: AsyncSubmit = useAsyncSubmit();
+
+  const confirm = (): void => {
+    if (!target) return;
+    submit.run(() =>
+      remove(target).then(() => {
+        setTarget(undefined);
+        onDeleted();
+      })
+    );
+  };
+
+  return {
+    target,
+    isBusy: submit.isBusy,
+    error: submit.error,
+    ask: setTarget,
+    cancel: () => setTarget(undefined),
+    confirm
+  };
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/usePortalDictionaries.ts b/frontend/src/webparts/approvalAdmin/hooks/usePortalDictionaries.ts
new file mode 100644
index 0000000..5e3ac64
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/usePortalDictionaries.ts
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Company, Department } from '../models';
+import { ApiClientError } from '../services/httpClient';
+import { PortalDictionaryClient } from '../services/portalDictionary';
+
+export interface PortalDictionaries {
+  companies: Company[];
+  departments: Department[];
+  isLoading: boolean;
+  error?: string;
+}
+
+/**
+ * Компании и отделы из 1С грузим один раз на экран: они статичны, а отделов ~700 —
+ * искать по ним дешевле в памяти, чем ходить на сервер на каждый символ.
+ */
+export function usePortalDictionaries(dictionary?: PortalDictionaryClient): PortalDictionaries {
+  const [companies, setCompanies] = React.useState<Company[]>([]);
+  const [departments, setDepartments] = React.useState<Department[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | undefined>();
+
+  React.useEffect(() => {
+    // Клиент появляется асинхронно: SPFx сначала выдаёт AAD-токен для api.tnsu.kz.
+    if (!dictionary) return;
+
+    setIsLoading(true);
+    setError(undefined);
+    Promise.all([dictionary.companies(), dictionary.departments()])
+      .then(([loadedCompanies, loadedDepartments]) => {
+        setCompanies(loadedCompanies);
+        setDepartments(loadedDepartments);
+      })
+      .catch((e: ApiClientError) => setError(e.message))
+      .finally(() => setIsLoading(false));
+  }, [dictionary]);
+
+  return { companies, departments, isLoading, error };
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useRequestTypes.ts b/frontend/src/webparts/approvalAdmin/hooks/useRequestTypes.ts
new file mode 100644
index 0000000..3ed9ffd
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useRequestTypes.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { RequestType } from '../models';
+import { ApprovalRouteApi } from '../services/api';
+import { AsyncList, useAsyncList } from './useAsyncList';
+
+/** Справочник типов заявок — нужен и своему экрану, и селектам на других. */
+export function useRequestTypes(api: ApprovalRouteApi): AsyncList<RequestType> {
+  const load = React.useCallback(() => api.requestTypes.list(), [api]);
+  return useAsyncList(load);
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useResolveRoute.ts b/frontend/src/webparts/approvalAdmin/hooks/useResolveRoute.ts
new file mode 100644
index 0000000..9571399
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useResolveRoute.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ResolveTemplateRouteQuery, ResolveTemplateRouteResult } from '../models';
+import { ApprovalRouteApi } from '../services/api';
+import { useAsyncSubmit } from './useAsyncSubmit';
+
+export interface ResolveRoute {
+  result?: ResolveTemplateRouteResult;
+  isBusy: boolean;
+  error?: string;
+  resolve: (query: ResolveTemplateRouteQuery) => void;
+  fail: (message: string) => void;
+}
+
+/** Диагностический запрос «как разрешится маршрут» и его состояние. */
+export function useResolveRoute(api: ApprovalRouteApi): ResolveRoute {
+  const [result, setResult] = React.useState<ResolveTemplateRouteResult | undefined>();
+  const submit = useAsyncSubmit();
+
+  const resolve = (query: ResolveTemplateRouteQuery): void => {
+    // Прошлый результат убираем сразу: показывать его рядом с новыми
+    // параметрами формы — вводить пользователя в заблуждение.
+    setResult(undefined);
+    submit.run(() => api.templateRoutes.resolve(query).then(setResult));
+  };
+
+  return { result, isBusy: submit.isBusy, error: submit.error, resolve, fail: submit.fail };
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useRouteSteps.ts b/frontend/src/webparts/approvalAdmin/hooks/useRouteSteps.ts
new file mode 100644
index 0000000..d5cd370
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useRouteSteps.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TemplateRouteStep } from '../models';
+import { ApprovalRouteApi } from '../services/api';
+import { AsyncList, useAsyncList } from './useAsyncList';
+
+function byOrderNo(steps: TemplateRouteStep[]): TemplateRouteStep[] {
+  return [...steps].sort((a, b) => a.orderNo - b.orderNo);
+}
+
+/** Шаги шаблона маршрута, всегда в порядке выполнения. */
+export function useRouteSteps(api: ApprovalRouteApi, routeId: number): AsyncList<TemplateRouteStep> {
+  const load = React.useCallback(
+    () => api.templateRouteSteps.list(routeId).then(byOrderNo),
+    [api, routeId]
+  );
+  return useAsyncList(load);
+}
diff --git a/frontend/src/webparts/approvalAdmin/hooks/useTemplateRoutes.ts b/frontend/src/webparts/approvalAdmin/hooks/useTemplateRoutes.ts
new file mode 100644
index 0000000..db872bf
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/hooks/useTemplateRoutes.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TemplateRoute } from '../models';
+import { ApprovalRouteApi } from '../services/api';
+import { AsyncList, useAsyncList } from './useAsyncList';
+
+/** Список маршрутов, при необходимости отфильтрованный по типу заявки. */
+export function useTemplateRoutes(api: ApprovalRouteApi, requestTypeId?: number): AsyncList<TemplateRoute> {
+  const load = React.useCallback(() => api.templateRoutes.list(requestTypeId), [api, requestTypeId]);
+  return useAsyncList(load);
+}
diff --git a/frontend/src/webparts/approvalAdmin/models/dictionaries.ts b/frontend/src/webparts/approvalAdmin/models/dictionaries.ts
new file mode 100644
index 0000000..764659f
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/dictionaries.ts
@@ -0,0 +1,24 @@
+// Справочники api.tnsu.kz (компании, отделы, проекты) в виде, удобном для UI.
+// Приведение из «сырых» PascalCase-ответов портала — в services/portalDictionary.ts.
+
+export interface Company {
+  id: string;
+  name: string;
+}
+
+export interface Department {
+  id: string;
+  name: string;
+  companyId: string;
+  company: string;
+}
+
+// Важно: идентификатор проекта — поле "oid". Именно оно принимается
+// портальным /Project/{oid:guid} и передаётся в ResolveTemplateRouteQuery.projectId.
+// Числовое "id" и legacy "id1c" — другие идентификаторы, для резолва не подходят.
+export interface Project {
+  oid: string;
+  name: string;
+  code: string | null;
+  status: string | null;
+}
diff --git a/frontend/src/webparts/approvalAdmin/models/enums.ts b/frontend/src/webparts/approvalAdmin/models/enums.ts
new file mode 100644
index 0000000..67909da
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/enums.ts
@@ -0,0 +1,30 @@
+// Зеркало enum'ов backend (Tnsu.ApprovalRoute.Domain/Enums/*.cs).
+// Значения должны 1:1 соответствовать C#-стороне: они ходят по сети как строки.
+// Человекочитаемые подписи к этим значениям живут не здесь, а в texts.ts.
+
+export enum RouteType {
+  None = 'None',
+  Parallel = 'Parallel',
+  Sequential = 'Sequential'
+}
+
+export enum RouteStepStatus {
+  None = 'None',
+  Approval = 'Approval',
+  Execution = 'Execution'
+}
+
+export enum ProjectRole {
+  None = 'None',
+  ProjectManager = 'ProjectManager',
+  Planner = 'Planner',
+  ManagerHSE = 'ManagerHSE',
+  Security = 'Security'
+}
+
+export enum HeadType {
+  None = 'None',
+  Chief = 'Chief',
+  DirectionHead = 'DirectionHead',
+  DirectorTansu = 'DirectorTansu'
+}
diff --git a/frontend/src/webparts/approvalAdmin/models/index.ts b/frontend/src/webparts/approvalAdmin/models/index.ts
index 941cde6..11b7ff6 100644
--- a/frontend/src/webparts/approvalAdmin/models/index.ts
+++ b/frontend/src/webparts/approvalAdmin/models/index.ts
@@ -1,220 +1,7 @@
-// Зеркало DTO и enum'ов backend (Tnsu.ApprovalRoute.Api / Application / Domain).
-// Имена и форма типов должны 1:1 соответствовать C#-стороне — см.
-// backend/src/Tnsu.ApprovalRoute.Domain/Enums/*.cs и
-// backend/src/Tnsu.ApprovalRoute.Application/**/*.cs
-
-export enum RouteType {
-  None = 'None',
-  Parallel = 'Parallel',
-  Sequential = 'Sequential'
-}
-
-export enum RouteStepStatus {
-  None = 'None',
-  Approval = 'Approval',
-  Execution = 'Execution'
-}
-
-export enum ProjectRole {
-  None = 'None',
-  ProjectManager = 'ProjectManager',
-  Planner = 'Planner',
-  ManagerHSE = 'ManagerHSE',
-  Security = 'Security'
-}
-
-export enum HeadType {
-  None = 'None',
-  Chief = 'Chief',
-  DirectionHead = 'DirectionHead',
-  DirectorTansu = 'DirectorTansu'
-}
-
-export const routeTypeLabels: Record<RouteType, string> = {
-  [RouteType.None]: 'Не задан',
-  [RouteType.Parallel]: 'Параллельный',
-  [RouteType.Sequential]: 'Последовательный'
-};
-
-export const routeStepStatusLabels: Record<RouteStepStatus, string> = {
-  [RouteStepStatus.None]: 'Не задан',
-  [RouteStepStatus.Approval]: 'Согласование',
-  [RouteStepStatus.Execution]: 'Исполнение'
-};
-
-export const projectRoleLabels: Record<ProjectRole, string> = {
-  [ProjectRole.None]: '—',
-  [ProjectRole.ProjectManager]: 'Руководитель проекта',
-  [ProjectRole.Planner]: 'Планировщик',
-  [ProjectRole.ManagerHSE]: 'Менеджер HSE',
-  [ProjectRole.Security]: 'Безопасность'
-};
-
-export const headTypeLabels: Record<HeadType, string> = {
-  [HeadType.None]: '—',
-  [HeadType.Chief]: 'Непосредственный руководитель',
-  [HeadType.DirectionHead]: 'Руководитель направления',
-  [HeadType.DirectorTansu]: 'Директор Tansu'
-};
-
-// ---- Справочники api.tnsu.kz, проксируемые нашим бэкендом ----
-// (api/dictionary/companies, api/dictionary/departments)
-
-export interface Company {
-  id: string;
-  name: string;
-}
-
-export interface Department {
-  id: string;
-  name: string;
-  companyId: string;
-  company: string;
-}
-
-// api.tnsu.kz/Project — важно: используем поле "oid" как идентификатор проекта
-// (это то же самое значение, которое /Project/{oid:guid} на портале принимает
-// и которое передаётся как ResolveTemplateRouteRequest.ProjectId). Числовое
-// "id" и legacy "id1c" — другие идентификаторы, для резолва не подходят.
-export interface Project {
-  oid: string;
-  name: string;
-  code: string | null;
-  status: string | null;
-}
-
-// ---- Request Types (api/request-types) ----
-
-export interface RequestType {
-  id: number;
-  name: string;
-  pageUrl: string;
-}
-
-export interface CreateRequestTypeInput {
-  name: string;
-  pageUrl: string;
-}
-
-export type UpdateRequestTypeInput = CreateRequestTypeInput;
-
-export interface PatchRequestTypeInput {
-  name?: string;
-  pageUrl?: string;
-}
-
-// ---- Template Routes (api/template-routes) ----
-
-export interface TemplateRoute {
-  id: number;
-  routeType: RouteType;
-  requestTypeId: number;
-  departmentId: string | null;
-  companyId: string;
-  byProject: boolean;
-  requiresControl: boolean;
-}
-
-export interface CreateTemplateRouteInput {
-  routeType: RouteType;
-  requestTypeId: number;
-  departmentId: string | null;
-  companyId: string;
-  byProject: boolean;
-  requiresControl: boolean;
-}
-
-export interface UpdateTemplateRouteInput {
-  routeType: RouteType;
-  departmentId: string | null;
-  companyId: string;
-  byProject: boolean;
-  requiresControl: boolean;
-}
-
-export interface PatchTemplateRouteInput {
-  routeType?: RouteType;
-  departmentId?: string | null;
-  companyId?: string;
-  byProject?: boolean;
-  requiresControl?: boolean;
-}
-
-// ---- Template Route Steps (api/template-routes/{routeId}/steps) ----
-
-export interface TemplateRouteStep {
-  id: number;
-  orderNo: number;
-  executorEmail: string | null;
-  position: string | null;
-  projectRole: ProjectRole | null;
-  headType: HeadType | null;
-  status: RouteStepStatus;
-  routeId: number;
-  allowReassignToOtherApprovers: boolean;
-  warning?: string | null;
-}
-
-export interface CreateTemplateRouteStepInput {
-  orderNo: number;
-  executorEmail: string | null;
-  position: string | null;
-  projectRole: ProjectRole | null;
-  headType: HeadType | null;
-  status: RouteStepStatus;
-  allowReassignToOtherApprovers: boolean;
-}
-
-export type UpdateTemplateRouteStepInput = CreateTemplateRouteStepInput;
-
-export interface PatchTemplateRouteStepInput {
-  orderNo?: number;
-  executorEmail?: string | null;
-  position?: string | null;
-  projectRole?: ProjectRole | null;
-  headType?: HeadType | null;
-  status?: RouteStepStatus;
-  allowReassignToOtherApprovers?: boolean;
-}
-
-// ---- Resolve (api/template-routes/resolve) ----
-
-export interface ResolveTemplateRouteQuery {
-  requestTypeId: number;
-  userEmail?: string;
-  projectId?: string;
-  status: RouteStepStatus;
-}
-
-export interface ResolvedRouteStep {
-  id: number;
-  orderNo: number;
-  executorEmail: string | null;
-  position: string | null;
-  allowReassignToOtherApprovers: boolean;
-  /** Причина, по которой исполнитель шага не определился (заполняется бэкендом). */
-  warning: string | null;
-}
-
-export interface ResolveTemplateRouteResult {
-  routeId: number;
-  routeType: RouteType;
-  requiresControl: boolean;
-  steps: ResolvedRouteStep[];
-}
-
-// Ровно одно из этих полей должно быть заполнено на шаге маршрута
-// (см. TemplateRouteStepFields.CountFilled на бэкенде).
-export type StepExecutorKind = 'email' | 'position' | 'projectRole' | 'headType';
-
-export function detectExecutorKind(step: {
-  executorEmail?: string | null;
-  position?: string | null;
-  projectRole?: ProjectRole | null;
-  headType?: HeadType | null;
-}): StepExecutorKind {
-  if (step.executorEmail) return 'email';
-  if (step.position) return 'position';
-  if (step.projectRole && step.projectRole !== ProjectRole.None) return 'projectRole';
-  return 'headType';
-}
+// Единая точка импорта моделей: import { TemplateRoute } from '../../models';
+export * from './enums';
+export * from './dictionaries';
+export * from './requestTypes';
+export * from './templateRoutes';
+export * from './templateRouteSteps';
+export * from './resolve';
diff --git a/frontend/src/webparts/approvalAdmin/models/requestTypes.ts b/frontend/src/webparts/approvalAdmin/models/requestTypes.ts
new file mode 100644
index 0000000..35e2220
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/requestTypes.ts
@@ -0,0 +1,19 @@
+// DTO эндпоинта api/request-types (Application/RequestTypes/*.cs).
+
+export interface RequestType {
+  id: number;
+  name: string;
+  pageUrl: string;
+}
+
+export interface CreateRequestTypeInput {
+  name: string;
+  pageUrl: string;
+}
+
+export type UpdateRequestTypeInput = CreateRequestTypeInput;
+
+export interface PatchRequestTypeInput {
+  name?: string;
+  pageUrl?: string;
+}
diff --git a/frontend/src/webparts/approvalAdmin/models/resolve.ts b/frontend/src/webparts/approvalAdmin/models/resolve.ts
new file mode 100644
index 0000000..5e5808a
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/resolve.ts
@@ -0,0 +1,28 @@
+// DTO эндпоинта api/template-routes/resolve
+// (Application/TemplateRoutes/ResolveTemplateRouteDto.cs).
+
+import { RouteStepStatus, RouteType } from './enums';
+
+export interface ResolveTemplateRouteQuery {
+  requestTypeId: number;
+  userEmail?: string;
+  projectId?: string;
+  status: RouteStepStatus;
+}
+
+export interface ResolvedRouteStep {
+  id: number;
+  orderNo: number;
+  executorEmail: string | null;
+  position: string | null;
+  allowReassignToOtherApprovers: boolean;
+  /** Причина, по которой исполнитель шага не определился (текст с бэкенда). */
+  warning: string | null;
+}
+
+export interface ResolveTemplateRouteResult {
+  routeId: number;
+  routeType: RouteType;
+  requiresControl: boolean;
+  steps: ResolvedRouteStep[];
+}
diff --git a/frontend/src/webparts/approvalAdmin/models/templateRouteSteps.ts b/frontend/src/webparts/approvalAdmin/models/templateRouteSteps.ts
new file mode 100644
index 0000000..9f022be
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/templateRouteSteps.ts
@@ -0,0 +1,45 @@
+// DTO эндпоинта api/template-routes/{routeId}/steps
+// (Application/TemplateRouteSteps/*.cs).
+
+import { HeadType, ProjectRole, RouteStepStatus } from './enums';
+
+export interface TemplateRouteStep {
+  id: number;
+  orderNo: number;
+  executorEmail: string | null;
+  position: string | null;
+  projectRole: ProjectRole | null;
+  headType: HeadType | null;
+  status: RouteStepStatus;
+  routeId: number;
+  allowReassignToOtherApprovers: boolean;
+  /** Предупреждение бэкенда о сохранённом шаге (например, должность не найдена). */
+  warning?: string | null;
+}
+
+export interface CreateTemplateRouteStepInput {
+  orderNo: number;
+  executorEmail: string | null;
+  position: string | null;
+  projectRole: ProjectRole | null;
+  headType: HeadType | null;
+  status: RouteStepStatus;
+  allowReassignToOtherApprovers: boolean;
+}
+
+export type UpdateTemplateRouteStepInput = CreateTemplateRouteStepInput;
+
+export interface PatchTemplateRouteStepInput {
+  orderNo?: number;
+  executorEmail?: string | null;
+  position?: string | null;
+  projectRole?: ProjectRole | null;
+  headType?: HeadType | null;
+  status?: RouteStepStatus;
+  allowReassignToOtherApprovers?: boolean;
+}
+
+// Способ задать исполнителя шага: ровно одно из полей выше должно быть заполнено
+// (см. TemplateRouteStepFields.CountFilled на бэкенде). Union-тип, а не строки
+// по месту, — чтобы опечатку поймал компилятор.
+export type StepExecutorKind = 'email' | 'position' | 'projectRole' | 'headType';
diff --git a/frontend/src/webparts/approvalAdmin/models/templateRoutes.ts b/frontend/src/webparts/approvalAdmin/models/templateRoutes.ts
new file mode 100644
index 0000000..bf722e3
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/models/templateRoutes.ts
@@ -0,0 +1,39 @@
+// DTO эндпоинта api/template-routes (Application/TemplateRoutes/*.cs).
+
+import { RouteType } from './enums';
+
+export interface TemplateRoute {
+  id: number;
+  routeType: RouteType;
+  requestTypeId: number;
+  departmentId: string | null;
+  companyId: string;
+  byProject: boolean;
+  requiresControl: boolean;
+}
+
+export interface CreateTemplateRouteInput {
+  routeType: RouteType;
+  requestTypeId: number;
+  departmentId: string | null;
+  companyId: string;
+  byProject: boolean;
+  requiresControl: boolean;
+}
+
+// Тип заявки у существующего маршрута не меняется — его нет в update-контракте.
+export interface UpdateTemplateRouteInput {
+  routeType: RouteType;
+  departmentId: string | null;
+  companyId: string;
+  byProject: boolean;
+  requiresControl: boolean;
+}
+
+export interface PatchTemplateRouteInput {
+  routeType?: RouteType;
+  departmentId?: string | null;
+  companyId?: string;
+  byProject?: boolean;
+  requiresControl?: boolean;
+}
diff --git a/frontend/src/webparts/approvalAdmin/texts.ts b/frontend/src/webparts/approvalAdmin/texts.ts
new file mode 100644
index 0000000..3122a40
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/texts.ts
@@ -0,0 +1,240 @@
+// Все пользовательские тексты интерфейса — в одном месте.
+// Так их видно целиком (легко вычитать формулировки) и это задел под локализацию:
+// компонентам не нужно знать, откуда пришла строка.
+//
+// Строки с подстановкой оформлены функциями, чтобы шаблон и данные не разъезжались.
+
+import { HeadType, ProjectRole, RouteStepStatus, RouteType } from './models';
+import { pluralRu } from './utils/plural';
+
+// ---- Подписи enum'ов ----
+// Record<enum, string> гарантирует, что при добавлении значения в enum
+// компилятор потребует и подпись к нему.
+
+export const routeTypeLabels: Record<RouteType, string> = {
+  [RouteType.None]: 'Не задан',
+  [RouteType.Parallel]: 'Параллельный',
+  [RouteType.Sequential]: 'Последовательный'
+};
+
+export const routeStepStatusLabels: Record<RouteStepStatus, string> = {
+  [RouteStepStatus.None]: 'Не задан',
+  [RouteStepStatus.Approval]: 'Согласование',
+  [RouteStepStatus.Execution]: 'Исполнение'
+};
+
+export const projectRoleLabels: Record<ProjectRole, string> = {
+  [ProjectRole.None]: '—',
+  [ProjectRole.ProjectManager]: 'Руководитель проекта',
+  [ProjectRole.Planner]: 'Планировщик',
+  [ProjectRole.ManagerHSE]: 'Менеджер HSE',
+  [ProjectRole.Security]: 'Безопасность'
+};
+
+export const headTypeLabels: Record<HeadType, string> = {
+  [HeadType.None]: '—',
+  [HeadType.Chief]: 'Непосредственный руководитель',
+  [HeadType.DirectionHead]: 'Руководитель направления',
+  [HeadType.DirectorTansu]: 'Директор Tansu'
+};
+
+export const texts = {
+  common: {
+    home: 'Главная',
+    cancel: 'Отмена',
+    save: 'Сохранить',
+    saving: 'Сохранение...',
+    remove: 'Удалить',
+    edit: 'Редактировать',
+    close: 'Закрыть',
+    loading: 'Загрузка...',
+    yes: 'Да',
+    no: 'Нет',
+    /** Прочерк вместо пустого значения — чтобы ячейка таблицы не выглядела сломанной. */
+    empty: '—'
+  },
+
+  nav: {
+    brand: 'TNSU',
+    brandAccent: 'Approval Route',
+    dashboard: 'Дашборд',
+    requestTypes: 'Типы заявок',
+    routes: 'Маршруты',
+    resolve: 'Проверка маршрута'
+  },
+
+  app: {
+    connecting: 'Подключение к API...',
+    connectFailed: (message: string): string => `Не удалось подключиться к API: ${message}`,
+    connectHint: 'Проверьте свойства веб-части (Api Base Url, режим авторизации) в панели настроек.'
+  },
+
+  dashboard: {
+    requestTypesStat: 'Типов заявок',
+    routesStat: 'Маршрутов согласования',
+    sections: 'Разделы',
+    requestTypesCard: {
+      title: 'Типы заявок',
+      description: 'Справочник типов заявок и их страниц'
+    },
+    routesCard: {
+      title: 'Маршруты согласования',
+      description: 'Маршруты, шаги и исполнители'
+    },
+    resolveCard: {
+      title: 'Проверка маршрута',
+      description: 'Как разрешится маршрут для конкретного пользователя'
+    }
+  },
+
+  requestTypes: {
+    breadcrumb: 'Типы заявок',
+    subtitle: 'Справочник',
+    title: 'Типы заявок',
+    add: 'Добавить тип',
+    emptyList: 'Типов заявок пока нет.',
+    columnName: 'Название',
+    columnPageUrl: 'Url страницы',
+    createTitle: 'Новый тип заявки',
+    editTitle: 'Редактировать тип заявки',
+    nameLabel: 'Название',
+    namePlaceholder: 'Например, Заявка на командировку',
+    pageUrlLabel: 'Url страницы',
+    pageUrlHint: 'Страница формы заявки на портале.',
+    pageUrlPlaceholder: '/pages/business-trip',
+    validationRequired: 'Заполните имя и Url страницы.',
+    deleteTitle: 'Удалить тип заявки?',
+    deleteText: (name: string): string =>
+      `Тип «${name}» будет удалён безвозвратно. Связанные маршруты могут перестать разрешаться.`
+  },
+
+  routes: {
+    breadcrumb: 'Маршруты согласования',
+    subtitle: 'Настройка согласований',
+    title: 'Маршруты согласования',
+    add: 'Добавить маршрут',
+    filterLabel: 'Фильтр по типу заявки',
+    filterAll: 'Все типы заявок',
+    dictionaryFailed: (message: string): string => `Справочник компаний и отделов недоступен: ${message}`,
+    emptyList: 'Маршрутов пока нет.',
+    columnRequestType: 'Тип заявки',
+    columnRouteType: 'Тип маршрута',
+    columnCompany: 'Компания',
+    columnDepartment: 'Отдел',
+    columnByProject: 'По проекту',
+    columnControl: 'Контроль',
+    controlRequired: 'Требуется',
+    openSteps: 'Шаги',
+    createTitle: 'Новый маршрут',
+    editTitle: (routeId: number): string => `Маршрут #${routeId}`,
+    requestTypeLabel: 'Тип заявки',
+    requestTypePlaceholder: 'Выберите тип заявки',
+    routeTypeLabel: 'Тип маршрута',
+    companyLabel: 'Компания',
+    companyHint: 'Справочник 1С (api.tnsu.kz).',
+    companyPlaceholder: 'Выберите компанию',
+    companySearchPlaceholder: 'Поиск по названию компании...',
+    departmentLabel: 'Отдел',
+    departmentHint: 'Необязательно — пусто означает маршрут «по умолчанию» для всей компании.',
+    departmentHintNoCompany: 'Сначала выберите компанию.',
+    departmentPlaceholder: 'Без отдела (маршрут по умолчанию)',
+    departmentSearchPlaceholder: 'Поиск по названию отдела...',
+    departmentEmpty: 'У выбранной компании нет отделов в справочнике',
+    byProjectLabel: 'По проекту',
+    byProjectCheckbox: 'Маршрут учитывает конкретный проект',
+    controlLabel: 'Контроль',
+    controlCheckbox: 'Требуется отдельный контроль исполнения',
+    validationRequestType: 'Выберите тип заявки.',
+    validationCompany: 'Компания обязательна (Guid из справочника api.tnsu.kz).',
+    deleteTitle: 'Удалить маршрут?',
+    deleteText: (routeId: number): string =>
+      `Маршрут #${routeId} и все его шаги будут удалены безвозвратно.`
+  },
+
+  routeSteps: {
+    breadcrumb: (routeId: number): string => `Шаги маршрута #${routeId}`,
+    title: (routeId: number): string => `Маршрут #${routeId}`,
+    subtitle: (requestTypeName: string, routeTypeLabel: string): string =>
+      `${requestTypeName} · ${routeTypeLabel}`,
+    back: 'К маршрутам',
+    add: 'Добавить шаг',
+    emptyList: 'Шагов пока нет — добавьте первый.',
+    columnOrderNo: '№',
+    columnExecutor: 'Исполнитель',
+    columnStatus: 'Статус',
+    columnReassign: 'Переназначение',
+    reassignAllowed: 'Разрешено',
+    executorRole: (roleLabel: string): string => `Роль: ${roleLabel}`,
+    executorHead: (headLabel: string): string => `Руководитель: ${headLabel}`,
+    createTitle: 'Новый шаг маршрута',
+    editTitle: (orderNo: number): string => `Шаг #${orderNo}`,
+    orderNoLabel: 'Порядковый номер',
+    statusLabel: 'Статус шага',
+    kindLabel: 'Кто исполнитель',
+    kindHint: 'Должно быть заполнено ровно одно из полей.',
+    kindEmail: 'Конкретный сотрудник (email)',
+    kindPosition: 'По должности в компании инициатора',
+    kindProjectRole: 'По роли в проекте',
+    kindProjectRoleDisabled: 'Недоступно: маршрут не учитывает проект (по проекту = нет).',
+    kindHeadType: 'По типу руководителя',
+    emailLabel: 'Email исполнителя',
+    emailPlaceholder: 'user@tnsu.kz',
+    positionLabel: 'Должность',
+    positionHint: 'Ищется в справочнике api.tnsu.kz по компании инициатора.',
+    positionPlaceholder: 'Главный инженер',
+    projectRoleLabel: 'Роль в проекте',
+    headTypeLabel: 'Тип руководителя',
+    reassignLabel: 'Переназначение',
+    reassignCheckbox: 'Разрешить переназначать другим согласующим',
+    validationOrderNo: 'Порядковый номер шага обязателен.',
+    validationEmail: 'Укажите email исполнителя.',
+    validationPosition: 'Укажите должность.',
+    deleteTitle: 'Удалить шаг?',
+    deleteText: (orderNo: number): string => `Шаг #${orderNo} будет удалён безвозвратно.`
+  },
+
+  resolve: {
+    breadcrumb: 'Проверка маршрута',
+    subtitle: 'Диагностика',
+    title: 'Проверка разрешения маршрута',
+    requestTypeLabel: 'Тип заявки',
+    requestTypePlaceholder: 'Выберите тип заявки',
+    userEmailLabel: 'Email инициатора',
+    userEmailHint: (currentUserEmail: string): string => `Пусто = текущий пользователь (${currentUserEmail}).`,
+    userEmailHintUnknown: 'Пусто = текущий пользователь из токена.',
+    userEmailPlaceholder: 'user@tnsu.kz',
+    projectLabel: 'Проект',
+    projectHint: 'Заполните, если маршрут зависит от проекта (ByProject = true).',
+    projectPlaceholder: 'Не выбран',
+    projectLoadingPlaceholder: 'Справочник загружается...',
+    projectSearchPlaceholder: 'Поиск проекта по названию...',
+    projectClear: 'Без проекта',
+    projectDictionaryLoading: 'Справочник проектов ещё загружается.',
+    statusLabel: 'Статус',
+    run: 'Проверить',
+    running: 'Проверка...',
+    validationRequestType: 'Выберите тип заявки.',
+    summary: (routeId: number, routeTypeLabel: string, requiresControl: boolean): string =>
+      `Маршрут #${routeId} · ${routeTypeLabel}${requiresControl ? ' · требуется контроль исполнения' : ''}`,
+    unresolved: (count: number): string =>
+      `Исполнитель не определён: ${count} ${pluralRu(count, ['шаг', 'шага', 'шагов'])} — причина указана в строке.`,
+    positionMissing: 'Должность не указана в карточке сотрудника.',
+    columnOrderNo: '№',
+    columnExecutor: 'Исполнитель',
+    columnPosition: 'Должность',
+    columnReassign: 'Переназначение',
+    reassignAllowed: 'Разрешено',
+    emptySteps: 'Маршрут разрешился без шагов для этого статуса.'
+  },
+
+  // Значения по умолчанию для переиспользуемых контролов выбора.
+  select: {
+    placeholder: 'Выберите значение',
+    searchPlaceholder: 'Поиск...',
+    nothingFound: 'Ничего не найдено',
+    notSelected: 'Не выбрано',
+    missingInDictionary: 'Нет в справочнике',
+    loadingDictionary: 'Загрузка справочника...',
+    searching: 'Поиск...'
+  }
+};
diff --git a/frontend/src/webparts/approvalAdmin/utils/guid.ts b/frontend/src/webparts/approvalAdmin/utils/guid.ts
new file mode 100644
index 0000000..00c6e79
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/utils/guid.ts
@@ -0,0 +1,10 @@
+const SHORT_GUID_LENGTH = 8;
+
+/**
+ * Короткий вид Guid для таблиц: 3fa85f64… вместо всех 36 символов.
+ * Нужен, когда название из справочника ещё не загрузилось или запись удалили,
+ * а строка таблицы не должна выглядеть пустой.
+ */
+export function shortGuid(guid: string): string {
+  return guid.length > SHORT_GUID_LENGTH ? `${guid.slice(0, SHORT_GUID_LENGTH)}…` : guid;
+}
diff --git a/frontend/src/webparts/approvalAdmin/utils/plural.ts b/frontend/src/webparts/approvalAdmin/utils/plural.ts
new file mode 100644
index 0000000..2e99079
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/utils/plural.ts
@@ -0,0 +1,16 @@
+/**
+ * Русское склонение существительного после числа.
+ *
+ * Формы передаются в порядке: 1 шаг / 2 шага / 5 шагов.
+ * Пример: pluralRu(2, ['шаг', 'шага', 'шагов']) → 'шага'.
+ */
+export function pluralRu(count: number, forms: [string, string, string]): string {
+  const lastTwoDigits = Math.abs(count) % 100;
+  const lastDigit = lastTwoDigits % 10;
+
+  // 11–14 — исключение: «11 шагов», хотя последняя цифра 1.
+  if (lastTwoDigits >= 11 && lastTwoDigits <= 14) return forms[2];
+  if (lastDigit === 1) return forms[0];
+  if (lastDigit >= 2 && lastDigit <= 4) return forms[1];
+  return forms[2];
+}
diff --git a/frontend/src/webparts/approvalAdmin/utils/stepExecutor.ts b/frontend/src/webparts/approvalAdmin/utils/stepExecutor.ts
new file mode 100644
index 0000000..f03daa2
--- /dev/null
+++ b/frontend/src/webparts/approvalAdmin/utils/stepExecutor.ts
@@ -0,0 +1,28 @@
+import { HeadType, ProjectRole, StepExecutorKind, TemplateRouteStep } from '../models';
+import { headTypeLabels, projectRoleLabels, texts } from '../texts';
+
+/** Каким из четырёх взаимоисключающих способов у шага задан исполнитель. */
+export function detectExecutorKind(step: {
+  executorEmail?: string | null;
+  position?: string | null;
+  projectRole?: ProjectRole | null;
+  headType?: HeadType | null;
+}): StepExecutorKind {
+  if (step.executorEmail) return 'email';
+  if (step.position) return 'position';
+  if (step.projectRole && step.projectRole !== ProjectRole.None) return 'projectRole';
+  return 'headType';
+}
+
+/** Одна строка для колонки «Исполнитель» в таблице шагов шаблона маршрута. */
+export function describeStepExecutor(step: TemplateRouteStep): string {
+  if (step.executorEmail) return step.executorEmail;
+  if (step.position) return step.position;
+  if (step.projectRole && step.projectRole !== ProjectRole.None) {
+    return texts.routeSteps.executorRole(projectRoleLabels[step.projectRole]);
+  }
+  if (step.headType && step.headType !== HeadType.None) {
+    return texts.routeSteps.executorHead(headTypeLabels[step.headType]);
+  }
+  return texts.common.empty;
+}