feat: implemented form lifecycle hool and state machine

src/webparts/requestPortal/shared/approval/ui/StatusBadge.module.scss

@@ -0,0 +1,48 @@
+@import '../../../../../styles/design-tokens';
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: $r-sm;
+  font-family: $font-sans;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: .2px;
+  white-space: nowrap;
+}
+
+.draft {
+  background: $gray-100;
+  color: $gray-700;
+}
+
+.onApproval {
+  background: $blue-50;
+  color: $blue-600;
+}
+
+.approved {
+  background: $green-50;
+  color: $green-600;
+}
+
+.rejected {
+  background: $red-50;
+  color: $red-500;
+}
+
+.returned {
+  background: $gold-50;
+  color: $amber-700;
+}
+
+.execution {
+  background: $navy-50;
+  color: $navy-800;
+}
+
+.closed {
+  background: $gray-100;
+  color: $gray-500;
+}

src/webparts/requestPortal/shared/approval/ui/StatusBadge.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styles from './StatusBadge.module.scss';
+import { REQUEST_STATUS } from '../models/statuses';
+
+// Цвет бейджа по статусу заявки. Неизвестный статус → нейтральный (как черновик).
+const VARIANT: Record<string, string> = {
+  [REQUEST_STATUS.draft]: styles.draft,
+  [REQUEST_STATUS.onApproval]: styles.onApproval,
+  [REQUEST_STATUS.approved]: styles.approved,
+  [REQUEST_STATUS.rejected]: styles.rejected,
+  [REQUEST_STATUS.returned]: styles.returned,
+  [REQUEST_STATUS.execution]: styles.execution,
+  [REQUEST_STATUS.closed]: styles.closed,
+};
+
+/** Цветная плашка статуса заявки (шапка формы / просмотра). */
+export const StatusBadge: React.FC<{ status: string }> = ({ status }) => (
+  <span className={`${styles.badge} ${VARIANT[status] || styles.draft}`}>{status}</span>
+);