Add table for agents and credentials

2026-02-25 14:29:13 +08:00
parent 1c0532efa7
commit cf54a4a2e8
8 changed files with 480 additions and 5 deletions
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -0,0 +1,95 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+}
+
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.type {
+  display: flex;
+  padding: 4px 0px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border: 0.5px solid #5359f2;
+  background: rgba(83, 89, 242, 0.25);
+}
+.type > p {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
+.actions {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}