feat: migrated vacation form to request portal

src/webparts/requestPortal/data/requests.ts

@@ -14,6 +14,7 @@ export const REQUEST_TYPES: IRequestType[] = [
   { id: 'it-1c-ticket', categoryId: 'it', title: 'Заявка в отдел 1С', icon: 'clipboard' },
 
   // Отдел кадров
+  { id: 'hr-vacation', categoryId: 'hr', title: 'Заявка на отпуск', icon: 'calendar' },
   { id: 'hr-transfer', categoryId: 'hr', title: 'на перемещение сотрудников', icon: 'send' }
 ];
 

src/webparts/requestPortal/forms/Ticket1C/approval/provisioning.json

@@ -2,7 +2,7 @@
   "dataListTitle": "Заявка в отдел 1С — согласование",
   "columns": [
     { "internalName": "TansuSiteApprover", "title": "Согласующий", "type": "User", "userSelectionMode": "PeopleOnly" },
-    { "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
+    { "internalName": "ApprovalStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
     { "internalName": "Ticket", "title": "Заявка", "type": "Lookup", "lookupList": "Заявка в отдел 1С — данные", "lookupShowField": "Title" },
     { "internalName": "Date", "title": "Дата", "type": "DateTime" },
     { "internalName": "Comment", "title": "Комментарий", "type": "Note" },

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

@@ -20,7 +20,7 @@ export async function loadTicketRequest(itemId: number): Promise<ILoadedRequest>
   const item = (await getSP()
     .web.lists.getByTitle(LIST_TITLE)
     .items.getById(itemId)
-    .select(...SCALAR_FIELDS, 'Title', 'Status', 'RequestUniqueCode')()) as Record<string, unknown>;
+    .select(...SCALAR_FIELDS, 'Title', 'RequestStatus', 'RequestUniqueCode')()) as Record<string, unknown>;
 
   const data: IFormData = { ...EMPTY_DATA };
   const writable = data as unknown as Record<string, string>;
@@ -31,5 +31,5 @@ export async function loadTicketRequest(itemId: number): Promise<ILoadedRequest>
   });
   data.TaskName = (item.Title as string) || '';
 
-  return { data, status: (item.Status as string) || '', code: (item.RequestUniqueCode as string) || '' };
+  return { data, status: (item.RequestStatus as string) || '', code: (item.RequestUniqueCode as string) || '' };
 }

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

