Панель со списками заявок (#1)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/1 Co-authored-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz> Co-committed-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz>
2026-08-04 12:02:11 +00:00
parent ba4e3feee5
commit 0aa0a60e40
21 changed files with 1442 additions and 121 deletions
@@ -0,0 +1,244 @@
+@import '../../../../styles/design-tokens';
+
+.view {
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sp-4;
+  flex-wrap: wrap;
+  margin-bottom: $sp-4;
+}
+
+.heading {
+  display: flex;
+  align-items: center;
+  gap: $sp-3;
+  margin: 0;
+  font-family: $font-serif;
+  font-size: $fs-page-title;
+  font-weight: 600;
+  color: $navy-900;
+}
+
+.count {
+  padding: 2px 10px;
+  border-radius: $r-full;
+  background: $navy-100;
+  color: $navy-700;
+  font-family: $font-sans;
+  font-size: $fs-label;
+  font-weight: 600;
+}
+
+.search {
+  width: 280px;
+  max-width: 100%;
+  padding: 9px 13px;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background: $white;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  color: $gray-900;
+  transition: .18s;
+
+  @include input-focus-gold;
+
+  &::placeholder {
+    color: $gray-400;
+  }
+}
+
+.empty,
+.error {
+  padding: $sp-6;
+  background: $white;
+  border: 1px solid $gray-200;
+  border-radius: $r-md;
+  color: $gray-500;
+  font-size: $fs-sm;
+}
+
+.error {
+  color: $red-500;
+  border-color: $red-500;
+  background: $red-50;
+}
+
+.tableWrap {
+  background: $white;
+  border: 1px solid $gray-200;
+  border-radius: $r-md;
+  box-shadow: $sh-1;
+  overflow: hidden;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $fs-sm;
+
+  th {
+    text-align: left;
+    padding: 12px 16px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+    color: $gray-500;
+    font-size: $fs-label;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 14px 16px;
+    border-bottom: 1px solid $gray-100;
+    color: $gray-900;
+    vertical-align: middle;
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+}
+
+// Кликабельна вся строка (см. RequestsTableView — onClick на <tr>).
+.row {
+  cursor: pointer;
+  transition: background .16s;
+
+  &:hover {
+    background: $gold-50;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $gold-500;
+    outline-offset: -2px;
+  }
+}
+
+.colId {
+  width: 70px;
+  color: $gray-400;
+  white-space: nowrap;
+}
+
+.colType {
+  width: 200px;
+  color: $navy-700;
+  font-weight: 500;
+}
+
+.colTitle {
+  min-width: 240px;
+}
+
+.colDate {
+  width: 110px;
+  color: $gray-500;
+  white-space: nowrap;
+}
+
+.colAuthor {
+  width: 280px;
+  color: $gray-500;
+}
+
+.colStatus {
+  width: 190px;
+}
+
+.status {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: $r-md;
+  font-size: $fs-caption;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.statusDraft {
+  background: $gray-100;
+  color: $gray-700;
+}
+
+.statusOnApproval {
+  background: $gold-100;
+  color: $gold-600;
+}
+
+.statusApproved {
+  background: $green-50;
+  color: $green-600;
+}
+
+.statusRejected {
+  background: $red-50;
+  color: $red-500;
+}
+
+.statusReturned {
+  background: $blue-50;
+  color: $blue-600;
+}
+
+.statusDefault {
+  background: $gray-100;
+  color: $gray-500;
+}
+
+.pager {
+  display: flex;
+  align-items: center;
+  gap: $sp-1;
+  margin-top: $sp-4;
+  flex-wrap: wrap;
+}
+
+.pagerBtn {
+  min-width: 30px;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid $gray-200;
+  border-radius: $r-sm;
+  background: $white;
+  color: $gray-700;
+  font-family: $font-sans;
+  font-size: $fs-sm;
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover:not(:disabled) {
+    border-color: $gold-400;
+    color: $gold-600;
+  }
+
+  &:disabled {
+    opacity: .4;
+    cursor: default;
+  }
+}
+
+.pagerBtnActive {
+  background: $navy-800;
+  border-color: $navy-800;
+  color: $white;
+
+  &:hover {
+    border-color: $navy-800 !important;
+    color: $white !important;
+  }
+}
+
+.pagerEllipsis {
+  color: $gray-400;
+  font-size: $fs-sm;
+  padding: 0 4px;
+}