раздел «Отчёты» в боковом меню — скачивание отчёта по вакансиям (#17)

Пункт меню виден только заданному списку почт (Тришина, Городецкий,
Горбенко) — группы HR в SharePoint пока нет, добавили TODO завести
проверку по ней отдельно (reportsAccess.ts). Скрыт из меню совсем, а
не показан неактивным, и прямой переход по ?rpnav=reports у остальных
редиректит на «Новую заявку».

Раздел — форма периода (С/По) и кнопка «Скачать xlsx», дергает
GET api/reports/vacancies через тот же AadHttpClient, что и остальные
вызовы approval-route API. Имя файла собирается на фронте по формату
бэкенда (VacancyReportWorkbook.FileName), а не читается из
Content-Disposition — approval-route не объявляет заголовок в
Access-Control-Expose-Headers, браузер бы его не отдал.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

---------

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/17

src/webparts/requestPortal/components/RequestPortal.tsx

@@ -36,6 +36,8 @@ import { SearchView } from '../features/myRequests/SearchView';
 import { getNavCounts, INavCounts } from '../features/myRequests/myRequests.service';
 import { IMyRequest } from '../features/myRequests/models/IMyRequest';
 import { isEditableStatus } from '../shared/approval';
+import { hasReportsAccess } from '../shared/reports/reportsAccess';
+import { ReportsFeature } from '../features/reports/ReportsFeature';
 
 // Оболочка портала: тёмное боковое меню (разделы) + основная область.
 // Логики фич тут нет — файл общий, меняется редко.
@@ -70,6 +72,22 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
   const [mobileNavOpen, setMobileNavOpen] = React.useState<boolean>(false);
   const [navCounts, setNavCounts] = React.useState<INavCounts | undefined>(undefined);
 
+  // Раздел «Отчёты» — точечный список почт, пока в SharePoint нет группы HR
+  // (см. reportsAccess.ts). Пересчитывается на каждый рендер намеренно: сам
+  // hasReportsAccess — синхронная проверка без сети, а input (effectiveUserEmail)
+  // меняется только по подмене личности в property pane, что и так вызывает
+  // ререндер всей веб-части.
+  const canSeeReports = hasReportsAccess(context);
+
+  // Прямой переход по ссылке (?rpnav=reports) в обход бокового меню — тот же
+  // раздел, что скрыт из навигации, должен быть недоступен и так: без этого
+  // редиректа он открылся бы у любого, кто угадает или сохранит такую ссылку.
+  React.useEffect(() => {
+    if (route.nav === 'reports' && !canSeeReports) {
+      navigate({ mode: 'submit', nav: 'new' }, { replace: true });
+    }
+  }, [route.nav, canSeeReports]);
+
   // Уникальный код заявки для заголовка Drawer (approve/edit) — сама форма
   // узнаёт его только после загрузки (см. onCodeLoaded в ApproveFeature/
   // EditFeature), поэтому не берём route.itemId (это RowID в SharePoint, а не
@@ -278,6 +296,8 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
   };
 
   // Разделы бокового меню для пакетного Sidebar (счётчики — из navCounts).
+  // «Отчёты» — только у тех, кому разрешено (см. canSeeReports выше): скрыт из
+  // меню совсем, а не показан неактивным, — раздела для остальных как бы не существует.
   const navItems: ISidebarItem[] = [
     { id: 'new', title: 'Новая заявка', icon: 'plus' },
     { id: 'approvals', title: 'На согласовании', icon: 'user-check', count: navCounts?.approvals },
@@ -285,6 +305,7 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
     { id: 'rework', title: 'Доработка', icon: 'edit', count: navCounts?.rework },
     { id: 'own', title: 'Мои заявки', icon: 'clipboard' },
     { id: 'search', title: 'Поиск', icon: 'search' },
+    ...(canSeeReports ? [{ id: 'reports', title: 'Отчёты', icon: 'chart' } as ISidebarItem] : []),
   ];
 
   return (
@@ -375,6 +396,8 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
             <OwnTabs activeId={route.ownTab ?? 'created'} onChange={gotoOwnTab} />
           )}
 
