feat: подготовил дизайн (изменения из другого репозитория)

frontend/src/components/ui/DataTable.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+defineProps<{
+  columns: Array<{ key: string; label: string; align?: 'left' | 'center' | 'right' | string }>
+  rows: Record<string, any>[]
+}>()
+</script>
+
+<template>
+  <div class="table-wrap">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :class="`align-${col.align ?? 'left'}`"
+          >{{ col.label }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, i) in rows" :key="i">
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            :class="`align-${col.align ?? 'left'}`"
+          >
+            <slot :name="col.key" :row="row" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+  border-radius: var(--radius-md);
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.data-table th {
+  background: rgba(255,255,255,0.6);
+  border-bottom: 2px solid var(--color-border-glass);
+  padding: 10px 14px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+.data-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--color-border-glass);
+  color: var(--color-text);
+}
+.data-table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr:hover td {
+  background: rgba(34,197,94,0.05);
+}
+.align-left   { text-align: left; }
+.align-center { text-align: center; }
+.align-right  { text-align: right; }
+</style>