Управление заявками (#7)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/7

frontend/src/webparts/approvalAdmin/components/screens/ManageRequestsScreen.module.scss

@@ -0,0 +1,99 @@
+@import '../../../../styles/design-tokens';
+
+.matrix {
+  margin-top: 20px;
+}
+
+.phase {
+  margin-top: 20px;
+}
+
+.phase:first-child {
+  margin-top: 0;
+}
+
+.phaseHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.phaseTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: $gray-700;
+}
+
+.requestHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+// Колонка с номером шага — узкая, содержимое по центру (важно при rowSpan на
+// параллельный блок: иначе номер прижимался бы к верхней строке блока).
+.stepCol {
+  width: 56px;
+  white-space: nowrap;
+  text-align: center !important;
+}
+
+.parallelMark {
+  color: $gold-600;
+  font-weight: 600;
+}
+
+.flipY {
+  svg { transform: scaleY(-1); }
+}
+
+// Подсветка строки при наведении здесь — своя, НЕ штатный DataTable.module.scss
+// tbody tr:hover: та подсветка вешается через :hover на конкретный <tr>, а
+// ячейки с rowSpan (номер шага, стрелки перестановки) физически принадлежат
+// <tr> только первой строки блока — при наведении на вторую/третью строку
+// параллельного блока эти ячейки не подсвечивались, получался видимый "вырез"
+// в жёлтом фоне ровно на границе объединённой ячейки. Поэтому подсветка здесь
+// — на уровне блока через React-состояние (см. hoveredBlock в
+// ManageRequestsPhaseTable), а не через CSS :hover, а штатный tr:hover для
+// этой конкретной таблицы отключаем, чтобы они не накладывались друг на друга.
+.blockAwareWrap :global(tbody tr:hover) {
+  background: transparent;
+}
+
+.rowHover td {
+  background: $gold-50;
+}
+
+// IconButton по умолчанию (Button.module.scss/.iconButton) прозрачная — рамка
+// появляется только по hover. В этой таблице кнопок много и часть из них не
+// самоочевидна по смыслу (параллельность, перестановка шага), поэтому здесь
+// рамка видна всегда — иначе выглядит как текст, а не как элементы управления.
+// !important — переопределяет .iconButton независимо от порядка подключения
+// стилей (это два разных CSS-модуля, порядок их правил в бандле не гарантирован).
+.iconBtnVisible {
+  border-color: $gray-300 !important;
+  background: #fff !important;
+}
+
+// Включённое состояние кнопки «объединить с предыдущим шагом» — в отличие от
+// остальных кнопок это переключатель состояния, а не разовое действие,
+// поэтому оно залито (как в request-portal/shared/approval/ui/approval.module.scss/.iconBtnActive).
+// !important по той же причине, что и у .iconBtnVisible.
+.iconBtnActive {
+  border-color: $gold-500 !important;
+  background: $gold-500 !important;
+  color: $navy-950 !important;
+
+  &:hover:not(:disabled) {
+    border-color: $gold-600 !important;
+    background: $gold-600 !important;
+  }
+}
+
+// Плашка-пикер под таблицей для добавления шага (вместо кнопки+модалки) —
+// повторяет request-portal/shared/approval/ui/ApprovalMatrix.tsx/.matrixPicker.
+.addRow {
+  margin-top: 10px;
+}