шлется на реальный сервер (#2)

Co-authored-by: Mariya Trishina <trishina.mariya@tnsu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/hr-appeals/pulls/2

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "hr-appeals-web",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}

.gitignore

@@ -13,3 +13,10 @@ Thumbs.db
 npm-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+
+.env
+
+# Сертификаты и ключи. Каталог подменяется целиком: локально это secrets/,
+# в контейнере — примонтированный /certs (см. docker-compose.yml).
+secrets/*
+!secrets/README.md

README.md

@@ -26,9 +26,21 @@ npm install
 npm run dev
 ```
 
+`npm run dev` поднимает сразу оба процесса: фронтенд на `:3000` и сервис
+авторизации `hr-appeals-auth` на `:3100` (логи помечены `[web]` и `[auth]`).
+Форма отправляется на `/api/feedback`, dev-сервер проксирует это на `:3100` —
+так же, как nginx в проде (`nginx.conf`). Без запущенного `[auth]` отправка
+формы отдаёт 500 от прокси.
+
+Сервису нужны две вещи: `server/.env` (скопируйте
+[server/.env.example](server/.env.example)) и сертификат Azure AD в каталоге
+[`secrets/`](secrets/README.md). Сами `.pem`-файлы в git не хранятся — их надо
+взять у администратора. Подробнее — в [server/README.md](server/README.md).
+
 Прочие команды:
 
 ```bash
+npm run dev:web    # только фронтенд, без сервиса авторизации
 npm run build      # проверка типов + тесты + production-сборка в dist/
 npm run typecheck  # только проверка типов
 npm run test       # тесты один раз (то же, что гоняет CI)

docker-compose.yml

@@ -13,8 +13,9 @@ services:
     environment:
       GRAPH_TENANT_ID: ${GRAPH_TENANT_ID:?в .env на сервере не задан GRAPH_TENANT_ID}
       GRAPH_CLIENT_ID: ${GRAPH_CLIENT_ID:?в .env на сервере не задан GRAPH_CLIENT_ID}
-      GRAPH_CERT_PATH: /certs/SPFxDeploy_cert.pem
+      # Один параметр на весь каталог с секретами — имена файлов внутри
-      GRAPH_KEY_PATH: /certs/SPFxDeploy_key.pem
+      # фиксированы (см. server/src/config.ts).
+      SECRETS_DIR: /certs
     volumes:
       # Каталог с сертификатом/ключом на сервере — путь задаётся в .env
       # (GRAPH_CERT_DIR), сами файлы в git не попадают.

package-lock.json

@@ -19,6 +19,7 @@
         "@types/react": "17.0.45",
         "@types/react-dom": "17.0.17",
         "@vitejs/plugin-react": "^4.3.4",
+        "concurrently": "^10.0.5",
         "sass": "^1.83.0",
         "typescript": "~5.8.0",
         "vite": "^6.0.7",
@@ -1957,6 +1958,32 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
+      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -2045,6 +2072,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -2061,6 +2101,46 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/concurrently": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-10.0.5.tgz",
+      "integrity": "sha512-JaP/CoftUrCcAFW/g//RbgEGwlelnEae6cfBLgH6ZdO6s8jPkn6p9SB9u6pdVxYXoiSnFqseOlHfrEfF82TVOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "5.6.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.9.0",
+        "supports-color": "10.2.2",
+        "tree-kill": "1.2.2",
+        "yargs": "18.0.0"
+      },
+      "bin": {
+        "conc": "dist/bin/index.js",
+        "concurrently": "dist/bin/index.js"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2110,6 +2190,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-module-lexer": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
@@ -2232,6 +2319,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/immutable": {
       "version": "5.1.9",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
@@ -2548,6 +2658,16 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/sass": {
       "version": "1.103.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.103.0.tgz",
@@ -2589,6 +2709,19 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/shell-quote": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.9.0.tgz",
+      "integrity": "sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -2620,6 +2753,53 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -2664,6 +2844,16 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2904,12 +3094,68 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
     }
   }
 }

package.json

@@ -7,7 +7,8 @@
     "node": ">=20"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently -n web,auth -c cyan,magenta -k \"vite\" \"npm --prefix server run dev\"",
+    "dev:web": "vite",
     "build": "tsc --noEmit && vitest run && vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
@@ -27,6 +28,7 @@
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
     "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^10.0.5",
     "sass": "^1.83.0",
     "typescript": "~5.8.0",
     "vite": "^6.0.7",

secrets/README.md

@@ -0,0 +1,34 @@
+# secrets
+
+Сертификат и приватный ключ приложения Azure AD, под которым сервис
+`hr-appeals-auth` получает app-only токен. **В git не попадают** — всё
+содержимое каталога, кроме этого файла, в `.gitignore`.
+
+Положите сюда два файла (взять у администратора):
+
+```
+secrets/
+  SPFxDeploy_cert.pem
+  SPFxDeploy_key.pem
+```
+
+Имена фиксированные — их ждёт [server/src/config.ts](../server/src/config.ts).
+
+## Подменить каталог целиком
+
+Путь задаётся одной переменной `SECRETS_DIR`, поэтому каталог можно заменить
+не трогая код:
+
+```bash
+SECRETS_DIR=/path/to/other/secrets npm run dev --prefix server
+```
+
+По умолчанию — этот каталог. В продовом контейнере `SECRETS_DIR=/certs`, куда
+смонтирован каталог с хоста: путь на хосте задаёт `GRAPH_CERT_DIR` в `.env`
+рядом с `docker-compose.yml` на сервере.
+
+## Если ключ утёк
+
+Сертификат перевыпускается в Azure AD (App registrations → нужное приложение →
+Certificates & secrets), старый оттуда удаляется. Замена файлов здесь без этого
+ничего не даёт: Azure AD продолжит принимать подпись старым ключом.

server/.env.example

@@ -0,0 +1,13 @@
+# Локальный запуск: скопируйте в server/.env.
+# На проде эти переменные задаёт docker-compose (см. docker-compose.yml).
+
+GRAPH_TENANT_ID=b4c2af35-bfd6-4cff-9af9-556efb53e65a
+GRAPH_CLIENT_ID=26d2e058-0b27-4a00-b49f-1f17c4eecd1d
+
+# 3000 занят vite (см. vite.config.ts), поэтому локально сервис слушает 3100 —
+# именно туда проксирует /api из dev-сервера.
+PORT=3100
+
+# Каталог с сертификатом и ключом. По умолчанию — secrets/ в корне репозитория,
+# задавать нужно только чтобы подменить его на другой (см. secrets/README.md).
+# SECRETS_DIR=/path/to/secrets

server/README.md

@@ -13,10 +13,24 @@ assertion) и используется для авторизованных за
 |---|---|
 | `GRAPH_TENANT_ID` | Tenant ID Azure AD |
 | `GRAPH_CLIENT_ID` | Client ID App Registration, к которому привязан сертификат `SPFxDeploy` |
-| `GRAPH_CERT_PATH` | Путь к `SPFxDeploy_cert.pem` внутри контейнера (см. `docker-compose.yml` в корне репозитория) |
+| `SECRETS_DIR` | Каталог с `SPFxDeploy_cert.pem` и `SPFxDeploy_key.pem` (имена файлов фиксированы). По умолчанию — [`secrets/`](../secrets/README.md) в корне репозитория; в контейнере `/certs`, куда смонтирован каталог с хоста. Задавать нужно только чтобы подменить каталог целиком |
-| `GRAPH_KEY_PATH` | Путь к `SPFxDeploy_key.pem` внутри контейнера |
+| `GRAPH_SCOPE` | OAuth-scope запрашиваемого токена. По умолчанию — App ID URI самого `api.tnsu.kz` (`api://9232d9e2-.../.default`), задавать не нужно. Токен для `https://graph.microsoft.com/.default` тут не подойдёт: `api.tnsu.kz` проверяет `aud` входящего JWT и отвечает 401 |
-| `GRAPH_SCOPE` | OAuth-scope запрашиваемого токена. **По умолчанию `https://graph.microsoft.com/.default` — для api.tnsu.kz это неверное значение.** Нужно явно указать App ID URI, под которым `api.tnsu.kz` зарегистрирован в Azure AD, например `api://<app-id-uri-api.tnsu.kz>/.default`. Точное значение уточнить у того, кто регистрировал API в Azure AD |
+| `PORT` | Порт HTTP-сервера сервиса, по умолчанию `3000` (локально — `3100`, см. `.env.example`) |
-| `PORT` | Порт HTTP-сервера сервиса, по умолчанию `3000` |
+
+## Локальный запуск
+
+Из корня репозитория `npm run dev` поднимает сервис вместе с фронтендом. Отдельно:
+
+```bash
+cp .env.example .env   # tenant/client id и порт
+npm run dev            # tsc + запуск с чтением .env (--env-file, Node 20+)
+```
+
+Сертификат и ключ при этом должны лежать в [`secrets/`](../secrets/README.md) —
+в git они не хранятся.
+
+Проверить, что авторизация работает: `curl http://localhost:3100/diag/token` →
+`{"ok":true}`. Если вернулась ошибка — в ней будет ответ Azure AD целиком.
 
 ## Как обратиться к api.tnsu.kz с авторизацией
 

server/package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "build": "tsc",
     "start": "node dist/index.js",
+    "dev": "tsc && node --env-file=.env dist/index.js",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

server/src/companies.ts

@@ -0,0 +1,52 @@
+import { getAppOnlyToken } from './graphAuth';
+
+const COMPANIES_URL = 'https://api.tnsu.kz/Dictionary/Companies';
+
+// Справочник компаний меняется редко (новое юрлицо в группе), но перезапуск
+// сервиса ради этого — лишнее, поэтому кэш с коротким временем жизни.
+const CACHE_TTL_MS = 10 * 60 * 1000;
+
+export interface ICompany {
+  Id: string;
+  Name: string;
+}
+
+let cached: { companies: ICompany[]; expiresAt: number } | null = null;
+
+export async function getCompanies(): Promise<ICompany[]> {
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.companies;
+  }
+
+  const token = await getAppOnlyToken();
+  const response = await fetch(COMPANIES_URL, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Не удалось получить справочник компаний: ${response.status} ${await response.text()}`
+    );
+  }
+
+  const companies = (await response.json()) as ICompany[];
+  cached = { companies, expiresAt: Date.now() + CACHE_TTL_MS };
+  return companies;
+}
+
+/**
+ * Колонка Company в списке текстовая и ждёт название, а форма присылает Id из
+ * справочника. Если Id неизвестен — возвращаем его как есть: потерять обращение
+ * из-за рассинхрона справочника хуже, чем записать в колонку сырой Id.
+ */
+export async function resolveCompanyName(id: string): Promise<string> {
+  const companies = await getCompanies();
+  const found = companies.find((company) => company.Id === id);
+
+  if (!found) {
+    console.warn(`Неизвестный Id компании из формы, пишу как есть: ${id}`);
+    return id;
+  }
+
+  return found.Name;
+}

