Search requests (#2)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/2 Co-authored-by: timur.gorodetskiy <timur.gorodetskiy@tnsu.kz> Co-committed-by: timur.gorodetskiy <timur.gorodetskiy@tnsu.kz>
2026-08-06 09:59:07 +00:00
parent 571614c031
commit 6acb22dd95
23 changed files with 1622 additions and 459 deletions
@@ -0,0 +1,203 @@
+@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: 420px;
+  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;
+  overflow-x: auto;
+}
+
+.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;
+  }
+}
+
+// Кликабельна вся строка (см. SearchView — 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: 170px;
+  color: $navy-700;
+  font-weight: 500;
+}
+
+.colTitle {
+  min-width: 220px;
+}
+
+.colDate {
+  width: 100px;
+  color: $gray-500;
+  white-space: nowrap;
+}
+
+.colAuthor {
+  width: 220px;
+  color: $gray-500;
+}
+
+.colStatus {
+  width: 170px;
+}
+
+.colKind {
+  width: 110px;
+  color: $gray-400;
+  font-size: $fs-caption;
+  white-space: nowrap;
+}
+
+.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;
+}