refactor: StatusBadge поверх ui-kit Badge

package-lock.json

@@ -17,7 +17,7 @@
         "@microsoft/sp-webpart-base": "1.22.1",
         "@pnp/sp": "^4.20.0",
         "@pnp/spfx-controls-react": "^3.25.0",
-        "@tnsu/ui-kit": "^0.2.0",
+        "@tnsu/ui-kit": "^0.3.0",
         "react": "17.0.1",
         "react-dom": "17.0.1",
         "tslib": "2.3.1"
@@ -9870,9 +9870,9 @@
       "license": "0BSD"
     },
     "node_modules/@tnsu/ui-kit": {
-      "version": "0.2.0",
+      "version": "0.3.0",
-      "resolved": "http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/%40tnsu%2Fui-kit/-/0.2.0/ui-kit-0.2.0.tgz",
+      "resolved": "http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/%40tnsu%2Fui-kit/-/0.3.0/ui-kit-0.3.0.tgz",
-      "integrity": "sha512-8vQsA91lSbmtlqROlIYkgSH3cNEH5DCVI5vM4mks2RWwvSpYet0zfe2B3wfBcnb+cAWrbLGfCwe81KRDcJ/k+Q==",
+      "integrity": "sha512-V9pTS/rBmU9KInczI8jJ/KHT96hfX0OlnjIJ2NZ/iEQTOE93I9xMfmgpj83PSRrI6/xzyybu+8k/qVO6LP926w==",
       "license": "ISC",
       "peerDependencies": {
         "@fluentui/react": "^8.106.4",

package.json

@@ -21,7 +21,7 @@
     "@microsoft/sp-webpart-base": "1.22.1",
     "@pnp/sp": "^4.20.0",
     "@pnp/spfx-controls-react": "^3.25.0",
-    "@tnsu/ui-kit": "^0.2.0",
+    "@tnsu/ui-kit": "^0.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "tslib": "2.3.1"

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

@@ -1,63 +0,0 @@
-@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;
-}
-
-// Компактный вариант — для ячейки таблицы (RequestsTableView/SearchView),
-// повторяет размеры, что были у их собственной .status до объединения.
-.sm {
-  padding: 3px 10px;
-  border-radius: $r-md;
-  font-size: $fs-caption;
-  font-weight: 600;
-  letter-spacing: normal;
-}
-
-.draft {
-  background: $gray-100;
-  color: $gray-700;
-}
-
-.queued {
-  background: $gray-100;
-  color: $gray-500;
-}
-
-.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

@@ -1,40 +1,33 @@
 import * as React from 'react';
-import styles from './StatusBadge.module.scss';
+import { Badge, BadgeVariant } from '@tnsu/ui-kit';
 import { REQUEST_STATUS } from '../models/statuses';
 
-// Цвет бейджа по статусу заявки. Неизвестный статус → нейтральный (как черновик).
+// Единственное место, где СТАТУС ЗАЯВКИ превращается в цвет. Сам цвет живёт в
-const VARIANT: Record<string, string> = {
+// generic Badge (@tnsu/ui-kit) — здесь только смысловой маппинг «статус → variant».
-  [REQUEST_STATUS.draft]: styles.draft,
+// Раньше у таблиц была своя копия этой раскраски (statusClass) — она разошлась с
-  [REQUEST_STATUS.queued]: styles.queued,
+// этой, поэтому обе копии убраны в пользу общего компонента.
-  [REQUEST_STATUS.onApproval]: styles.onApproval,
+const STATUS_VARIANT: Record<string, BadgeVariant> = {
-  [REQUEST_STATUS.onExecution]: styles.onApproval, // активный шаг — как «на согласовании»
+  [REQUEST_STATUS.draft]: 'neutral',
-  [REQUEST_STATUS.approved]: styles.approved,
+  [REQUEST_STATUS.queued]: 'muted',
-  [REQUEST_STATUS.executed]: styles.approved, // выполнено — как «согласовано» (зелёный)
+  [REQUEST_STATUS.onApproval]: 'info',
-  [REQUEST_STATUS.rejected]: styles.rejected,
+  [REQUEST_STATUS.onExecution]: 'info', // активный шаг — как «на согласовании»
-  [REQUEST_STATUS.returned]: styles.returned,
+  [REQUEST_STATUS.approved]: 'success',
-  [REQUEST_STATUS.execution]: styles.execution,
+  [REQUEST_STATUS.executed]: 'success', // выполнено — как «согласовано» (зелёный)
-  [REQUEST_STATUS.closed]: styles.closed,
+  [REQUEST_STATUS.rejected]: 'danger',
+  [REQUEST_STATUS.returned]: 'warning',
+  [REQUEST_STATUS.execution]: 'primary',
+  [REQUEST_STATUS.closed]: 'muted'
 };
 
 export interface IStatusBadgeProps {
   status: string;
-  /**
+  /** 'md' (по умолчанию) — шапка формы; 'sm' — компактный для ячейки таблицы. */
-   * 'md' (по умолчанию) — шапка формы/просмотра заявки; 'sm' — компактный
-   * вариант для ячейки таблицы (RequestsTableView/SearchView). Цвет статуса
-   * не зависит от размера — единственный источник цвета: VARIANT выше.
-   */
   size?: 'sm' | 'md';
 }
 
-/**
+/** Цветная плашка статуса заявки поверх generic Badge из @tnsu/ui-kit. */
- * Цветная плашка статуса заявки — ЕДИНСТВЕННОЕ место, где статус превращается
- * в цвет. У таблиц раньше была своя копия этой раскраски (statusClass в
- * RequestsTableView.tsx/SearchView.tsx) — она разошлась с этой (на согласовании
- * и возвращена на доработку оказались перепутаны местами), поэтому обе копии
- * убраны в пользу общего компонента.
- */
 export const StatusBadge: React.FC<IStatusBadgeProps> = ({ status, size = 'md' }) => (
-  <span className={`${styles.badge} ${size === 'sm' ? styles.sm : ''} ${VARIANT[status] || styles.draft}`}>
+  <Badge variant={STATUS_VARIANT[status] || 'neutral'} size={size}>
     {status}
-  </span>
+  </Badge>
 );