server/src/config.ts

@@ -1,3 +1,5 @@
+import { join, resolve } from 'node:path';
+
 function requireEnv(name: string): string {
   const value = process.env[name];
   if (!value) {
@@ -6,11 +8,26 @@ function requireEnv(name: string): string {
   return value;
 }
 
+/**
+ * Каталог с сертификатом и приватным ключом приложения. Одна переменная на весь
+ * каталог, а не путь к каждому файлу: так его можно подменить централизованно —
+ * локально это `secrets/` в корне репозитория (в git не попадает), в контейнере
+ * SECRETS_DIR=/certs, куда смонтирован каталог с хоста (см. docker-compose.yml).
+ *
+ * __dirname здесь — server/dist, поэтому до корня репозитория два уровня вверх.
+ */
+const secretsDir = process.env.SECRETS_DIR ?? resolve(__dirname, '../../secrets');
+
 export const config = {
   tenantId: requireEnv('GRAPH_TENANT_ID'),
   clientId: requireEnv('GRAPH_CLIENT_ID'),
-  certPath: requireEnv('GRAPH_CERT_PATH'),
+  certPath: join(secretsDir, 'SPFxDeploy_cert.pem'),
-  keyPath: requireEnv('GRAPH_KEY_PATH'),
+  keyPath: join(secretsDir, 'SPFxDeploy_key.pem'),
-  scope: process.env.GRAPH_SCOPE ?? 'https://graph.microsoft.com/.default',
+  // Токен нужен не для Graph напрямую, а для api.tnsu.kz — он сам ходит в
-  port: Number(process.env.PORT ?? 3000)
+  // SharePoint. Это его App ID URI: с graph.microsoft.com/.default api вернёт
+  // 401, потому что проверяет aud во входящем JWT.
+  scope: process.env.GRAPH_SCOPE ?? 'api://9232d9e2-9807-4753-808f-07250e5474b0/.default',
+  port: Number(process.env.PORT ?? 3000),
+  sharepointSiteUrl: 'https://tnsukz.sharepoint.com/sites/hrm',
+  sharepointListName: 'Обращения'
 };

server/src/graphAuth.ts

@@ -21,9 +21,24 @@ const REFRESH_MARGIN_MS = 60_000;
 
 let cached: CachedToken | null = null;
 
+function readSecret(path: string): string {
+  try {
+    return readFileSync(path, 'utf8');
+  } catch (cause) {
+    // Самая частая причина на свежем клоне — файлов просто нет: в git они не
+    // хранятся. Ошибка ENOENT сама по себе не подсказывает, что делать.
+    throw new Error(
+      `Не удалось прочитать ${path}. Сертификат и ключ в git не хранятся — ` +
+        'положите их в каталог secrets/ (см. secrets/README.md) или укажите ' +
+        'другой каталог через SECRETS_DIR.',
+      { cause }
+    );
+  }
+}
+
 function buildClientAssertion(): string {
-  const certificatePem = readFileSync(config.certPath, 'utf8');
+  const certificatePem = readSecret(config.certPath);
-  const privateKey = readFileSync(config.keyPath, 'utf8');
+  const privateKey = readSecret(config.keyPath);
 
   // x5t — SHA-1 отпечаток DER-сертификата, base64url. По нему Azure AD находит
   // публичный ключ приложения и проверяет подпись JWT.

server/src/index.ts

@@ -1,8 +1,11 @@
 import express from 'express';
+import { getCompanies } from './companies';
 import { config } from './config';
 import { getAppOnlyToken } from './graphAuth';
+import { submitFeedback } from './sharepoint';
 
 const app = express();
+app.use(express.json());
 
 app.get('/healthz', (_req, res) => {
   res.status(200).send('ok');
@@ -20,6 +23,32 @@ app.get('/diag/token', async (_req, res) => {
   }
 });
 
+// Справочник компаний для выпадающего списка формы. Ходит в api.tnsu.kz за
+// нас, чтобы токен не утекал в браузер, и отдаёт список как есть.
+app.get('/companies', async (_req, res) => {
+  try {
+    res.status(200).json(await getCompanies());
+  } catch (error) {
+    const message = (error as Error).message;
+    console.error('Не удалось получить справочник компаний:', message);
+    res.status(502).json({ ok: false, error: message });
+  }
+});
+
+app.post('/feedback', async (req, res) => {
+  try {
+    await submitFeedback(req.body);
+    res.status(201).json({ ok: true });
+  } catch (error) {
+    const message = (error as Error).message;
+    // Логируем целиком в stdout прод-контейнера — если отвалится авторизация
+    // (протухший/незарегистрированный сертификат, неверный scope), это должно
+    // быть видно сразу в логах, а не тонуть в одной строке ответа клиенту.
+    console.error('Не удалось отправить обращение в SharePoint:', message);
+    res.status(502).json({ ok: false, error: message });
+  }
+});
+
 app.listen(config.port, () => {
   console.log(`hr-appeals-auth listening on :${config.port}`);
 });

server/src/sharepoint.ts

@@ -0,0 +1,77 @@
+import { resolveCompanyName } from './companies';
+import { config } from './config';
+import { getAppOnlyToken } from './graphAuth';
+
+const SHAREPOINT_API_URL = 'https://api.tnsu.kz/SharePoint/ListItem';
+
+export type AppealKind = 'complaint' | 'suggestion' | 'other';
+
+const KIND_LABELS: Record<AppealKind, string> = {
+  complaint: 'Обращение',
+  suggestion: 'Предложение',
+  other: 'Другое'
+};
+
+export interface IFeedbackSubmission {
+  company: string;
+  isAnonymous: boolean;
+  fullName: string;
+  position: string;
+  wantsFeedback: boolean;
+  kind: AppealKind;
+  kindOther: string;
+  situation: string;
+  suggestion: string;
+}
+
+// Имена полей — internal name столбцов списка SharePoint (Company/Name/Position/
+// Type/IssueDescription/SuggestionText/WantsFeedback), не отображаемые названия.
+async function buildFields(data: IFeedbackSubmission): Promise<Record<string, unknown>> {
+  const typeLabel = data.kind === 'other' ? data.kindOther : KIND_LABELS[data.kind];
+  const name = data.isAnonymous ? '' : data.fullName;
+
+  const fields: Record<string, unknown> = {
+    Title: name ? `${typeLabel} — ${name}` : typeLabel,
+    Company: await resolveCompanyName(data.company),
+    Name: name,
+    Position: data.isAnonymous ? '' : data.position,
+    Type: typeLabel,
+    IssueDescription: data.situation,
+    SuggestionText: data.suggestion,
+    WantsFeedback: data.wantsFeedback
+  };
+
+  // Состав полей зависит от вида обращения и анонимности, поэтому часть строк
+  // заведомо пустая (у предложения нет описания ситуации, у анонимного — ФИО).
+  // Такие поля не отправляем вовсе: пустая строка в списке выглядит как
+  // заполненное значение, а не как «поля не было». WantsFeedback при этом
+  // остаётся всегда — false здесь осмысленное значение, а не пустота.
+  return Object.fromEntries(
+    Object.entries(fields)
+      .map(([key, value]) => [key, typeof value === 'string' ? value.trim() : value])
+      .filter(([, value]) => value !== '')
+  );
+}
+
+export async function submitFeedback(data: IFeedbackSubmission): Promise<void> {
+  const token = await getAppOnlyToken();
+
+  const response = await fetch(SHAREPOINT_API_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`
+    },
+    body: JSON.stringify({
+      siteUrl: config.sharepointSiteUrl,
+      listName: config.sharepointListName,
+      fields: await buildFields(data)
+    })
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `api.tnsu.kz вернул ошибку при создании элемента списка: ${response.status} ${await response.text()}`
+    );
+  }
+}

src/features/feedback/model.test.ts

@@ -1,10 +1,10 @@
-import { COMPANY_OPTIONS, getAppealFieldsConfig } from './model';
+import { getAppealFieldsConfig } from './model';
 
 // Форма (AppealSection) и валидация (validateFeedback) читают одно и то же
 // правило из getAppealFieldsConfig — если оно разойдётся, форма и валидация
 // начнут спорить друг с другом. Эти тесты фиксируют контракт правила.
 describe('getAppealFieldsConfig', () => {
-  it('жалоба: описание обязательно, предложение показано, но необязательно', () => {
+  it('обращение: описание обязательно, предложение показано, но необязательно', () => {
     const fields = getAppealFieldsConfig('complaint');
     expect(fields.situation).toEqual({ visible: true, required: true });
     expect(fields.suggestion).toEqual({ visible: true, required: false });
@@ -32,18 +32,3 @@ describe('getAppealFieldsConfig', () => {
     });
   });
 });
-
-// Справочник компаний используется бэкендом по Id (см. комментарий в model.ts) —
-// дубликат Id незаметно перепутал бы два разных юрлица.
-describe('COMPANY_OPTIONS', () => {
-  it('не содержит повторяющихся Id', () => {
-    const ids = COMPANY_OPTIONS.map((option) => option.value);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it('у каждой компании есть непустое название', () => {
-    COMPANY_OPTIONS.forEach((option) => {
-      expect(option.label.trim().length).toBeGreaterThan(0);
-    });
-  });
-});

src/features/feedback/model.ts

@@ -18,32 +18,11 @@ export interface IFeedbackData {
   suggestion: string;
 }
 
-/**
- * Компании группы. В value — реальный Id из справочника, а не slug: именно его
- * ждёт бэкенд, когда появится отправка. Порядок как в источнике (по алфавиту).
- */
-export const COMPANY_OPTIONS: ISelectOption[] = [
-  { value: '8028abac-ac23-8fd8-11ef-cb57631a9ab0', label: 'ТОО AFL Engineering' },
-  { value: '9de064a4-44c8-88ef-11ec-831c058b1141', label: 'ТОО CL MANAGEMENT' },
-  { value: '9de064a4-44c8-88ef-11ec-8287fb7737a2', label: 'ТОО KazPromService' },
-  { value: 'ec3c78a7-29ef-4725-11ed-a6d8fcd0911d', label: 'ТОО QAZGEOMAX' },
-  { value: '15009595-005d-00fa-11ef-11309f5e395d', label: 'ТОО Selin Invest' },
-  { value: '03f4deac-f543-e8cf-11f1-84eb25329fc3', label: 'ТОО Selin Studio' },
-  { value: '9de064a4-44c8-88ef-11ec-8284930fad96', label: 'ТОО TANSU Construction' },
-  { value: '9de064a4-44c8-88ef-11ec-8285925d83d2', label: 'ТОО АСТЕЛ-К' },
-  { value: '15009595-005d-00fa-11ef-0b8bb5ec1a88', label: 'ТОО ГеоТрек' },
-  { value: '15009595-005d-00fa-11ef-0b8714483372', label: 'ТОО Монтажник-Т' },
-  { value: '8028beac-ac23-8fd8-11f0-5351706e5996', label: 'ТОО ОСН Беркут' },
-  { value: '8028b0ac-ac23-8fd8-11ef-dcdb24b82e02', label: 'ТОО СТ Global' },
-  { value: '15009595-005d-00fa-11ef-1131801d9f3e', label: 'ТОО ТехЛаб' },
-  { value: '03f4deac-f543-e8cf-11f1-84f51483f59e', label: 'Частная компания Seline Holding Ltd' }
-];
-
 // Порядок как в исходной форме: «Предложение» первым — совпадает с дефолтным
 // значением ниже (EMPTY_FEEDBACK.kind), так что выбор пользователя.
 export const KIND_OPTIONS: ISelectOption[] = [
   { value: 'suggestion', label: 'Предложение' },
-  { value: 'complaint', label: 'Жалоба' },
+  { value: 'complaint', label: 'Обращение' },
   { value: 'other', label: 'Другое' }
 ];
 
@@ -61,7 +40,7 @@ export interface IAppealFieldsConfig {
 
 /**
  * Состав полей зависит от вида обращения:
- *   жалоба      — обязательно описание, а предложение — на желание автора;
+ *   обращение   — обязательно описание, а предложение — на желание автора;
  *   предложение — только само предложение, «ситуации» ещё нет;
  *   другое      — свободное описание, без предложения.
  * Одно правило на форму и на валидацию, чтобы они не разошлись.

src/features/feedback/sections/AuthorSection.tsx

@@ -1,24 +1,33 @@
 import { FormGrid, Select, TextInput, Toggle } from '@tnsu/ui-kit';
 import { Field } from '../../../components/Field/Field';
-import { COMPANY_OPTIONS } from '../model';
 import { TEXTS } from '../texts';
+import { useCompanies } from '../useCompanies';
 import type { ISectionProps } from './ISectionProps';
 
 /** Кто обращается: компания, анонимность, ФИО и должность. */
-export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) => (
+export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) => {
+  const companies = useCompanies();
+
+  return (
   <FormGrid>
+    {/* Ошибку справочника показываем в слоте ошибки поля: без списка компанию
+        не выбрать, а обязательное поле молча пустым оставлять нельзя. */}
     <Field
       label={TEXTS.labels.company}
       htmlFor="company"
       required
-      error={errors.company}
+      error={companies.error ? TEXTS.errors.companiesFailed : errors.company}
     >
       <Select
         id="company"
         value={data.company}
         onChange={(v) => set('company', v)}
-        options={COMPANY_OPTIONS}
+        options={companies.options}
-        placeholder={TEXTS.placeholders.company}
+        placeholder={
+          companies.isLoading
+            ? TEXTS.placeholders.companyLoading
+            : TEXTS.placeholders.company
+        }
       />
     </Field>
 
@@ -59,4 +68,5 @@ export const AuthorSection: React.FC<ISectionProps> = ({ data, errors, set }) =>
       </>
     ) : null}
   </FormGrid>
-);
+  );
+};

src/features/feedback/texts.ts

@@ -28,7 +28,8 @@ export const TEXTS = {
 
   placeholders: {
     company: 'Выберите компанию',
-    fullName: 'Иванов Иван Иванович',
+    companyLoading: 'Загружаем список компаний…',
+    fullName: 'Нурлан Нурланович Нурланов',
     position: 'Например: инженер-проектировщик',
     kindOther: 'Свой вариант',
     situation: 'Опишите, что произошло: когда, где, кто участвовал',
@@ -46,7 +47,9 @@ export const TEXTS = {
     required: 'Заполните поле',
     selectRequired: 'Выберите значение',
     tooShort: 'Слишком короткий ответ — опишите подробнее',
-    hasErrors: 'Проверьте выделенные поля — что-то заполнено не полностью.'
+    hasErrors: 'Проверьте выделенные поля — что-то заполнено не полностью.',
+    submitFailed: 'Не удалось отправить обращение. Попробуйте ещё раз позже.',
+    companiesFailed: 'Не удалось загрузить список компаний. Обновите страницу.'
   },
 
   thanks: {

src/features/feedback/useCompanies.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import type { ISelectOption } from '@tnsu/ui-kit';
+
+interface ICompanyDto {
+  Id: string;
+  Name: string;
+}
+
+export interface ICompaniesState {
+  options: ISelectOption[];
+  isLoading: boolean;
+  /** Непустая строка — справочник не загрузился, выбрать компанию нельзя. */
+  error: string;
+}
+
+/**
+ * Справочник компаний приходит из api.tnsu.kz через наш сервис (/api/companies),
+ * а не лежит в коде: список юрлиц группы меняется без нашего участия, а копия в
+ * репозитории неизбежно разошлась бы с источником.
+ */
+export function useCompanies(): ICompaniesState {
+  const [options, setOptions] = useState<ISelectOption[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    // Форма живёт до перезагрузки страницы, но размонтирование в dev-режиме
+    // (StrictMode, hot reload) случается — не даём setState после него.
+    let cancelled = false;
+
+    fetch('/api/companies')
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Сервер вернул ${response.status}`);
+        }
+        return (await response.json()) as ICompanyDto[];
+      })
+      .then((companies) => {
+        if (cancelled) return;
+        setOptions(companies.map(({ Id, Name }) => ({ value: Id, label: Name })));
+        setIsLoading(false);
+      })
+      .catch((cause) => {
+        if (cancelled) return;
+        // eslint-disable-next-line no-console
+        console.error('Не удалось загрузить справочник компаний:', cause);
+        setError(String(cause));
+        setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { options, isLoading, error };
+}

src/features/feedback/useFeedbackForm.ts

@@ -18,8 +18,8 @@ export interface IFeedbackForm {
 
 /**
  * Состояние формы обращения: данные, валидация, отправка.
- * Бэкенда пока нет — submit только имитирует отправку (см. TODO ниже),
+ * Отправка идёт через nginx (/api/... -> hr-appeals-auth) — сервис сам
- * поэтому вся логика синхронная и живёт здесь, без сервисного слоя.
+ * меняет её на app-only токен и создаёт элемент в списке SharePoint.
  */
 export function useFeedbackForm(): IFeedbackForm {
   const [data, setData] = useState<IFeedbackData>(EMPTY_FEEDBACK);
@@ -53,11 +53,24 @@ export function useFeedbackForm(): IFeedbackForm {
     setFormError('');
     setStatus('submitting');
 
-    // TODO: заменить на реальную отправку, когда определимся с бэкендом.
+    fetch('/api/feedback', {
-    // Сейчас это заглушка по договорённости: делаем только UI.
+      method: 'POST',
-    // eslint-disable-next-line no-console
+      headers: { 'Content-Type': 'application/json' },
-    console.info('Обращение (заглушка отправки):', data);
+      body: JSON.stringify(data)
-    setStatus('done');
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          const body = await response.json().catch(() => null);
+          throw new Error(body?.error ?? `Сервер вернул ${response.status}`);
+        }
+        setStatus('done');
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Не удалось отправить обращение:', error);
+        setFormError(TEXTS.errors.submitFailed);
+        setStatus('idle');
+      });
   }, [data]);
 
   const reset = useCallback((): void => {

src/features/feedback/validateFeedback.test.ts

@@ -6,7 +6,7 @@ const VALID_COMPANY = '9de064a4-44c8-88ef-11ec-8285925d83d2';
 const LONG_TEXT = 'Развёрнутое описание, которого достаточно для проверки правила';
 const SHORT_TEXT = 'коротко';
 
-/** Полностью заполненное «жалоба»-обращение — стартовая точка для тестов. */
+/** Полностью заполненное обращение — стартовая точка для тестов. */
 function buildValidComplaint(overrides: Partial<IFeedbackData> = {}): IFeedbackData {
   return {
     ...EMPTY_FEEDBACK,
@@ -61,17 +61,17 @@ describe('validateFeedback: вид обращения "Другое"', () => {
 // Состав обязательных полей зависит от вида обращения (см. getAppealFieldsConfig
 // в model.ts) — эти тесты фиксируют контракт, чтобы форма и валидация не разошлись.
 describe('validateFeedback: обязательность полей по видам обращения', () => {
-  it('жалоба: описание ситуации обязательно', () => {
+  it('обращение: описание ситуации обязательно', () => {
     const errors = validateFeedback(buildValidComplaint({ situation: '' }));
     expect(errors.situation).toBeDefined();
   });
 
-  it('жалоба: предложение по улучшению НЕ обязательно', () => {
+  it('обращение: предложение по улучшению НЕ обязательно', () => {
     const errors = validateFeedback(buildValidComplaint({ suggestion: '' }));
     expect(errors.suggestion).toBeUndefined();
   });
 
-  it('жалоба: если предложение всё же указано, но слишком коротко — ошибка', () => {
+  it('обращение: если предложение всё же указано, но слишком коротко — ошибка', () => {
     const errors = validateFeedback(buildValidComplaint({ suggestion: SHORT_TEXT }));
     expect(errors.suggestion).toBeDefined();
   });

vite.config.ts

@@ -12,7 +12,16 @@ export default defineConfig({
   },
   server: {
     port: 3000,
-    open: true
+    open: true,
+    // Как nginx в проде (nginx.conf): /api/... идёт на hr-appeals-auth без
+    // префикса. Локально сервис запускаем на 3100 — порт 3000 занят самим vite.
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3100',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   },
   test: {
     // globals: true — describe/it/expect доступны без импорта, как привычно по Jest.