ваше сообщение коммита

backend/db/migrations/032_create_is_rag_source_table.sql

@@ -0,0 +1,11 @@
+-- Создание справочной таблицы is_rag_source
+CREATE TABLE IF NOT EXISTS is_rag_source (
+    id SERIAL PRIMARY KEY,
+    name VARCHAR(64) NOT NULL UNIQUE
+);
+
+-- Заполнение начальными значениями
+INSERT INTO is_rag_source (name) VALUES
+    ('Да'),
+    ('Нет')
+ON CONFLICT (name) DO NOTHING; 

backend/db/migrations/033_add_is_rag_source_id_to_user_tables.sql

@@ -0,0 +1,2 @@
+ALTER TABLE user_tables
+ADD COLUMN is_rag_source_id INTEGER REFERENCES is_rag_source(id) DEFAULT 2; -- 2 = 'Нет'

backend/routes/tables.js

@@ -23,10 +23,10 @@ router.get('/', async (req, res, next) => {
 // Создать новую таблицу (доступно всем)
 router.post('/', async (req, res, next) => {
   try {
-    const { name, description } = req.body;
+    const { name, description, isRagSourceId } = req.body;
     const result = await db.getQuery()(
-      'INSERT INTO user_tables (name, description) VALUES ($1, $2) RETURNING *',
+      'INSERT INTO user_tables (name, description, is_rag_source_id) VALUES ($1, $2, $3) RETURNING *',
-      [name, description || null]
+      [name, description || null, isRagSourceId || 2]
     );
     res.json(result.rows[0]);
   } catch (err) {
@@ -38,10 +38,12 @@ router.post('/', async (req, res, next) => {
 router.get('/:id', async (req, res, next) => {
   try {
     const tableId = req.params.id;
+    const tableMetaResult = await db.getQuery()('SELECT name, description FROM user_tables WHERE id = $1', [tableId]);
+    const tableMeta = tableMetaResult.rows[0] || { name: '', description: '' };
     const columns = (await db.getQuery()('SELECT * FROM user_columns WHERE table_id = $1 ORDER BY "order" ASC, id ASC', [tableId])).rows;
     const rows = (await db.getQuery()('SELECT * FROM user_rows WHERE table_id = $1 ORDER BY id', [tableId])).rows;
     const cellValues = (await db.getQuery()('SELECT * FROM user_cell_values WHERE row_id IN (SELECT id FROM user_rows WHERE table_id = $1)', [tableId])).rows;
-    res.json({ columns, rows, cellValues });
+    res.json({ name: tableMeta.name, description: tableMeta.description, columns, rows, cellValues });
   } catch (err) {
     next(err);
   }
@@ -181,14 +183,15 @@ router.patch('/column/:columnId', async (req, res, next) => {
 router.patch('/:id', async (req, res, next) => {
   try {
     const tableId = req.params.id;
-    const { name, description } = req.body;
+    const { name, description, isRagSourceId } = req.body;
     const result = await db.getQuery()(
       `UPDATE user_tables SET 
         name = COALESCE($1, name),
         description = COALESCE($2, description),
+        is_rag_source_id = COALESCE($3, is_rag_source_id),
         updated_at = NOW()
-      WHERE id = $3 RETURNING *`,
+      WHERE id = $4 RETURNING *`,
-      [name, description, tableId]
+      [name, description, isRagSourceId, tableId]
     );
     res.json(result.rows[0]);
   } catch (err) {

frontend/src/components/tables/CreateTableModal.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="create-table-modal">
-    <div class="modal-header">
-      <h3>Создать новую таблицу</h3>
-      <button class="close-btn" @click="$emit('close')">×</button>
-    </div>
-    <form @submit.prevent="createTable">
-      <div class="form-group">
-        <label>Название таблицы</label>
-        <input v-model="name" required maxlength="255" />
-      </div>
-      <div class="form-group">
-        <label>Описание</label>
-        <textarea v-model="description" maxlength="500"></textarea>
-      </div>
-      <div class="modal-actions">
-        <button class="btn btn-success" type="submit" :disabled="isLoading">Создать</button>
-        <button class="btn btn-secondary" type="button" @click="$emit('close')">Отмена</button>
-      </div>
-      <div v-if="error" class="error">{{ error }}</div>
-    </form>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import tablesService from '../../services/tablesService';
-const emit = defineEmits(['close', 'table-created']);
-const name = ref('');
-const description = ref('');
-const isLoading = ref(false);
-const error = ref('');
-
-async function createTable() {
-  if (!name.value.trim()) return;
-  isLoading.value = true;
-  error.value = '';
-  try {
-    await tablesService.createTable({ name: name.value, description: description.value });
-    emit('table-created');
-    emit('close');
-  } catch (e) {
-    error.value = 'Ошибка создания таблицы';
-  } finally {
-    isLoading.value = false;
-  }
-}
-</script>
-
-<style scoped>
-.create-table-modal {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
-  padding: 28px 22px 18px 22px;
-  max-width: 400px;
-  margin: 40px auto;
-  position: relative;
-}
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #bbb;
-  transition: color 0.2s;
-}
-.close-btn:hover {
-  color: #333;
-}
-.form-group {
-  margin-bottom: 16px;
-}
-input, textarea {
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 1rem;
-}
-.modal-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 10px;
-}
-.btn {
-  padding: 7px 18px;
-  border-radius: 6px;
-  font-size: 1rem;
-  border: none;
-  cursor: pointer;
-}
-.btn-success {
-  background: #28a745;
-  color: #fff;
-}
-.btn-secondary {
-  background: #bbb;
-  color: #fff;
-}
-.error {
-  color: #dc3545;
-  margin-top: 10px;
-}
-</style> 

frontend/src/components/tables/DynamicTablesModal.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="dynamic-tables-modal">
-    <div class="modal-header">
-      <h2>Пользовательские таблицы</h2>
-      <button class="close-btn" @click="closeModal">×</button>
-    </div>
-    <UserTablesList
-      :selected-table-id="selectedTableId"
-      @update:selected-table-id="val => selectedTableId = val"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import UserTablesList from './UserTablesList.vue';
-
-const selectedTableId = ref(null);
-
-function closeModal() {
-  selectedTableId.value = null;
-  // эмитим наружу, чтобы закрыть модалку
-  // (если используется <DynamicTablesModal @close=... />)
-  // иначе просто убираем модалку
-  // eslint-disable-next-line vue/custom-event-name-casing
-  // $emit('close') не работает в <script setup>, используем defineEmits
-  emit('close');
-}
-const emit = defineEmits(['close']);
-</script>
-
-<style scoped>
-.dynamic-tables-modal {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
-  padding: 32px 24px 24px 24px;
-  max-width: 900px;
-  margin: 40px auto;
-  position: relative;
-  overflow-x: auto;
-}
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
-}
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  cursor: pointer;
-  color: #bbb;
-  transition: color 0.2s;
-}
-.close-btn:hover {
-  color: #333;
-}
-.tables-list-block {
-  margin-bottom: 18px;
-}
-.tables-list {
-  list-style: none;
-  padding: 0;
-}
-.tables-list li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-}
-.btn {
-  margin-left: 12px;
-}
-.loading {
-  color: #888;
-  margin: 16px 0;
-}
-.user-table-block {
-  margin-bottom: 32px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 18px 12px;
-  background: #fafbfc;
-}
-.user-table-full {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-.user-table-full th, .user-table-full td {
-  border: 1px solid #e0e0e0;
-  padding: 6px 10px;
-  text-align: left;
-}
-.user-table-full th {
-  background: #f5f5f5;
-}
-</style> 

frontend/src/components/tables/UserTableView.vue

@@ -1,4 +1,8 @@
 <template>
+  <div class="user-table-header" v-if="tableMeta">
+    <h2>{{ tableMeta.name }}</h2>
+    <div class="table-desc">{{ tableMeta.description }}</div>
+  </div>
   <div class="notion-table-wrapper">
     <table class="notion-table">
       <thead>
@@ -50,6 +54,7 @@ const props = defineProps({ tableId: Number });
 const columns = ref([]);
 const rows = ref([]);
 const cellValues = ref([]);
+const tableMeta = ref(null);
 
 // Для редактирования ячеек
 const editing = ref({ rowId: null, colId: null });
@@ -62,7 +67,7 @@ function startEdit(row, col) {
   editValue.value = getCellValue(row, col) || '';
 }
 function saveEdit(row, col) {
-  tablesService.saveCell({ rowId: row.id, columnId: col.id, value: editValue.value }).then(fetchTable);
+  tablesService.saveCell({ row_id: row.id, column_id: col.id, value: editValue.value }).then(fetchTable);
   editing.value = { rowId: null, colId: null };
 }
 function cancelEdit() {
@@ -104,6 +109,7 @@ async function fetchTable() {
   columns.value = data.columns;
   rows.value = data.rows;
   cellValues.value = data.cellValues;
+  tableMeta.value = { name: data.name, description: data.description };
 }
 fetchTable();
 </script>
@@ -152,4 +158,20 @@ fetchTable();
   border-radius: 4px;
   padding: 0.2em 0.4em;
 }
+.user-table-header {
+  margin-bottom: 1.2em;
+  padding: 1em 1.2em 0.5em 1.2em;
+  background: #f8f9fa;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 1px solid #ececec;
+}
+.user-table-header h2 {
+  margin: 0 0 0.2em 0;
+  font-size: 1.3em;
+  font-weight: 700;
+}
+.table-desc {
+  color: #888;
+  font-size: 1em;
+}
 </style> 

frontend/src/components/tables/UserTablesList.vue

@@ -44,6 +44,7 @@
 
 <script setup>
 import { ref, onMounted, watch, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import UserTableView from './UserTableView.vue';
 import tablesService from '../../services/tablesService';
 
@@ -52,6 +53,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:selected-table-id']);
 
+const router = useRouter();
+
 const tables = ref([]);
 const showDeleteModal = ref(false);
 const selectedTable = ref(null);
@@ -62,22 +65,12 @@ async function fetchTables() {
 onMounted(fetchTables);
 
 function selectTable(table) {
-  if (props.selectedTableId === table.id) return;
+  router.push({ name: 'user-table-view', params: { id: table.id } });
-  if (props.selectedTableId) {
-    emit('update:selected-table-id', null);
-    nextTick(() => {
-      emit('update:selected-table-id', table.id);
-    });
-  } else {
-    emit('update:selected-table-id', table.id);
-  }
 }
 function createTable() {
-  const name = prompt('Название таблицы');
+  router.push({ name: 'create-table' });
-  if (name) {
-    tablesService.createTable({ name }).then(fetchTables);
-  }
 }
+
 function renameTable(table) {
   const name = prompt('Новое имя', table.name);
   if (name && name !== table.name) {

frontend/src/router/index.js

@@ -64,6 +64,34 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/tables',
+    name: 'tables-list',
+    component: () => import('../views/tables/TablesListView.vue')
+  },
+  {
+    path: '/tables/create',
+    name: 'create-table',
+    component: () => import('../views/tables/CreateTableView.vue')
+  },
+  {
+    path: '/tables/:id',
+    name: 'user-table-view',
+    component: () => import('../views/tables/TableView.vue'),
+    props: true
+  },
+  {
+    path: '/tables/:id/edit',
+    name: 'edit-table',
+    component: () => import('../views/tables/EditTableView.vue'),
+    props: true
+  },
+  {
+    path: '/tables/:id/delete',
+    name: 'delete-table',
+    component: () => import('../views/tables/DeleteTableView.vue'),
+    props: true
+  },
 ];
 
 const router = createRouter({

frontend/src/views/CrmView.vue

@@ -24,11 +24,10 @@
       <ContactDetails v-if="showContactDetails" :contact="selectedContact" @close="showContactDetails = false" @contact-deleted="onContactDeleted" />
       <div class="crm-tables-block">
         <h2>Таблицы</h2>
-        <button class="btn btn-info" @click="showTables = true">
+        <button class="btn btn-info" @click="goToTables">
           <i class="fas fa-table"></i> Подробнее
         </button>
       </div>
-      <DynamicTablesModal v-if="showTables" @close="showTables = false" />
     </div>
   </BaseLayout>
 </template>
@@ -45,7 +44,6 @@ import ContactTable from '../components/ContactTable.vue';
 import contactsService from '../services/contactsService.js';
 import DleManagement from '../components/DleManagement.vue';
 import ContactDetails from '../components/ContactDetails.vue';
-import DynamicTablesModal from '../components/tables/DynamicTablesModal.vue';
 
 // Определяем props
 const props = defineProps({
@@ -158,6 +156,10 @@ function onContactDeleted() {
   showContactDetails.value = false;
   loadContacts();
 }
+
+function goToTables() {
+  router.push({ name: 'tables-list' });
+}
 </script>
 
 <style scoped>

frontend/src/views/settings/AiAssistantSettings.vue

@@ -9,11 +9,13 @@
       <label>Модель</label>
       <input v-model="settings.model" placeholder="qwen2.5" />
       <label>Выбранные RAG-таблицы</label>
-      <select v-model="settings.selected_rag_tables" multiple>
+      <ul class="rag-table-list">
-        <option v-for="table in userTables" :key="table.id" :value="table.id">
+        <li v-for="table in ragTables" :key="table.id">
+          <router-link :to="{ name: 'user-table-view', params: { id: table.id } }" class="rag-table-link">
             {{ table.name }}
-        </option>
+          </router-link>
-      </select>
+        </li>
+      </ul>
       <label>Набор правил</label>
       <div class="rules-row">
         <select v-model="settings.rules_id">
@@ -57,6 +59,7 @@ const emit = defineEmits(['cancel']);
 const settings = ref({ system_prompt: '', model: '', selected_rag_tables: [], languages: [], rules_id: null });
 const languagesInput = ref('');
 const userTables = ref([]);
+const ragTables = computed(() => userTables.value.filter(t => t.is_rag_source_id === 1));
 const rulesList = ref([]);
 const showRuleEditor = ref(false);
 const editingRule = ref(null);
@@ -208,4 +211,18 @@ button[type="button"] {
   color: #c00;
   margin-top: 0.5rem;
 }
+.rag-table-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1em 0;
+}
+.rag-table-link {
+  color: #2ecc40;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: 500;
+}
+.rag-table-link:hover {
+  color: #27ae38;
+}
 </style> 

frontend/src/views/tables/CreateTableView.vue

@@ -0,0 +1,111 @@
+<template>
+  <BaseLayout>
+    <div class="create-table-container">
+      <h2>Создать новую таблицу</h2>
+      <form @submit.prevent="handleCreateTable" class="create-table-form">
+        <label>Название таблицы</label>
+        <input v-model="newTableName" required placeholder="Введите название" />
+        <label>Описание</label>
+        <textarea v-model="newTableDescription" placeholder="Описание (необязательно)" />
+        <label>Источник для ИИ ассистента</label>
+        <select v-model="newTableIsRagSourceId" required>
+          <option :value="1">Да</option>
+          <option :value="2">Нет</option>
+        </select>
+        <div class="form-actions">
+          <button type="submit">Создать</button>
+          <button type="button" @click="goBack">Отмена</button>
+        </div>
+      </form>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import BaseLayout from '../../components/BaseLayout.vue';
+import tablesService from '../../services/tablesService';
+
+const router = useRouter();
+const newTableName = ref('');
+const newTableDescription = ref('');
+const newTableIsRagSourceId = ref(2);
+
+async function handleCreateTable() {
+  if (!newTableName.value) return;
+  await tablesService.createTable({
+    name: newTableName.value,
+    description: newTableDescription.value,
+    isRagSourceId: newTableIsRagSourceId.value
+  });
+  router.push({ name: 'tables-list' });
+}
+function goBack() {
+  router.back();
+}
+</script>
+
+<style scoped>
+.create-table-container {
+  max-width: 500px;
+  margin: 2rem auto;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+  padding: 2rem 1.5rem;
+}
+.create-table-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1em;
+}
+.create-table-form label {
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+.create-table-form input,
+.create-table-form textarea,
+.create-table-form select {
+  border: 1px solid #ececec;
+  border-radius: 7px;
+  padding: 0.5em 0.8em;
+  font-size: 1em;
+  background: #fafbfc;
+}
+.create-table-form textarea {
+  min-height: 60px;
+  resize: vertical;
+}
+.form-actions {
+  display: flex;
+  gap: 1em;
+  margin-top: 1.2em;
+}
+.form-actions button[type="submit"] {
+  background: #2ecc40;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.form-actions button[type="submit"]:hover {
+  background: #27ae38;
+}
+.form-actions button[type="button"] {
+  background: #eaeaea;
+  color: #333;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.form-actions button[type="button"]:hover {
+  background: #d5d5d5;
+}
+</style> 

frontend/src/views/tables/DeleteTableView.vue

@@ -0,0 +1,58 @@
+<template>
+  <BaseLayout>
+    <div class="delete-table-confirm">
+      <h2>Удалить таблицу?</h2>
+      <p>Вы уверены, что хотите удалить эту таблицу? Это действие необратимо.</p>
+      <div class="actions">
+        <button class="danger" @click="remove">Удалить</button>
+        <button @click="cancel">Отмена</button>
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import BaseLayout from '../../components/BaseLayout.vue';
+import axios from 'axios';
+const $route = useRoute();
+const router = useRouter();
+
+async function remove() {
+  await axios.delete(`/api/tables/${$route.params.id}`);
+  router.push({ name: 'tables-list' });
+}
+function cancel() {
+  router.push({ name: 'user-table-view', params: { id: $route.params.id } });
+}
+</script>
+<style scoped>
+.delete-table-confirm {
+  max-width: 400px;
+  margin: 2em auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+  padding: 2em 1.5em;
+  text-align: center;
+}
+.actions {
+  display: flex;
+  gap: 1em;
+  margin-top: 2em;
+  justify-content: center;
+}
+.danger {
+  background: #ff4d4f;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background 0.2s;
+}
+.danger:hover {
+  background: #d9363e;
+}
+</style> 

frontend/src/views/tables/EditTableView.vue

@@ -0,0 +1,81 @@
+<template>
+  <BaseLayout>
+    <div class="edit-table-form">
+      <h2>Редактировать таблицу</h2>
+      <form @submit.prevent="save">
+        <label>Название</label>
+        <input v-model="name" required />
+        <label>Описание</label>
+        <textarea v-model="description" />
+        <label>Источник для ИИ ассистента</label>
+        <select v-model="isRagSourceId" required>
+          <option :value="1">Да</option>
+          <option :value="2">Нет</option>
+        </select>
+        <div class="actions">
+          <button type="submit">Сохранить</button>
+          <button type="button" @click="cancel">Отмена</button>
+        </div>
+      </form>
+    </div>
+  </BaseLayout>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import BaseLayout from '../../components/BaseLayout.vue';
+import axios from 'axios';
+const $route = useRoute();
+const router = useRouter();
+const name = ref('');
+const description = ref('');
+const isRagSourceId = ref(2);
+
+onMounted(async () => {
+  const { data } = await axios.get(`/api/tables/${$route.params.id}`);
+  name.value = data.name;
+  description.value = data.description;
+  isRagSourceId.value = data.is_rag_source_id || 2;
+});
+
+async function save() {
+  await axios.patch(`/api/tables/${$route.params.id}`, {
+    name: name.value,
+    description: description.value,
+    isRagSourceId: isRagSourceId.value
+  });
+  router.push({ name: 'user-table-view', params: { id: $route.params.id } });
+}
+function cancel() {
+  router.push({ name: 'user-table-view', params: { id: $route.params.id } });
+}
+</script>
+<style scoped>
+.edit-table-form {
+  max-width: 400px;
+  margin: 2em auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+  padding: 2em 1.5em;
+}
+.edit-table-form label {
+  display: block;
+  margin-top: 1em;
+  font-weight: 500;
+}
+.edit-table-form input, .edit-table-form textarea {
+  width: 100%;
+  margin-top: 0.5em;
+  padding: 0.5em;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  font-size: 1em;
+}
+.actions {
+  display: flex;
+  gap: 1em;
+  margin-top: 2em;
+  justify-content: flex-end;
+}
+</style> 

frontend/src/views/tables/TableView.vue

@@ -0,0 +1,112 @@
+<template>
+  <BaseLayout>
+    <div class="tableview-header-row">
+      <button class="nav-btn" @click="goToTables">Таблицы</button>
+      <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
+      <button class="close-btn" @click="closeTable">Закрыть</button>
+      <button class="action-btn" @click="goToEdit">Редактировать</button>
+      <button class="danger-btn" @click="goToDelete">Удалить</button>
+    </div>
+    <UserTableView :table-id="Number($route.params.id)" />
+  </BaseLayout>
+</template>
+
+<script setup>
+import BaseLayout from '../../components/BaseLayout.vue';
+import UserTableView from '../../components/tables/UserTableView.vue';
+import { useRoute, useRouter } from 'vue-router';
+const $route = useRoute();
+const router = useRouter();
+
+function closeTable() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push({ name: 'home' });
+  }
+}
+
+function goToEdit() {
+  router.push({ name: 'edit-table', params: { id: $route.params.id } });
+}
+
+function goToDelete() {
+  router.push({ name: 'delete-table', params: { id: $route.params.id } });
+}
+
+function goToTables() {
+  router.push({ name: 'tables-list' });
+}
+
+function goToCreate() {
+  router.push({ name: 'create-table' });
+}
+</script>
+
+<style scoped>
+.tableview-header-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 1.2em 0 0.5em 0;
+}
+.close-btn {
+  background: #ff4d4f;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background 0.2s;
+}
+.close-btn:hover {
+  background: #d9363e;
+}
+.action-btn {
+  background: #2ecc40;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1em;
+  margin-left: 0.7em;
+  transition: background 0.2s;
+}
+.action-btn:hover {
+  background: #27ae38;
+}
+.danger-btn {
+  background: #ff4d4f;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1em;
+  margin-left: 0.7em;
+  transition: background 0.2s;
+}
+.danger-btn:hover {
+  background: #d9363e;
+}
+.nav-btn {
+  background: #eaeaea;
+  color: #333;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5em 1.2em;
+  font-weight: 500;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background 0.2s;
+  margin-right: 0.7em;
+}
+.nav-btn:hover {
+  background: #d5d5d5;
+}
+</style> 

frontend/src/views/tables/TablesListView.vue

@@ -0,0 +1,11 @@
+<template>
+  <BaseLayout>
+    <h2>Список таблиц</h2>
+    <UserTablesList />
+  </BaseLayout>
+</template>
+
+<script setup>
+import BaseLayout from '../../components/BaseLayout.vue';
+import UserTablesList from '../../components/tables/UserTablesList.vue';
+</script>