+          {route.nav === 'reports' && canSeeReports && <ReportsFeature context={context} />}
+
           {LIST_VIEWS[route.nav] !== undefined && (
             <RequestsTableView
               context={context}

src/webparts/requestPortal/features/reports/ReportsFeature.module.scss

@@ -0,0 +1,19 @@
+@import '../../../../styles/design-tokens';
+
+.view {
+  width: 100%;
+  max-width: 480px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: $sp-3;
+  margin-top: $sp-4;
+}
+
+.hint {
+  margin-top: $sp-2;
+  font-size: $fs-sm;
+  color: $gray-500;
+}

src/webparts/requestPortal/features/reports/ReportsFeature.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { WebPartContext } from '@microsoft/sp-webpart-base';
+import { Alert, Button, FormCard, FormField, FormGrid, Icon, TextInput } from '@tnsu/ui-kit';
+import { downloadVacancyReport } from '../../shared/reports/reports.service';
+import styles from './ReportsFeature.module.scss';
+
+// Раздел «Отчёты» — пока один отчёт (по вакансиям), поэтому без списка
+// карточек: сразу форма периода + кнопка. Появится второй отчёт — тут
+// понадобится список/переключатель, но городить его заранее незачем.
+
+function todayIso(): string {
+  const now = new Date();
+  const mm = `${now.getMonth() + 1}`.padStart(2, '0');
+  const dd = `${now.getDate()}`.padStart(2, '0');
+  return `${now.getFullYear()}-${mm}-${dd}`;
+}
+
+/** Первое число текущего месяца — разумный дефолт периода отчёта. */
+function firstDayOfMonthIso(): string {
+  const now = new Date();
+  const mm = `${now.getMonth() + 1}`.padStart(2, '0');
+  return `${now.getFullYear()}-${mm}-01`;
+}
+
+export interface IReportsFeatureProps {
+  context: WebPartContext;
+}
+
+export const ReportsFeature: React.FC<IReportsFeatureProps> = ({ context }) => {
+  const today = todayIso();
+  const [from, setFrom] = React.useState<string>(firstDayOfMonthIso());
+  const [to, setTo] = React.useState<string>(today);
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string>('');
+
+  const periodInvalid = !!from && !!to && from > to;
+
+  const download = (): void => {
+    if (!from || !to || periodInvalid) return;
+
+    setLoading(true);
+    setError('');
+    downloadVacancyReport(context, from, to)
+      .catch((e: Error) => setError(e.message || 'Не удалось сформировать отчёт'))
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <div className={styles.view}>
+      <FormCard title="Отчёт по вакансиям" subtitle="Заявки на подбор и на приём за выбранный период">
+        <FormGrid>
+          <FormField label="С" htmlFor="reportFrom" required>
+            <TextInput id="reportFrom" type="date" value={from} onChange={setFrom} max={to || undefined} />
+          </FormField>
+          <FormField label="По" htmlFor="reportTo" required>
+            <TextInput id="reportTo" type="date" value={to} onChange={setTo} min={from || undefined} max={today} />
+          </FormField>
+        </FormGrid>
+
+        {periodInvalid && <Alert variant="warn">Конец периода раньше его начала.</Alert>}
+        {error && <Alert variant="err">{error}</Alert>}
+
+        <div className={styles.actions}>
+          <Button
+            variant="accent"
+            onClick={download}
+            disabled={loading || !from || !to || periodInvalid}
+          >
+            <Icon name="download" size="sm" /> {loading ? 'Формируется…' : 'Скачать xlsx'}
+          </Button>
+        </div>
+
+        <p className={styles.hint}>
+          Период отбирает заявки по дате подачи заявки на подбор. Заявки на приём в отчёт
+          попадают независимо от периода — по факту закрытия вакансии.
+        </p>
+      </FormCard>
+    </div>
+  );
+};

src/webparts/requestPortal/forms/RecruitingHire/RecruitingHireForm.tsx

@@ -185,7 +185,7 @@ const RecruitingHireForm: React.FC<IRequestFormProps> = ({
     (login) => approval.getJobTitle(login)
   );
 
-  const isValid = data.CandidateName.trim().length > 0 && data.Position.trim().length > 0;
+  const isValid = data.HireCandidateName.trim().length > 0 && data.Position.trim().length > 0;
   const validate = (): string | undefined => {
     if (!isValid) return 'Заполните обязательные поля: Ф.И.О. кандидата, Должность.';
     if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`;

src/webparts/requestPortal/forms/RecruitingHire/load.ts

@@ -16,8 +16,8 @@ function parseJsonArray<T>(raw: unknown): T[] {
 
 // Скалярные поля (текст/выбор/число/дата) — читаем как есть, приводим к строке.
 const SCALAR_FIELDS: (keyof IFormData)[] = [
-  'Phone', 'HireType', 'ReplacedEmployee', 'Project', 'ProjectId', 'ProjectCode',
-  'CandidateName', 'HireDate', 'Position', 'WorkKind',
+  'Phone', 'HireType', 'HireReplacedEmployee', 'Project', 'ProjectId', 'ProjectCode',
+  'HireCandidateName', 'HireHireDate', 'Position', 'WorkKind',
   'Department', 'DepartmentId', 'SiteLocation', 'PpeHeight', 'PpeClothingSize', 'PpeShoeSize', 'ProbationPeriod',
   'SalaryProbation', 'SalaryAfterProbation', 'WorkSchedule', 'WorkScheduleOther',
   'AgencyName', 'AgencyTerms',
@@ -58,7 +58,7 @@ export async function loadHireRequest(itemId: number, listId?: string): Promise<
     const value = item[key];
     if (value === null || value === undefined) {
       writable[key] = '';
-    } else if (key === 'HireDate' && typeof value === 'string') {
+    } else if (key === 'HireHireDate' && typeof value === 'string') {
       writable[key] = value.slice(0, 10); // ISO → YYYY-MM-DD для input type=date
     } else {
       writable[key] = String(value);

src/webparts/requestPortal/forms/RecruitingHire/model.ts

@@ -18,7 +18,16 @@ export interface IFormData {
   Companies: ICompany[]; // мультивыбор компаний (справочник), хранится CompaniesJson
   Phone: string;
   HireType: string;
-  ReplacedEmployee: string;
+  /**
+   * Префикс Hire — обход коллизии managed properties: этот internalName
+   * (без префикса) используется и в форме «Реферальная программа» —
+   * ДРУГИМ полем с ДРУГИМ Id. Search индексировал managed property только у
+   * одного из двух списков сайта (см. sp-write props/field в tools; тот же
+   * приём, что VacancyOpenReason в RecruitingSelection). CandidateName и
+   * HireDate ниже переименованы по той же причине; ReferralForm НЕ трогать —
+   * там имя осталось прежним.
+   */
+  HireReplacedEmployee: string;
   // Проект/объект (справочник /Project) — справочное поле, на маршрут
   // согласования НЕ влияет (в отличие от RecruitingSelection/TmcTransfer).
   Project: string;
@@ -30,8 +39,8 @@ export interface IFormData {
   SelectionRequestListId: string; // url партиции заявки на подбор (→ rplist)
   SelectionRequestCode: string; // уникальный код для подписи/ссылки
   // Кандидат
-  CandidateName: string;
-  HireDate: string;
+  HireCandidateName: string;
+  HireHireDate: string;
   Position: string;
   WorkKind: string;
   /**
@@ -75,15 +84,15 @@ export const EMPTY_DATA: IFormData = {
   Companies: [],
   Phone: '',
   HireType: '',
-  ReplacedEmployee: '',
+  HireReplacedEmployee: '',
   Project: '',
   ProjectId: '',
   ProjectCode: '',
   SelectionRequestId: '',
   SelectionRequestListId: '',
   SelectionRequestCode: '',
-  CandidateName: '',
-  HireDate: '',
+  HireCandidateName: '',
+  HireHireDate: '',
   Position: '',
   WorkKind: '',
   Department: '',

src/webparts/requestPortal/forms/RecruitingHire/provisioning.json

@@ -8,7 +8,7 @@
 
     { "internalName": "Phone", "title": "Телефон", "type": "Text" },
     { "internalName": "HireType", "title": "Тип приёма", "type": "Choice", "choices": ["Новый сотрудник", "Вместо уволенного"] },
-    { "internalName": "ReplacedEmployee", "title": "Взамен кого (Ф.И.О. уволенного)", "type": "Text" },
+    { "internalName": "HireReplacedEmployee", "title": "Взамен кого (Ф.И.О. уволенного)", "type": "Text" },
 
     { "internalName": "Project", "title": "Проект", "type": "Text" },
     { "internalName": "ProjectId", "title": "Проект — Id", "type": "Text" },
@@ -18,8 +18,8 @@
     { "internalName": "SelectionRequestListId", "title": "Заявка на подбор — партиция (listId)", "type": "Text" },
     { "internalName": "SelectionRequestCode", "title": "Заявка на подбор — код", "type": "Text" },
 
-    { "internalName": "CandidateName", "title": "Ф.И.О. кандидата", "type": "Text", "required": true },
-    { "internalName": "HireDate", "title": "Дата приёма", "type": "DateTime", "dateOnly": true },
+    { "internalName": "HireCandidateName", "title": "Ф.И.О. кандидата", "type": "Text", "required": true },
+    { "internalName": "HireHireDate", "title": "Дата приёма", "type": "DateTime", "dateOnly": true },
     { "internalName": "Position", "title": "Должность", "type": "Text", "required": true },
     { "internalName": "WorkKind", "title": "Вид работ", "type": "Text" },
     { "internalName": "SiteName", "title": "Отдел / участок (устарело)", "type": "Text" },

src/webparts/requestPortal/forms/RecruitingHire/sections/ApplicationSection.tsx

@@ -10,7 +10,7 @@ export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context
   const handleHireTypeChange = (value: string): void => {
     set('HireType', value);
     if (value !== HIRE_TYPE_REPLACEMENT) {
-      set('ReplacedEmployee', ''); // при не-замене очищаем скрытое поле
+      set('HireReplacedEmployee', ''); // при не-замене очищаем скрытое поле
     }
   };
 
@@ -54,11 +54,11 @@ export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context
         />
       </FormField>
       {isReplacement && (
-        <FormField label="Взамен кого (Ф.И.О. уволенного)" htmlFor="ReplacedEmployee" full>
+        <FormField label="Взамен кого (Ф.И.О. уволенного)" htmlFor="HireReplacedEmployee" full>
           <TextInput
-            id="ReplacedEmployee"
-            value={data.ReplacedEmployee}
-            onChange={(v) => set('ReplacedEmployee', v)}
+            id="HireReplacedEmployee"
+            value={data.HireReplacedEmployee}
+            onChange={(v) => set('HireReplacedEmployee', v)}
           />
         </FormField>
       )}

src/webparts/requestPortal/forms/RecruitingHire/sections/CandidateSection.tsx

@@ -5,11 +5,11 @@ import { ISectionProps } from '../model';
 
 export const CandidateSection: React.FC<ISectionProps> = ({ data, set, context }) => (
   <CollapseSection title="Кандидат" icon="people">
-    <FormField label="Ф.И.О. кандидата" htmlFor="CandidateName" required full>
-      <TextInput id="CandidateName" value={data.CandidateName} onChange={(v) => set('CandidateName', v)} />
+    <FormField label="Ф.И.О. кандидата" htmlFor="HireCandidateName" required full>
+      <TextInput id="HireCandidateName" value={data.HireCandidateName} onChange={(v) => set('HireCandidateName', v)} />
     </FormField>
-    <FormField label="Дата приёма" htmlFor="HireDate">
-      <TextInput id="HireDate" type="date" value={data.HireDate} onChange={(v) => set('HireDate', v)} />
+    <FormField label="Дата приёма" htmlFor="HireHireDate">
+      <TextInput id="HireHireDate" type="date" value={data.HireHireDate} onChange={(v) => set('HireHireDate', v)} />
     </FormField>
     <FormField label="Должность" htmlFor="Position" required>
       <TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />

src/webparts/requestPortal/forms/RecruitingHire/submit.ts

@@ -16,7 +16,7 @@ export function hireApprovalService(listId?: string): ApprovalListService {
 
 /** Осмысленный заголовок элемента списка (системная колонка Title). */
 function buildTitle(data: IFormData): string {
-  return ['Прием', data.CandidateName, data.Position].filter(Boolean).join(' — ');
+  return ['Прием', data.HireCandidateName, data.Position].filter(Boolean).join(' — ');
 }
 
 /** Поля элемента списка данных из модели формы (текст/выбор/даты/числа). */

src/webparts/requestPortal/forms/RecruitingSelection/model.ts

@@ -18,8 +18,15 @@ export interface IFormData {
   Responsible: string;
   SubmitDate: string;
   ClosingDeadline: string;
-  OpenReason: string;
-  OpenReasonDetails: string;
+  /**
+   * Префикс Vacancy — не для читаемости, а обход коллизии managed properties:
+   * колонка называлась просто OpenReason, и Search индексировал её только у
+   * ОДНОГО из списков сайта с таким internal name (см. sp-write props/field в
+   * tools). Переименовали и перенесли данные скриптом (2026-08-29) — трогать
+   * имя обратно нельзя, коллизия вернётся.
+   */
+  VacancyOpenReason: string;
+  VacancyOpenReasonDetails: string;
   Companies: ICompany[];
   ObjectProject: string;
   ObjectProjectId: string;
@@ -92,8 +99,8 @@ export const EMPTY_DATA: IFormData = {
   Responsible: '',
   SubmitDate: '',
   ClosingDeadline: '',
-  OpenReason: '',
-  OpenReasonDetails: '',
+  VacancyOpenReason: '',
+  VacancyOpenReasonDetails: '',
   Companies: [],
   ObjectProject: '',
   ObjectProjectId: '',
@@ -149,7 +156,7 @@ export const OPEN_REASON_REPLACE = 'Замена уволенного сотру
 export const OPEN_REASON_TRANSFER = 'Перевод сотрудника';
 export const OPEN_REASON_NEW = 'Новая штатная единица';
 
-/** Варианты «Причина открытия вакансии» — совпадают с choices колонки OpenReason. */
+/** Варианты «Причина открытия вакансии» — совпадают с choices колонки VacancyOpenReason. */
 export const OPEN_REASON_OPTIONS: ISelectOption[] = [
   { value: OPEN_REASON_REPLACE, label: OPEN_REASON_REPLACE },
   { value: OPEN_REASON_TRANSFER, label: OPEN_REASON_TRANSFER },

src/webparts/requestPortal/forms/RecruitingSelection/provisioning.json

@@ -5,8 +5,8 @@
     { "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
     { "internalName": "Responsible", "title": "Ответственный за подачу заявки", "type": "User", "userSelectionMode": "PeopleOnly", "required": true },
     { "internalName": "SubmitDate", "title": "Дата подачи заявки", "type": "DateTime", "dateOnly": true },
-    { "internalName": "OpenReason", "title": "Причина открытия вакансии", "type": "Choice", "choices": ["Замена уволенного сотрудника", "Перевод сотрудника", "Новая штатная единица", "Другое"] },
-    { "internalName": "OpenReasonDetails", "title": "Причина открытия — ФИО / уточнение", "type": "Text" },
+    { "internalName": "VacancyOpenReason", "title": "Причина открытия вакансии", "type": "Choice", "choices": ["Замена уволенного сотрудника", "Перевод сотрудника", "Новая штатная единица", "Другое"] },
+    { "internalName": "VacancyOpenReasonDetails", "title": "Причина открытия — ФИО / уточнение", "type": "Text" },
     { "internalName": "CompaniesJson", "title": "Компании (JSON)", "type": "Note" },
     { "internalName": "ObjectProject", "title": "Объект/Проект", "type": "Text" },
     { "internalName": "ObjectProjectId", "title": "Объект/Проект — Id", "type": "Text" },

src/webparts/requestPortal/forms/RecruitingSelection/sections/ApplicationSection.tsx

@@ -11,7 +11,7 @@ import {
 } from '../model';
 
 export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context, onResponsibleChange }) => {
-  const reason = data.OpenReason;
+  const reason = data.VacancyOpenReason;
   const showReasonDetails = reason !== '' && reason !== OPEN_REASON_NEW;
   const reasonDetailsLabel =
     reason === OPEN_REASON_REPLACE || reason === OPEN_REASON_TRANSFER ? 'ФИО сотрудника' : 'Уточните причину';
@@ -45,24 +45,24 @@ export const ApplicationSection: React.FC<ISectionProps> = ({ data, set, context
           onChange={(v) => set('ClosingDeadline', v)}
         />
       </FormField>
-      <FormField label="1.5 Причина открытия вакансии" htmlFor="OpenReason">
+      <FormField label="1.5 Причина открытия вакансии" htmlFor="VacancyOpenReason">
         <Select
-          id="OpenReason"
-          value={data.OpenReason}
+          id="VacancyOpenReason"
+          value={data.VacancyOpenReason}
           onChange={(v) => {
-            set('OpenReason', v);
-            if (v === '' || v === OPEN_REASON_NEW) set('OpenReasonDetails', '');
+            set('VacancyOpenReason', v);
+            if (v === '' || v === OPEN_REASON_NEW) set('VacancyOpenReasonDetails', '');
           }}
           options={OPEN_REASON_OPTIONS}
           placeholder="— выберите —"
         />
       </FormField>
       {showReasonDetails && (
-        <FormField label={reasonDetailsLabel} htmlFor="OpenReasonDetails">
+        <FormField label={reasonDetailsLabel} htmlFor="VacancyOpenReasonDetails">
           <TextInput
-            id="OpenReasonDetails"
-            value={data.OpenReasonDetails}
-            onChange={(v) => set('OpenReasonDetails', v)}
+            id="VacancyOpenReasonDetails"
+            value={data.VacancyOpenReasonDetails}
+            onChange={(v) => set('VacancyOpenReasonDetails', v)}
           />
         </FormField>
       )}

src/webparts/requestPortal/forms/WorkplaceSetup/prefill.ts

@@ -9,12 +9,12 @@ export async function loadPrefillFromHire(hireId: number): Promise<IFormData> {
   const { data: hire } = await loadHireRequest(hireId);
   return {
     ...EMPTY_DATA,
-    FullName: hire.CandidateName,
+    FullName: hire.HireCandidateName,
     Phone: hire.Phone,
     Position: hire.Position,
     Department: hire.Department,
     WorkKind: hire.WorkKind,
     Location: hire.SiteLocation,
-    StartDate: hire.HireDate
+    StartDate: hire.HireHireDate
   };
 }

src/webparts/requestPortal/shared/reports/reports.service.ts

@@ -0,0 +1,69 @@
+import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { APPROVAL_API_CLIENT_ID, getApprovalApiBaseUrl } from '../config';
+
+// Обращения к api/reports approval-route API — по тому же принципу, что и
+// approvalRoute.service.ts (AadHttpClient, SSO текущего пользователя), но
+// ответ — не JSON, а сам файл (см. ReportsController.Vacancies).
+
+/** Отчёт по вакансиям за период: даты YYYY-MM-DD (как в TextInput type="date"). */
+export async function downloadVacancyReport(
+  context: WebPartContext,
+  from: string,
+  to: string
+): Promise<void> {
+  const client = await context.aadHttpClientFactory.getClient(APPROVAL_API_CLIENT_ID);
+  const url = `${getApprovalApiBaseUrl()}/api/reports/vacancies?from=${from}&to=${to}`;
+  const response: HttpClientResponse = await client.get(url, AadHttpClient.configurations.v1);
+
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response));
+  }
+
+  const blob = await response.blob();
+  // Имя файла собираем сами, а не читаем Content-Disposition: approval-route
+  // не объявляет его в Access-Control-Expose-Headers (см. Program.cs, CORS),
+  // и без этого браузер отдал бы fetch-у пустой заголовок. Формат — тот же,
+  // что и в VacancyReportWorkbook.FileName на бэкенде.
+  saveBlob(blob, vacancyReportFileName(from, to));
+}
+
+/** «Отчет по вакансиям dd.MM.yyyy-dd.MM.yyyy.xlsx» — как в VacancyReportWorkbook.FileName. */
+function vacancyReportFileName(from: string, to: string): string {
+  return `Отчет по вакансиям ${formatRu(from)}-${formatRu(to)}.xlsx`;
+}
+
+function formatRu(isoDate: string): string {
+  const [year, month, day] = isoDate.split('-');
+  return `${day}.${month}.${year}`;
+}
+
+/**
+ * 400 от ReportsController приходит как { errors: string[] } (см.
+ * VacancyReportService.GetAsync — например «конец периода раньше начала»);
+ * остальные статусы — обычный текст/пусто.
+ */
+async function extractErrorMessage(response: HttpClientResponse): Promise<string> {
+  const text = await response.text().catch(() => '');
+  try {
+    const parsed: { errors?: string[] } = JSON.parse(text);
+    if (parsed.errors && parsed.errors.length > 0) return parsed.errors.join('; ');
+  } catch {
+    // Не JSON — используем как есть.
+  }
+  return text || `${response.status} ${response.statusText}`;
+}
+
+/** Отдать Blob пользователю как скачивание файла — через временную ссылку. */
+function saveBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  // Отложенный revoke — на некоторых браузерах немедленный обрывает скачивание,
+  // начатое кликом синхронно перед этим.
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

src/webparts/requestPortal/shared/reports/reportsAccess.ts

@@ -0,0 +1,33 @@
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+import { effectiveUserEmail } from '../impersonation';
+
+/**
+ * Кто видит раздел «Отчёты» в боковом меню. Пока это фиксированный список
+ * почт — группы HR в SharePoint ещё нет (её заведут отдельно); появится —
+ * список ниже заменится на реальную проверку членства (см. TODO).
+ *
+ * Email — из справочника сотрудников (api.tnsu.kz/Employee/All), а не из
+ * Title сайта: у части учёток встречаются устаревшие site user записи со
+ * старым email (пример — Тришина: m.trishina@tnsu.kz как устаревший алиас
+ * рядом с текущим trishina.mariya@tnsu.kz).
+ */
+const ALLOWED_EMAILS: ReadonlySet<string> = new Set([
+  'trishina.mariya@tnsu.kz', // Мария Тришина
+  'gorodetskiy.timur@tnsu.kz', // Тимур Городецкий
+  'gorbenko.pavel@tnsu.kz', // Павел Горбенко
+]);
+
+// TODO: заменить точечный список на членство в SharePoint-группе HR, когда
+// её заведут — тогда список выше станет фолбэком для тех троих, кто должен
+// видеть раздел независимо от состава группы (администраторы портала).
+
+/**
+ * Есть ли у текущего пользователя доступ к разделу «Отчёты». Использует
+ * effectiveUserEmail — то есть учитывает отладочную подмену личности (см.
+ * impersonation.ts): под подменённым пользователем раздел виден/не виден
+ * так же, как было бы у него самого.
+ */
+export function hasReportsAccess(context: WebPartContext): boolean {
+  const email = effectiveUserEmail(context).trim().toLowerCase();
+  return email.length > 0 && ALLOWED_EMAILS.has(email);
+}

src/webparts/requestPortal/shared/routing.ts

@@ -35,7 +35,7 @@ export type PortalMode = 'submit' | 'approve' | 'create' | 'edit';
  *                 «Возвращена на доработку»); в отличие от первых двух смотрит
  *                 на список данных по автору, а не на строки маршрута.
  */
-export type NavSection = 'new' | 'approvals' | 'execution' | 'rework' | 'own' | 'search';
+export type NavSection = 'new' | 'approvals' | 'execution' | 'rework' | 'own' | 'search' | 'reports';
 
 /**
  * Подвкладка раздела «Мои заявки». 'created' — заявки, где пользователь автор
@@ -259,6 +259,7 @@ function readStoredNav(): NavSection {
       raw === 'rework' ||
       raw === 'own' ||
       raw === 'search' ||
+      raw === 'reports' ||
       raw === 'new'
       ? raw
       : 'new';
@@ -283,6 +284,7 @@ function parseNav(raw: string | undefined): NavSection {
     raw === 'rework' ||
     raw === 'own' ||
     raw === 'search' ||
+    raw === 'reports' ||
     raw === 'new'
   ) {
     return raw;