@@ -3,7 +3,7 @@
   "titleColumnName": "Наименование задачи",
   "columns": [
     { "internalName": "RequestUniqueCode", "title": "Уникальный код заявки", "type": "Text" },
-    { "internalName": "Status", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
+    { "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
 
     { "internalName": "WorkType", "title": "Виды работ", "type": "Choice", "required": true, "choices": [
       "Создание пользователя в 1С",

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

@@ -18,7 +18,7 @@ export function ticket1cApprovalService(): ApprovalListService {
 
 /** Поля элемента списка данных из модели формы. TaskName пишется в системную колонку Title. */
 function buildItem(data: IFormData, status: string): Record<string, unknown> {
-  const item: Record<string, unknown> = { Title: data.TaskName, Status: status };
+  const item: Record<string, unknown> = { Title: data.TaskName, RequestStatus: status };
 
   (Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
     if (key === 'TaskName') return;

src/webparts/requestPortal/forms/Vacation/README.md

@@ -0,0 +1,37 @@
+# Заявка на отпуск (hr-vacation)
+
+**Назначение:** заявление сотрудника на отпуск (перенос формы из отдельной web part `pto-tracker`).
+**Категория:** Отдел кадров
+**Списки SP:** «Заявка на отпуск — данные» / «Заявка на отпуск — согласование»
+**RequestTypeId (внешний API маршрутов):** 11 (в старой pto-tracker было 1; при заведении типа в админке портала получил новый id 11)
+
+## Маршрут
+- Тип заявки в approval-route API (`/api/request-types`): id **11**, `pageUrl` «hr-vacation»,
+  `listId` «/sites/requests/Lists/List5», section «Кадры».
+- Фазы: только согласование. Фазы исполнения нет — после согласования заявка
+  просто получает статус «Согласовано» (никакого Planner, в отличие от Ticket1C).
+- **Матрица редактируема заявителем** при новой заявке / черновике / возврате
+  (как RecruitingHire / WorkplaceSetup): `useMatrixEditor(editable = !readOnly)`.
+  Заявитель может добавлять/удалять/переставлять согласующих поверх планируемого
+  маршрута.
+
+## Особое поведение
+- **Заявку можно подать за другого сотрудника.** Поле «Сотрудник» — People-picker
+  (колонка User `Employee`). Планируемый маршрут резолвится по e-mail
+  **выбранного** сотрудника (`getPlannedMatrix(..., data.Employee, ...)`), а не
+  текущего пользователя — поэтому reloadKey матрицы включает `data.Employee`.
+- **Автоподстановка должности.** Новая заявка предзаполняется текущим
+  пользователем (email + должность из профиля `SPS-JobTitle` через
+  `approval.getJobTitle`). При выборе другого сотрудника его должность
+  подтягивается так же. Ошибка профиля не мешает форме — поле просто остаётся как есть.
+- **Дата окончания не вводится** — считается при сохранении: `начало + (дни − 1)`
+  и пишется в колонку `EndDate` (обязательна в списке, но в UI её нет).
+- **Заголовок элемента** (`Title`): `Отпуск — {ФИО} — дд.мм.гггг`.
+
+## Секции формы
+RequestSection (сотрудник · должность · дата начала · количество дней)
+
+## Точки входа
+- rptype: `hr-vacation`
+- Режим согласующего (просмотр): есть (`VacationView`)
+- «Создать на основе»: нет

src/webparts/requestPortal/forms/Vacation/VacationForm.module.scss

@@ -0,0 +1,20 @@
+@import '../../../../styles/design-tokens';
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: $sp-2;
+  margin-bottom: $sp-4;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: $navy-700;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  cursor: pointer;
+  transition: color .18s;
+
+  &:hover {
+    color: $gold-600;
+  }
+}

src/webparts/requestPortal/forms/Vacation/VacationForm.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import styles from './VacationForm.module.scss';
+import {
+  Alert,
+  FormCard,
+  FormModeProvider,
+  Icon,
+  RequestNumber,
+  SubmitActions,
+  useRequestSubmit
+} from '../../shared/ui';
+import {
+  ApprovalMatrix,
+  StatusBadge,
+  useMatrixEditor,
+  getPlannedMatrix,
+  notifyActiveStep,
+  REQUEST_STATUS,
+  isEditableStatus,
+  IApproverToWrite,
+  findUnassignedStep
+} from '../../shared/approval';
+import { IRequestFormProps } from '../../models/types';
+import { IFormData, EMPTY_DATA, SetField } from './model';
+import {
+  saveVacationRequest,
+  vacationApprovalService,
+  VACATION_REQUEST_TYPE_ID,
+  DATA_LIST_TITLE,
+  APPROVAL_LIST_TITLE
+} from './submit';
+import { loadVacationRequest } from './load';
+import { RequestSection } from './sections/RequestSection';
+
+const VacationForm: React.FC<IRequestFormProps> = ({ requestType, context, onCancel, onSaved, editId }) => {
+  const [data, setData] = useState<IFormData>(EMPTY_DATA);
+  const [requestId, setRequestId] = useState<number | undefined>(editId);
+  const [requestStatus, setRequestStatus] = useState<string | undefined>(undefined);
+  const [requestCode, setRequestCode] = useState<string | undefined>(undefined);
+  const submit = useRequestSubmit();
+
+  const readOnly = !isEditableStatus(requestStatus);
+  const set: SetField = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
+
+  const approval = useMemo(() => vacationApprovalService(), []);
+
+  // Открыта СВОЯ заявка на редактирование (черновик/возврат) — подгружаем содержимое и статус.
+  useEffect(() => {
+    if (!editId) {
+      return;
+    }
+    let alive = true;
+    loadVacationRequest(editId)
+      .then((loaded) => {
+        if (alive) {
+          setData(loaded.data);
+          setRequestStatus(loaded.status);
+          setRequestCode(loaded.code || undefined);
+        }
+      })
+      .catch((e) => {
+        if (alive) {
+          submit.setError(`Не удалось загрузить заявку №${editId}: ${(e as Error).message}`);
+        }
+      });
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editId]);
+
+  // Новая заявка — по умолчанию на себя: подставляем текущего пользователя и его должность.
+  useEffect(() => {
+    if (editId) {
+      return;
+    }
+    let alive = true;
+    const user = context.pageContext.user;
+    setData((prev) => ({ ...prev, Employee: prev.Employee || user.email }));
+    approval
+      .getJobTitle(user.loginName)
+      .then((title) => {
+        if (alive && title) {
+          setData((prev) => ({ ...prev, Position: prev.Position || title }));
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editId]);
+
+  // Выбор другого сотрудника подтягивает его должность (как в исходной pto-tracker).
+  const handleEmployeeChange = (login: string): void => {
+    setData((prev) => ({ ...prev, Employee: login }));
+    if (!login) {
+      return;
+    }
+    approval
+      .getJobTitle(login)
+      .then((title) => setData((prev) => ({ ...prev, Position: title || prev.Position })))
+      .catch(() => undefined);
+  };
+
+  // Планируемый маршрут резолвится по e-mail ВЫБРАННОГО сотрудника (не текущего
+  // пользователя) — так работает подача за другого. У заявки на редактировании
+  // маршрут читается из уже записанных строк, чтобы не затереть правки инициатора.
+  const loadMatrix = useCallback(
+    () =>
+      editId
+        ? approval.getMatrixForRequest(editId)
+        : getPlannedMatrix(context, VACATION_REQUEST_TYPE_ID, data.Employee, approval, 'Approval'),
+    [context, approval, editId, data.Employee]
+  );
+  const matrix = useMatrixEditor(
+    loadMatrix,
+    `${data.Employee}-${editId ?? 'new'}`,
+    !readOnly,
+    !!editId || !!data.Employee,
+    (login) => approval.getJobTitle(login)
+  );
+
+  const daysNum = Number(data.DaysCount);
+  const isValid = !!(
+    data.Employee &&
+    data.Position.trim() &&
+    data.StartDate &&
+    Number.isFinite(daysNum) &&
+    daysNum > 0
+  );
+  const validate = (): string | undefined =>
+    isValid ? undefined : 'Заполните обязательные поля: сотрудник, должность, дата начала, количество дней (> 0).';
+
+  const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] =>
+    rows.map((r) => ({
+      email: r.email,
+      position: r.position,
+      allowReassign: r.allowReassign,
+      order: r.order
+    }));
+
+  const save = (status: string): (() => Promise<void>) => async (): Promise<void> => {
+    const { id, code } = await saveVacationRequest(requestId, data, toApprovers(matrix.rows), status);
+    setRequestId(id);
+    setRequestStatus(status);
+    if (code) {
+      setRequestCode(code);
+    }
+    if (onSaved) {
+      onSaved();
+    }
+    // Отправка на согласование — уведомляем первый активный шаг (поток оповещения).
+    if (status === REQUEST_STATUS.onApproval) {
+      await notifyActiveStep(context, approval, id, {
+        requestTypeId: VACATION_REQUEST_TYPE_ID,
+        dataListName: DATA_LIST_TITLE,
+        approvalListName: APPROVAL_LIST_TITLE
+      });
+    }
+  };
+
+  // На отправку (в отличие от черновика) маршрут должен быть полностью
+  // укомплектован — иначе шаг без назначенного человека молча пропадёт при записи.
+  const validateSubmit = (): string | undefined => {
+    const formError = validate();
+    if (formError) return formError;
+    if (matrix.error) {
+      return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`;
+    }
+    const unassigned = findUnassignedStep(matrix.rows);
+    if (unassigned) {
+      return `Шаг ${unassigned.order} маршрута согласования («${unassigned.position || 'без должности'}») без назначенного человека — выберите согласующего или удалите шаг.`;
+    }
+    return undefined;
+  };
+
+  const handleSaveDraft = (): Promise<void> => submit.run('draft', save(REQUEST_STATUS.draft), validate);
+  const handleSubmit = (): Promise<void> => submit.run('submit', save(REQUEST_STATUS.onApproval), validateSubmit);
+
+  const sectionProps = { data, set, context, onEmployeeChange: handleEmployeeChange };
+
+  return (
+    <div>
+      <button type="button" className={styles.back} onClick={onCancel}>
+        <Icon name="arrow-left" size="sm" />
+        <span>К списку заявок</span>
+      </button>
+
+      <FormCard
+        title={requestType.title}
+        subtitle="Категория: Отдел кадров"
+        headerRight={
+          requestId || requestStatus ? (
+            <>
+              {requestStatus && <StatusBadge status={requestStatus} />}
+              {requestCode && <RequestNumber code={requestCode} />}
+            </>
+          ) : undefined
+        }
+      >
+        {submit.savedKind && !submit.error && (
+          <Alert variant="ok">
+            {submit.savedKind === 'draft' ? 'Черновик сохранён.' : 'Заявка отправлена на согласование.'}
+          </Alert>
+        )}
+        {submit.error && <Alert variant="err">{submit.error}</Alert>}
+
+        <FormModeProvider readOnly={readOnly}>
+          <RequestSection {...sectionProps} />
+        </FormModeProvider>
+
+        <ApprovalMatrix editor={matrix} search={(q) => approval.searchUsers(q)} />
+
+        <SubmitActions
+          submit={submit}
+          isValid={isValid}
+          readOnly={readOnly}
+          onCancel={onCancel}
+          onSaveDraft={handleSaveDraft}
+          onSubmit={handleSubmit}
+          submitLabel="Отправить на согласование"
+        />
+      </FormCard>
+    </div>
+  );
+};
+
+export default VacationForm;

src/webparts/requestPortal/forms/Vacation/VacationView.module.scss

@@ -0,0 +1,14 @@
+@import '../../../../styles/design-tokens';
+
+.state {
+  padding: $sp-8;
+  color: $gray-500;
+  font-size: $fs-sm;
+  text-align: center;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: $sp-4;
+}

src/webparts/requestPortal/forms/Vacation/VacationView.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import type { WebPartContext } from '@microsoft/sp-webpart-base';
+import styles from './VacationView.module.scss';
+import { Alert, FormCard, FormModeProvider, PrintButton } from '../../shared/ui';
+import {
+  ApproverService,
+  DecisionPanel,
+  StatusBadge,
+  ApprovalMatrix,
+  useMatrixEditor,
+  notifyActiveStep
+} from '../../shared/approval';
+import { IFormData, EMPTY_DATA, SetField } from './model';
+import { loadVacationRequest } from './load';
+import {
+  vacationApprovalService,
+  VACATION_REQUEST_TYPE_ID,
+  DATA_LIST_TITLE,
+  APPROVAL_LIST_TITLE
+} from './submit';
+import { RequestSection } from './sections/RequestSection';
+
+interface IVacationViewProps {
+  context: WebPartContext;
+  itemId: number;
+}
+
+// В режиме чтения поля не редактируются, поэтому обновление — пустышка.
+const NOOP_SET: SetField = () => undefined;
+
+// Заявка на отпуск только для просмотра (режим согласующего). Переиспользует ту
+// же секцию, что и форма подачи; редактирование выключено через
+// <FormModeProvider readOnly> — поля сами становятся неизменяемыми.
+const VacationView: React.FC<IVacationViewProps> = ({ context, itemId }) => {
+  const [data, setData] = useState<IFormData>(EMPTY_DATA);
+  const [status, setStatus] = useState<string>('');
+  const [code, setCode] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const approval = useMemo(() => vacationApprovalService(), []);
+  const approverService = useMemo(() => new ApproverService(approval, DATA_LIST_TITLE), [approval]);
+
+  // Матрица маршрута из фактических строк заявки (read-only). decisionSeq в
+  // reloadKey: после решения строки на сервере меняются — перечитываем матрицу.
+  const [decisionSeq, setDecisionSeq] = useState<number>(0);
+  const loadApprovers = useCallback(() => approval.getMatrixForRequest(itemId), [approval, itemId]);
+  const approvers = useMatrixEditor(loadApprovers, `a-${itemId}-${decisionSeq}`, false, true, (l) =>
+    approval.getJobTitle(l)
+  );
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    loadVacationRequest(itemId)
+      .then((loaded) => {
+        if (alive) {
+          setData(loaded.data);
+          setStatus(loaded.status);
+          setCode(loaded.code);
+          setError(null);
+          setLoading(false);
+        }
+      })
+      .catch((e) => {
+        if (alive) {
+          setError(`Не удалось загрузить заявку №${itemId}: ${(e as Error).message}`);
+          setLoading(false);
+        }
+      });
+    return () => {
+      alive = false;
+    };
+  }, [itemId]);
+
+  if (loading) {
+    return <div className={styles.state}>Загрузка заявки…</div>;
+  }
+  if (error) {
+    return (
+      <div className={styles.state}>
+        <Alert variant="err">{error}</Alert>
+      </div>
+    );
+  }
+
+  const sectionProps = { data, set: NOOP_SET, context };
+
+  const notify = (): void => {
+    notifyActiveStep(context, approval, itemId, {
+      requestTypeId: VACATION_REQUEST_TYPE_ID,
+      dataListName: DATA_LIST_TITLE,
+      approvalListName: APPROVAL_LIST_TITLE
+    }).catch(() => undefined);
+  };
+
+  return (
+    <div>
+      <div className={`${styles.toolbar} rp-no-print`}>
+        <PrintButton />
+      </div>
+
+      <div className="rp-print-root">
+        <FormCard
+          title="Заявка на отпуск"
+          subtitle={`№${code || itemId}`}
+          headerRight={status ? <StatusBadge status={status} /> : undefined}
+        >
+          <FormModeProvider readOnly>
+            <RequestSection {...sectionProps} />
+          </FormModeProvider>
+        </FormCard>
+
+        <ApprovalMatrix editor={approvers} search={(q) => approval.searchUsers(q)} />
+      </div>
+
+      {/* Панель решения — ВНЕ печати и FormModeProvider (комментарий редактируемый). */}
+      <div className="rp-no-print">
+        <DecisionPanel
+          service={approverService}
+          requestId={itemId}
+          search={(q) => approval.searchUsers(q)}
+          onDecided={(newStatus) => {
+            setStatus(newStatus);
+            setDecisionSeq((n) => n + 1);
+            notify();
+          }}
+          onDelegated={() => {
+            setDecisionSeq((n) => n + 1);
+            notify();
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default VacationView;

src/webparts/requestPortal/forms/Vacation/approval/provisioning.json

@@ -0,0 +1,14 @@
+{
+  "dataListTitle": "Заявка на отпуск — согласование",
+  "columns": [
+    { "internalName": "TansuSiteApprover", "title": "Согласующий", "type": "User", "userSelectionMode": "PeopleOnly" },
+    { "internalName": "ApprovalStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
+    { "internalName": "Ticket", "title": "Заявка", "type": "Lookup", "lookupList": "Заявка на отпуск — данные", "lookupShowField": "Title" },
+    { "internalName": "Date", "title": "Дата", "type": "DateTime" },
+    { "internalName": "Comment", "title": "Комментарий", "type": "Note" },
+    { "internalName": "StepOrder", "title": "Порядок", "type": "Number" },
+    { "internalName": "AllowReassignToOtherApprovers", "title": "Можно перепоручать", "type": "Boolean" },
+    { "internalName": "Phase", "title": "Фаза", "type": "Choice", "choices": ["Согласование", "Исполнение"] },
+    { "internalName": "DelegatedBy", "title": "Кем переназначено", "type": "User", "userSelectionMode": "PeopleOnly" }
+  ]
+}

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

@@ -0,0 +1,50 @@
+import { getSP } from '../../shared/pnp/pnpjs';
+import { IFormData, EMPTY_DATA } from './model';
+
+const LIST_TITLE = 'Заявка на отпуск — данные';
+
+export interface ILoadedRequest {
+  data: IFormData;
+  /** Ф.И.О. сотрудника из поля Employee (для заголовка режима чтения). */
+  employeeName: string;
+  status: string;
+  /** Уникальный код заявки; '' — если запись создана до появления поля. */
+  code: string;
+}
+
+/** Прочитать заявку на отпуск по id: модель формы + статус (правка / просмотр). */
+export async function loadVacationRequest(itemId: number): Promise<ILoadedRequest> {
+  const item = (await getSP()
+    .web.lists.getByTitle(LIST_TITLE)
+    .items.getById(itemId)
+    .select(
+      'Id',
+      'Position',
+      'StartDate',
+      'DaysCount',
+      'RequestStatus',
+      'RequestUniqueCode',
+      'Employee/Title',
+      'Employee/EMail'
+    )
+    .expand('Employee')()) as Record<string, unknown>;
+
+  const employee = item.Employee as { Title?: string; EMail?: string } | undefined;
+  const start = (item.StartDate as string) || '';
+  const days = item.DaysCount;
+
+  const data: IFormData = {
+    ...EMPTY_DATA,
+    Employee: employee?.EMail || '',
+    Position: (item.Position as string) || '',
+    StartDate: start.slice(0, 10), // ISO → YYYY-MM-DD для input type=date
+    DaysCount: days === null || days === undefined ? '' : String(days)
+  };
+
+  return {
+    data,
+    employeeName: employee?.Title || '',
+    status: (item.RequestStatus as string) || '',
+    code: (item.RequestUniqueCode as string) || ''
+  };
+}

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

@@ -0,0 +1,43 @@
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+
+/**
+ * Данные формы «Заявка на отпуск». Ключи по возможности = internalName колонок
+ * SP-списка «Заявка на отпуск — данные». Employee хранит e-mail выбранного
+ * сотрудника (то, что отдаёт PeopleField) — по нему же резолвится маршрут
+ * согласования, поэтому заявку можно подать и за другого сотрудника.
+ * EndDate в форме не вводится: считается при сохранении как начало + (дни − 1).
+ */
+export interface IFormData {
+  /** E-mail сотрудника, за которого заявка (People). Пусто = не выбран. */
+  Employee: string;
+  Position: string;
+  /** ISO YYYY-MM-DD (input type=date). */
+  StartDate: string;
+  /** Строка из input type=number; при записи → number. */
+  DaysCount: string;
+}
+
+/** Обновление одного поля формы с сохранением типа значения. */
+export type SetField = <K extends keyof IFormData>(key: K, value: IFormData[K]) => void;
+
+/** Пропсы секции формы: срез данных + колбэк обновления + контекст (people picker). */
+export interface ISectionProps {
+  data: IFormData;
+  set: SetField;
+  context: WebPartContext;
+  /**
+   * Выбор сотрудника подтягивает его должность — поэтому у поля «Сотрудник»
+   * отдельный обработчик. Если не передан (режим чтения) — правка через set.
+   */
+  onEmployeeChange?: (login: string) => void;
+}
+
+export const EMPTY_DATA: IFormData = {
+  Employee: '',
+  Position: '',
+  StartDate: '',
+  DaysCount: ''
+};
+
+/** Плейсхолдер для поля выбора сотрудника. */
+export const EMPLOYEE_PLACEHOLDER = 'Начните вводить Ф.И.О. сотрудника…';

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

@@ -0,0 +1,13 @@
+{
+  "dataListTitle": "Заявка на отпуск — данные",
+  "columns": [
+    { "internalName": "RequestUniqueCode", "title": "Уникальный код заявки", "type": "Text" },
+    { "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
+
+    { "internalName": "Employee", "title": "Сотрудник", "type": "User", "userSelectionMode": "PeopleOnly", "required": true },
+    { "internalName": "Position", "title": "Должность", "type": "Text" },
+    { "internalName": "StartDate", "title": "Дата начала", "type": "DateTime", "dateOnly": true },
+    { "internalName": "EndDate", "title": "Дата окончания", "type": "DateTime", "dateOnly": true },
+    { "internalName": "DaysCount", "title": "Количество дней", "type": "Number" }
+  ]
+}

src/webparts/requestPortal/forms/Vacation/sections/RequestSection.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { CollapseSection, FormField, TextInput, PeopleField } from '../../../shared/ui';
+import { ISectionProps, EMPLOYEE_PLACEHOLDER } from '../model';
+
+/** Единственная секция формы «Заявка на отпуск»: сотрудник, должность, даты. */
+export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange }) => (
+  <CollapseSection title="Заявка на отпуск" icon="people">
+    <FormField label="Сотрудник" htmlFor="Employee" required full>
+      <PeopleField
+        context={context}
+        value={data.Employee}
+        onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
+        placeholder={EMPLOYEE_PLACEHOLDER}
+      />
+    </FormField>
+    <FormField label="Должность" htmlFor="Position" required>
+      <TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
+    </FormField>
+    <FormField label="Дата начала" htmlFor="StartDate" required>
+      <TextInput id="StartDate" type="date" value={data.StartDate} onChange={(v) => set('StartDate', v)} />
+    </FormField>
+    <FormField label="Количество дней" htmlFor="DaysCount" required>
+      <TextInput id="DaysCount" type="number" value={data.DaysCount} onChange={(v) => set('DaysCount', v)} />
+    </FormField>
+  </CollapseSection>
+);

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

@@ -0,0 +1,93 @@
+import { getSP } from '../../shared/pnp/pnpjs';
+import { ApprovalListService, IApproverToWrite, writeRoute } from '../../shared/approval';
+import { buildRequestUniqueCode } from '../../shared/requestCode';
+import { IFormData } from './model';
+
+export const DATA_LIST_TITLE = 'Заявка на отпуск — данные';
+export const APPROVAL_LIST_TITLE = 'Заявка на отпуск — согласование';
+// Тип заявки «отпуск» во внешнем approval-route API (GET /api/request-types → id 11,
+// name «Заявка на отпуск», pageUrl «hr-vacation»). Захардкожен, как
+// HIRE_REQUEST_TYPE_ID=5 в RecruitingHire. NB: в старой web part pto-tracker было 1 —
+// при заведении типа в админке портала он получил новый id 11, берём его.
+export const VACATION_REQUEST_TYPE_ID = 11;
+
+/** Экземпляр сервиса списка согласования этой формы. */
+export function vacationApprovalService(): ApprovalListService {
+  return new ApprovalListService(APPROVAL_LIST_TITLE);
+}
+
+/** email / claims-логин → пользователь сайта (Id для Person-поля + Title для заголовка). */
+async function ensureEmployee(login: string): Promise<{ Id: number; Title: string }> {
+  const full = login.indexOf('|') >= 0 ? login : `i:0#.f|membership|${login}`;
+  return getSP().web.ensureUser(full);
+}
+
+function pad2(n: number): string {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+/** «Дата окончания» в форме не вводится: начало + (дни − 1). Пусто → ''. */
+function computeEndDate(startIso: string, days: number): string {
+  if (!startIso || !Number.isFinite(days) || days <= 0) return '';
+  const endMs = new Date(startIso).getTime() + (days - 1) * 86400000;
+  return new Date(endMs).toISOString().slice(0, 10);
+}
+
+/** Осмысленный заголовок элемента (системная колонка Title). */
+function buildTitle(employeeName: string): string {
+  const now = new Date();
+  return `Отпуск — ${employeeName} — ${pad2(now.getDate())}.${pad2(now.getMonth() + 1)}.${now.getFullYear()}`;
+}
+
+/** Поля элемента списка данных из модели формы (+ Employee по Id, + вычисленная EndDate). */
+function buildItem(data: IFormData, status: string, employeeId: number, employeeName: string): Record<string, unknown> {
+  const days = Number(data.DaysCount);
+  return {
+    Title: buildTitle(employeeName),
+    RequestStatus: status,
+    EmployeeId: employeeId,
+    Position: data.Position || null,
+    StartDate: data.StartDate || null,
+    DaysCount: Number.isFinite(days) && days > 0 ? days : null,
+    EndDate: computeEndDate(data.StartDate, days) || null
+  };
+}
+
+export interface ISaveResult {
+  id: number;
+  /** Задан только при создании новой заявки (существующий код не меняется). */
+  code?: string;
+}
+
+/**
+ * Сохранить заявку на отпуск: содержимое + маршрут согласования.
+ * existingId задан → обновляем ту же запись (черновик/доработка), иначе создаём новую.
+ * Фазы исполнения у отпуска нет — writeRoute вызывается с пустым списком исполнителей.
+ * Возвращает Id заявки (+ код при создании).
+ */
+export async function saveVacationRequest(
+  existingId: number | undefined,
+  data: IFormData,
+  approvers: IApproverToWrite[],
+  status: string
+): Promise<ISaveResult> {
+  const list = getSP().web.lists.getByTitle(DATA_LIST_TITLE);
+  const employee = await ensureEmployee(data.Employee);
+  const item = buildItem(data, status, employee.Id, employee.Title || data.Employee);
+
+  let id: number;
+  let code: string | undefined;
+  if (existingId) {
+    await list.items.getById(existingId).update(item);
+    id = existingId;
+  } else {
+    const added = await list.items.add(item);
+    id = (added as { Id: number }).Id;
+    // Код известен только после создания элемента (нужен его Id).
+    code = buildRequestUniqueCode(VACATION_REQUEST_TYPE_ID, id, new Date());
+    await list.items.getById(id).update({ RequestUniqueCode: code });
+  }
+
+  await writeRoute(vacationApprovalService(), id, approvers, [], status);
+  return { id, code };
+}

src/webparts/requestPortal/forms/registry.ts

@@ -24,6 +24,9 @@ const formRegistry: Record<string, React.LazyExoticComponent<FormComponent>> = {
   ),
   'it-1c-ticket': React.lazy(
     () => import(/* webpackChunkName: 'form-1c-ticket' */ './Ticket1C/Ticket1CForm')
+  ),
+  'hr-vacation': React.lazy(
+    () => import(/* webpackChunkName: 'form-vacation' */ './Vacation/VacationForm')
   )
 };
 

src/webparts/requestPortal/forms/viewRegistry.ts

@@ -21,6 +21,9 @@ const viewRegistry: Record<string, React.LazyExoticComponent<ViewComponent>> = {
   ),
   'it-1c-ticket': React.lazy(
     () => import(/* webpackChunkName: 'view-1c-ticket' */ './Ticket1C/Ticket1CView')
+  ),
+  'hr-vacation': React.lazy(
+    () => import(/* webpackChunkName: 'view-vacation' */ './Vacation/VacationView')
   )
 };