changes

2026-04-07 17:54:26 +05:00
parent 04adba6682
commit 936b1fb5b0
468 changed files with 43498 additions and 4176 deletions
@@ -0,0 +1,370 @@
+<template>
+  <div class="min-h-screen bg-background-2">
+    <!-- Header -->
+    <div class="border-b border-line-2 bg-layer/50 backdrop-blur-sm sticky top-0 z-10 h-16">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
+        <div class="flex items-center h-full gap-3">
+          <a
+            :href="route('dashboard.custom-forms.index')"
+            class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all"
+          >
+            <DashboardIcon name="arrow-left" size="5" />
+          </a>
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <DashboardIcon name="plus" size="5" class="text-primary" />
+            </div>
+            <div>
+              <h1 class="text-lg font-medium text-foreground">Создание пользовательской формы</h1>
+              <p class="text-xs text-muted-foreground-1">Заполните конфигурацию новой формы</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <!-- Flash Messages -->
+      <FlashMessages />
+
+      <!-- Form Card -->
+      <div class="bg-layer border border-layer-line rounded-lg shadow-xs">
+        <!-- Tabs Navigation -->
+        <div class="border-b border-line-2">
+          <nav class="flex -mb-px">
+            <button
+              v-for="tab in tabs"
+              :key="tab.key"
+              @click="activeTab = tab.key"
+              class="px-6 py-4 text-sm font-medium border-b-2 transition-all"
+              :class="activeTab === tab.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground-1 hover:text-foreground hover:border-line-2'"
+            >
+              <div class="flex items-center gap-2">
+                <DashboardIcon :name="tab.icon" size="4" />
+                {{ tab.label }}
+              </div>
+            </button>
+          </nav>
+        </div>
+
+        <form @submit.prevent="submit" class="p-6">
+          <!-- Tab: Main Info -->
+          <div v-if="activeTab === 'main'" class="space-y-6">
+            <div>
+              <label for="title" class="block text-sm font-medium text-foreground mb-2">
+                Название формы <span class="text-rose-500">*</span>
+              </label>
+              <input
+                id="title"
+                v-model="form.title"
+                type="text"
+                @input="generateFormId"
+                placeholder="Например: Заявка на обучение"
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
+                  errors.title ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              />
+              <p v-if="errors.title" class="mt-1.5 text-xs text-rose-500">{{ errors.title }}</p>
+            </div>
+
+            <div>
+              <label for="form_id" class="block text-sm font-medium text-foreground mb-2">
+                Уникальный ID формы <span class="text-rose-500">*</span>
+              </label>
+              <input
+                id="form_id"
+                v-model="form.form_id"
+                type="text"
+                placeholder="application-form-1234567890"
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
+                  errors.form_id ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              />
+              <p v-if="errors.form_id" class="mt-1.5 text-xs text-rose-500">{{ errors.form_id }}</p>
+              <p class="mt-1.5 text-xs text-muted-foreground-1">
+                Автоматически генерируется из названия. Можно изменить.
+              </p>
+            </div>
+
+            <div>
+              <label for="description" class="block text-sm font-medium text-foreground mb-2">
+                Описание формы <span class="text-rose-500">*</span>
+              </label>
+              <textarea
+                id="description"
+                v-model="form.description"
+                rows="3"
+                placeholder="Опишите назначение этой формы"
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all resize-none',
+                  errors.description ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              ></textarea>
+              <p v-if="errors.description" class="mt-1.5 text-xs text-rose-500">{{ errors.description }}</p>
+            </div>
+
+            <div>
+              <label for="status" class="block text-sm font-medium text-foreground mb-2">
+                Статус формы <span class="text-rose-500">*</span>
+              </label>
+              <select
+                id="status"
+                v-model="form.status"
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
+                  errors.status ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              >
+                <option value="published">Опубликовано</option>
+                <option value="hidden">Скрыто</option>
+              </select>
+              <p v-if="errors.status" class="mt-1.5 text-xs text-rose-500">{{ errors.status }}</p>
+            </div>
+          </div>
+
+          <!-- Tab: Fields -->
+          <div v-if="activeTab === 'fields'" class="space-y-6">
+            <FormBuilder
+              v-model="form.columns"
+              label="Конструктор полей формы"
+            />
+          </div>
+
+          <!-- Tab: Submit Button -->
+          <div v-if="activeTab === 'button'" class="space-y-6">
+            <div>
+              <label for="button" class="block text-sm font-medium text-foreground mb-2">
+                Текст кнопки отправки <span class="text-rose-500">*</span>
+              </label>
+              <input
+                id="button"
+                v-model="form.button"
+                type="text"
+                placeholder="Например: Отправить заявку"
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all',
+                  errors.button ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              />
+              <p v-if="errors.button" class="mt-1.5 text-xs text-rose-500">{{ errors.button }}</p>
+            </div>
+
+            <div>
+              <label for="send_message" class="block text-sm font-medium text-foreground mb-2">
+                Сообщение после отправки <span class="text-rose-500">*</span>
+              </label>
+              <textarea
+                id="send_message"
+                v-model="form.send_message"
+                rows="3"
+                placeholder="Спасибо! Ваша заявка принята."
+                :class="[
+                  'w-full px-4 py-2.5 bg-surface border rounded-lg text-sm text-foreground placeholder-muted-foreground-2 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all resize-none',
+                  errors.send_message ? 'border-rose-500' : 'border-layer-line focus:border-primary'
+                ]"
+              ></textarea>
+              <p v-if="errors.send_message" class="mt-1.5 text-xs text-rose-500">{{ errors.send_message }}</p>
+            </div>
+          </div>
+
+          <!-- Tab: Settings -->
+          <div v-if="activeTab === 'settings'" class="space-y-6">
+            <div class="space-y-4">
+              <div class="flex items-center gap-3">
+                <input
+                  id="personal_data"
+                  v-model="form.settings.personal_data"
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-layer-line text-primary focus:ring-primary"
+                />
+                <label for="personal_data" class="text-sm font-medium text-foreground">
+                  Согласие на обработку персональных данных
+                </label>
+              </div>
+
+              <div class="flex items-center gap-3">
+                <input
+                  id="captcha"
+                  v-model="form.settings.captcha"
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-layer-line text-primary focus:ring-primary"
+                />
+                <label for="captcha" class="text-sm font-medium text-foreground">
+                  Защита CAPTCHA
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tab: Mail Settings -->
+          <div v-if="activeTab === 'mail'" class="space-y-6">
+            <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <label class="block text-sm font-medium text-foreground">
+                  Настройки уведомлений
+                </label>
+                <button
+                  type="button"
+                  @click="addMailRecipient"
+                  class="text-sm text-primary hover:text-primary-hover transition-colors"
+                >
+                  + Добавить получателя
+                </button>
+              </div>
+
+              <div
+                v-for="(recipient, index) in form.mail_settings"
+                :key="index"
+                class="border border-layer-line rounded-lg p-4 space-y-3"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-medium text-foreground">Получатель #{{ index + 1 }}</span>
+                  <button
+                    type="button"
+                    @click="removeMailRecipient(index)"
+                    class="p-1.5 text-muted-foreground-1 hover:text-danger hover:bg-danger/10 rounded transition-all"
+                    title="Удалить"
+                  >
+                    <DashboardIcon name="trash" size="4" />
+                  </button>
+                </div>
+
+                <div class="grid grid-cols-2 gap-3">
+                  <div>
+                    <label class="block text-xs font-medium text-foreground mb-1">Email</label>
+                    <input
+                      v-model="recipient.target"
+                      type="email"
+                      placeholder="email@example.com"
+                      class="w-full px-3 py-2 border border-layer-line rounded-lg text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-foreground mb-1">Тема письма</label>
+                    <input
+                      v-model="recipient.topic"
+                      type="text"
+                      placeholder="Новая заявка"
+                      class="w-full px-3 py-2 border border-layer-line rounded-lg text-sm"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="form.mail_settings.length === 0" class="text-center py-8 text-muted-foreground-1 text-sm">
+                Нет получателей. Добавьте первого получателя уведомлений.
+              </div>
+            </div>
+          </div>
+
+          <!-- Submit Button -->
+          <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-line-2">
+            <a
+              :href="route('dashboard.custom-forms.index')"
+              class="inline-flex items-center gap-2 px-4 py-2.5 bg-surface border border-layer-line text-foreground text-sm font-medium rounded-lg hover:bg-muted-hover transition-all"
+            >
+              Отмена
+            </a>
+            <button
+              type="submit"
+              :disabled="processing"
+              class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <svg v-if="processing" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+              <DashboardIcon v-else name="check" size="4" />
+              {{ processing ? 'Сохранение...' : 'Создать форму' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardIcon from '../Components/DashboardIcon.vue';
+import FlashMessages from '../Components/shared/FlashMessages.vue';
+import FormBuilder from '../Components/ContentBuilder/FormBuilder.vue';
+
+export default {
+  name: 'CustomFormsCreate',
+  components: {
+    DashboardIcon,
+    FlashMessages,
+    FormBuilder
+  },
+
+  data() {
+    return {
+      activeTab: 'main',
+      tabs: [
+        { key: 'main', label: 'Основная информация', icon: 'information-circle' },
+        { key: 'fields', label: 'Поля формы', icon: 'view-columns' },
+        { key: 'button', label: 'Кнопка отправки', icon: 'paper-airplane' },
+        { key: 'settings', label: 'Настройки', icon: 'cog-6-tooth' },
+        { key: 'mail', label: 'Настройки почты', icon: 'envelope' },
+      ],
+      form: {
+        title: '',
+        form_id: '',
+        description: '',
+        status: 'published',
+        button: 'Отправить',
+        send_message: 'Спасибо! Ваша заявка принята.',
+        columns: [],
+        settings: {
+          personal_data: false,
+          captcha: false
+        },
+        mail_settings: []
+      },
+      errors: {},
+      processing: false
+    }
+  },
+
+  mounted() {
+    this.SET_DOCUMENT_TITLE('Создание пользовательской формы');
+  },
+
+  methods: {
+    generateFormId() {
+      if (!this.form.form_id) {
+        this.form.form_id = this.GENERATE_SLUG(this.form.title) + Date.now();
+      }
+    },
+
+    addMailRecipient() {
+      this.form.mail_settings.push({
+        target: '',
+        topic: 'Новая заявка с формы',
+        data: []
+      });
+    },
+
+    removeMailRecipient(index) {
+      this.form.mail_settings.splice(index, 1);
+    },
+
+    submit() {
+      this.processing = true;
+      this.errors = {};
+
+      this.$inertia.post(route('dashboard.custom-forms.store'), this.form, {
+        onFinish: () => {
+          this.processing = false;
+        },
+        onError: (errors) => {
+          this.errors = errors;
+        }
+      });
+    }
+  }
+}
+</script>
@@ -0,0 +1,187 @@
+<template>
+  <div class="min-h-screen bg-background-2">
+    <!-- Header -->
+    <div class="border-b border-line-2 bg-layer/50 backdrop-blur-sm sticky top-0 z-10 h-16">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
+        <div class="flex items-center h-full gap-3">
+          <a :href="route('dashboard.custom-forms.index')" class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all">
+            <DashboardIcon name="arrow-left" size="5" />
+          </a>
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <DashboardIcon name="pencil-square" size="5" class="text-primary" />
+            </div>
+            <div>
+              <h1 class="text-lg font-medium text-foreground">Редактирование формы</h1>
+              <p class="text-xs text-muted-foreground-1">{{ form.title }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <FlashMessages />
+
+      <div class="bg-layer border border-layer-line rounded-lg shadow-xs">
+        <div class="border-b border-line-2">
+          <nav class="flex -mb-px">
+            <button
+              v-for="tab in tabs"
+              :key="tab.key"
+              @click="activeTab = tab.key"
+              class="px-6 py-4 text-sm font-medium border-b-2 transition-all"
+              :class="activeTab === tab.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground-1 hover:text-foreground hover:border-line-2'"
+            >
+              <div class="flex items-center gap-2">
+                <DashboardIcon :name="tab.icon" size="4" />
+                {{ tab.label }}
+              </div>
+            </button>
+          </nav>
+        </div>
+
+        <form @submit.prevent="submit" class="p-6">
+          <div v-if="activeTab === 'main'" class="space-y-6">
+            <div>
+              <label for="title" class="block text-sm font-medium text-foreground mb-2">Название формы <span class="text-rose-500">*</span></label>
+              <input id="title" v-model="data.title" type="text" @input="generateFormId" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm', errors.title ? 'border-rose-500' : 'border-layer-line focus:border-primary']" />
+              <p v-if="errors.title" class="mt-1.5 text-xs text-rose-500">{{ errors.title }}</p>
+            </div>
+            <div>
+              <label for="form_id" class="block text-sm font-medium text-foreground mb-2">Уникальный ID формы <span class="text-rose-500">*</span></label>
+              <input id="form_id" v-model="data.form_id" type="text" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm', errors.form_id ? 'border-rose-500' : 'border-layer-line focus:border-primary']" />
+              <p v-if="errors.form_id" class="mt-1.5 text-xs text-rose-500">{{ errors.form_id }}</p>
+            </div>
+            <div>
+              <label for="description" class="block text-sm font-medium text-foreground mb-2">Описание <span class="text-rose-500">*</span></label>
+              <textarea id="description" v-model="data.description" rows="3" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm resize-none', errors.description ? 'border-rose-500' : 'border-layer-line focus:border-primary']"></textarea>
+              <p v-if="errors.description" class="mt-1.5 text-xs text-rose-500">{{ errors.description }}</p>
+            </div>
+            <div>
+              <label for="status" class="block text-sm font-medium text-foreground mb-2">Статус <span class="text-rose-500">*</span></label>
+              <select id="status" v-model="data.status" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm', errors.status ? 'border-rose-500' : 'border-layer-line focus:border-primary']">
+                <option value="published">Опубликовано</option>
+                <option value="hidden">Скрыто</option>
+              </select>
+              <p v-if="errors.status" class="mt-1.5 text-xs text-rose-500">{{ errors.status }}</p>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'fields'" class="space-y-6">
+            <FormBuilder v-model="data.columns" label="Конструктор полей формы" />
+          </div>
+
+          <div v-if="activeTab === 'button'" class="space-y-6">
+            <div>
+              <label for="button" class="block text-sm font-medium text-foreground mb-2">Текст кнопки <span class="text-rose-500">*</span></label>
+              <input id="button" v-model="data.button" type="text" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm', errors.button ? 'border-rose-500' : 'border-layer-line focus:border-primary']" />
+              <p v-if="errors.button" class="mt-1.5 text-xs text-rose-500">{{ errors.button }}</p>
+            </div>
+            <div>
+              <label for="send_message" class="block text-sm font-medium text-foreground mb-2">Сообщение после отправки <span class="text-rose-500">*</span></label>
+              <textarea id="send_message" v-model="data.send_message" rows="3" :class="['w-full px-4 py-2.5 bg-surface border rounded-lg text-sm resize-none', errors.send_message ? 'border-rose-500' : 'border-layer-line focus:border-primary']"></textarea>
+              <p v-if="errors.send_message" class="mt-1.5 text-xs text-rose-500">{{ errors.send_message }}</p>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'settings'" class="space-y-6">
+            <div class="space-y-4">
+              <div class="flex items-center gap-3">
+                <input id="personal_data" v-model="data.settings.personal_data" type="checkbox" class="h-4 w-4 rounded border-layer-line text-primary focus:ring-primary" />
+                <label for="personal_data" class="text-sm font-medium text-foreground">Согласие на обработку персональных данных</label>
+              </div>
+              <div class="flex items-center gap-3">
+                <input id="captcha" v-model="data.settings.captcha" type="checkbox" class="h-4 w-4 rounded border-layer-line text-primary focus:ring-primary" />
+                <label for="captcha" class="text-sm font-medium text-foreground">Защита CAPTCHA</label>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'mail'" class="space-y-6">
+            <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <label class="block text-sm font-medium text-foreground">Настройки уведомлений</label>
+                <button type="button" @click="addMailRecipient" class="text-sm text-primary hover:text-primary-hover">+ Добавить получателя</button>
+              </div>
+              <div v-for="(recipient, index) in data.mail_settings" :key="index" class="border border-layer-line rounded-lg p-4 space-y-3">
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-medium text-foreground">Получатель #{{ index + 1 }}</span>
+                  <button type="button" @click="removeMailRecipient(index)" class="p-1.5 text-muted-foreground-1 hover:text-danger hover:bg-danger/10 rounded"><DashboardIcon name="trash" size="4" /></button>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                  <div><label class="block text-xs font-medium text-foreground mb-1">Email</label><input v-model="recipient.target" type="email" placeholder="email@example.com" class="w-full px-3 py-2 border border-layer-line rounded-lg text-sm" /></div>
+                  <div><label class="block text-xs font-medium text-foreground mb-1">Тема</label><input v-model="recipient.topic" type="text" placeholder="Новая заявка" class="w-full px-3 py-2 border border-layer-line rounded-lg text-sm" /></div>
+                </div>
+              </div>
+              <div v-if="data.mail_settings.length === 0" class="text-center py-8 text-muted-foreground-1 text-sm">Нет получателей</div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-line-2">
+            <a :href="route('dashboard.custom-forms.index')" class="inline-flex items-center gap-2 px-4 py-2.5 bg-surface border border-layer-line text-foreground text-sm font-medium rounded-lg hover:bg-muted-hover transition-all">Отмена</a>
+            <button type="submit" :disabled="processing" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+              <svg v-if="processing" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /></svg>
+              <DashboardIcon v-else name="check" size="4" />
+              {{ processing ? 'Сохранение...' : 'Сохранить' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardIcon from '../Components/DashboardIcon.vue';
+import FlashMessages from '../Components/shared/FlashMessages.vue';
+import FormBuilder from '../Components/ContentBuilder/FormBuilder.vue';
+
+export default {
+  name: 'CustomFormsEdit',
+  components: { DashboardIcon, FlashMessages, FormBuilder },
+  props: { form: { type: Object, required: true } },
+  data() {
+    return {
+      activeTab: 'main',
+      tabs: [
+        { key: 'main', label: 'Основная информация', icon: 'information-circle' },
+        { key: 'fields', label: 'Поля формы', icon: 'view-columns' },
+        { key: 'button', label: 'Кнопка отправки', icon: 'paper-airplane' },
+        { key: 'settings', label: 'Настройки', icon: 'cog-6-tooth' },
+        { key: 'mail', label: 'Настройки почты', icon: 'envelope' },
+      ],
+      data: {
+        title: this.form.title,
+        form_id: this.form.form_id,
+        description: this.form.description,
+        status: this.form.status,
+        button: this.form.button || 'Отправить',
+        send_message: this.form.send_message || '',
+        columns: this.form.columns || [],
+        settings: {
+          personal_data: (this.form.settings?.personal_data === 1 || this.form.settings?.personal_data === true || this.form.settings?.personal_data === '1'),
+          captcha: (this.form.settings?.captcha === 1 || this.form.settings?.captcha === true || this.form.settings?.captcha === '1'),
+        },
+        mail_settings: this.form.mail_settings || []
+      },
+      errors: {},
+      processing: false
+    }
+  },
+  mounted() { this.SET_DOCUMENT_TITLE(`Редактирование: ${this.form.title}`); },
+  methods: {
+    generateFormId() { if (!this.data.form_id) { this.data.form_id = this.GENERATE_SLUG(this.data.title) + Date.now(); } },
+    addMailRecipient() { this.data.mail_settings.push({ target: '', topic: 'Новая заявка с формы', data: [] }); },
+    removeMailRecipient(index) { this.data.mail_settings.splice(index, 1); },
+    submit() {
+      this.processing = true; this.errors = {};
+      this.$inertia.put(route('dashboard.custom-forms.update', this.form.id), this.data, {
+        onFinish: () => { this.processing = false; },
+        onError: (errors) => { this.errors = errors; }
+      });
+    }
+  }
+}
+</script>
@@ -0,0 +1,268 @@
+<template>
+  <DashboardLayout>
+    <template #header-icon>
+      <DashboardIcon name="squares-plus" size="5" class="text-primary" />
+    </template>
+    <template #header-title>Пользовательские формы</template>
+    <template #header-subtitle>Управление пользовательскими формами</template>
+    <template #header-actions>
+      <a
+        :href="route('dashboard.custom-forms.create')"
+        class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-hover transition-all duration-200 shadow-sm hover:shadow-md"
+      >
+        <DashboardIcon name="plus" size="4" />
+        Создать форму
+      </a>
+    </template>
+
+    <!-- Flash Messages -->
+    <FlashMessages />
+
+    <!-- Filters Card -->
+    <DataFilters title="Фильтры" @reset="resetFilters">
+      <SearchInput
+        v-model="searchQuery"
+        label="Поиск по названию"
+        placeholder="Введите название формы..."
+        @search="search"
+      />
+
+      <SelectFilter
+        v-model="statusQuery"
+        label="Статус"
+        placeholder="Все статусы"
+        @change="filterByStatus"
+      >
+        <option v-for="status in statuses" :key="status.value" :value="status.value">
+          {{ status.label }}
+        </option>
+      </SelectFilter>
+    </DataFilters>
+
+    <!-- Table Card -->
+    <div class="bg-layer border border-layer-line rounded-lg shadow-xs overflow-hidden">
+      <!-- Table Header Stats -->
+      <div class="px-6 py-4 border-b border-line-2 bg-surface/50">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-foreground">
+              Всего: <span class="font-medium">{{ forms.total }}</span>
+            </span>
+            <span class="text-xs text-muted-foreground-1 px-2 py-0.5 bg-primary/10 text-primary rounded-full">
+              {{ forms.data.length }} на странице
+            </span>
+          </div>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              @click="refreshPage"
+              class="p-2 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded-lg transition-all"
+              title="Обновить"
+            >
+              <DashboardIcon name="arrow-path" size="4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-line-2">
+          <thead class="bg-surface/50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                ID
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Название
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Form ID
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Статус
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Дата создания
+              </th>
+              <th class="px-6 py-3 text-right text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Действия
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-line-2">
+            <tr
+              v-for="form in forms.data"
+              :key="form.id"
+              class="group hover:bg-muted-hover/50 transition-all duration-200"
+            >
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span class="text-sm text-muted-foreground-1">{{ form.id }}</span>
+              </td>
+              <td class="px-6 py-4">
+                <div class="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+                  {{ form.title }}
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <code class="text-xs bg-muted px-2 py-1 rounded text-foreground">
+                  {{ form.form_id }}
+                </code>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="getStatusBadgeClass(form.status)">
+                  {{ getStatusLabel(form.status) }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="text-sm text-foreground">{{ FORMAT_DATE(form.created_at, 'full') }}</div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-right">
+                <div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <a
+                    :href="route('dashboard.custom-forms.responses.index', form.id)"
+                    class="p-2 text-muted-foreground-1 hover:text-amber-600 hover:bg-amber-500/10 rounded-lg transition-all"
+                    title="Ответы"
+                  >
+                    <DashboardIcon name="chat-bubble-left-ellipsis" size="4" />
+                  </a>
+                  <a
+                    :href="route('dashboard.custom-forms.edit', form.id)"
+                    class="p-2 text-muted-foreground-1 hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
+                    title="Редактировать"
+                  >
+                    <DashboardIcon name="pencil-square" size="4" />
+                  </a>
+                  <button
+                    @click.prevent="confirmDeleteForm(form)"
+                    class="p-2 text-muted-foreground-1 hover:text-rose-600 hover:bg-rose-500/10 rounded-lg transition-all"
+                    title="Удалить"
+                  >
+                    <DashboardIcon name="trash" size="4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+
+            <!-- Empty State -->
+            <EmptyState
+              v-if="forms.data.length === 0"
+              :columns="6"
+              title="Пользовательские формы не найдены"
+              description="Создайте первую форму или измените параметры поиска"
+              :action-url="route('dashboard.custom-forms.create')"
+              action-text="Создать форму"
+              icon-path="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+            />
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <Pagination :data="forms" />
+    </div>
+  </DashboardLayout>
+</template>
+
+<script>
+import DashboardLayout from '../Components/DashboardLayout.vue';
+import DashboardIcon from '../Components/DashboardIcon.vue';
+import FlashMessages from '../Components/shared/FlashMessages.vue';
+import DataFilters from '../Components/shared/DataFilters.vue';
+import SearchInput from '../Components/shared/SearchInput.vue';
+import SelectFilter from '../Components/shared/SelectFilter.vue';
+import EmptyState from '../Components/shared/EmptyState.vue';
+import Pagination from '../Components/shared/Pagination.vue';
+
+export default {
+  name: 'CustomFormsIndex',
+  components: {
+    DashboardLayout,
+    DashboardIcon,
+    FlashMessages,
+    DataFilters,
+    SearchInput,
+    SelectFilter,
+    EmptyState,
+    Pagination
+  },
+
+  props: {
+    forms: {
+      type: Object,
+      required: true
+    },
+    statuses: {
+      type: Array,
+      default: () => []
+    },
+    filters: {
+      type: Object,
+      default: () => ({
+        search: '',
+        status: ''
+      })
+    }
+  },
+
+  data() {
+    return {
+      searchQuery: this.filters?.search || '',
+      statusQuery: this.filters?.status || ''
+    }
+  },
+
+  mounted() {
+    this.SET_DOCUMENT_TITLE('Пользовательские формы');
+  },
+
+  methods: {
+    getStatusBadgeClass(status) {
+      const classes = {
+        'published': 'inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-success/10 text-success border border-success/20',
+        'hidden': 'inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-muted text-muted-foreground-1 border border-layer-line'
+      };
+      return classes[status] || classes['hidden'];
+    },
+
+    getStatusLabel(status) {
+      const labels = {
+        'published': 'Опубликовано',
+        'hidden': 'Скрыто'
+      };
+      return labels[status] || status;
+    },
+
+    confirmDeleteForm(form) {
+      this.CONFIRM_AND_DELETE(form, 'dashboard.custom-forms.destroy', {
+        message: `Удалить пользовательскую форму "${form.title}"?`
+      });
+    },
+
+    search() {
+      this.INERTIA_FILTER('dashboard.custom-forms.index', {
+        search: this.searchQuery,
+        status: this.statusQuery
+      });
+    },
+
+    filterByStatus() {
+      this.search();
+    },
+
+    resetFilters() {
+      this.RESET_FILTERS(
+        ['searchQuery', 'statusQuery'],
+        'dashboard.custom-forms.index'
+      );
+    },
+
+    refreshPage() {
+      this.INERTIA_FILTER('dashboard.custom-forms.index', {
+        search: this.searchQuery,
+        status: this.statusQuery
+      });
+    }
+  }
+}
+</script>
@@ -0,0 +1,276 @@
+<template>
+  <DashboardLayout>
+    <template #header-icon>
+      <DashboardIcon name="document-text" size="5" class="text-primary" />
+    </template>
+    <template #header-title>Ответы на форму</template>
+    <template #header-subtitle>{{ form.title }}</template>
+    <template #header-actions>
+      <a
+        :href="route('dashboard.custom-forms.edit', form.id)"
+        class="inline-flex items-center gap-2 px-4 py-2 bg-surface border border-layer-line text-foreground text-sm font-medium rounded-lg hover:bg-muted-hover transition-all"
+      >
+        <DashboardIcon name="pencil-square" size="4" />
+        Редактировать форму
+      </a>
+    </template>
+
+    <!-- Flash Messages -->
+    <FlashMessages />
+
+    <!-- Filters -->
+    <DataFilters title="Фильтры" @reset="resetFilters">
+      <SearchInput
+        v-model="searchQuery"
+        label="Поиск по ID"
+        placeholder="Введите ID ответа..."
+        @search="search"
+      />
+
+      <SelectFilter
+        v-model="checkedQuery"
+        label="Статус просмотра"
+        placeholder="Все статусы"
+        @change="filterByChecked"
+      >
+        <option value="1">Просмотренные</option>
+        <option value="0">Непросмотренные</option>
+      </SelectFilter>
+    </DataFilters>
+
+    <!-- Table -->
+    <div class="bg-layer border border-layer-line rounded-lg shadow-xs overflow-hidden">
+      <div class="px-6 py-4 border-b border-line-2 bg-surface/50">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-foreground">
+              Всего: <span class="font-medium">{{ responses.total }}</span>
+            </span>
+            <span class="text-xs text-muted-foreground-1 px-2 py-0.5 bg-primary/10 text-primary rounded-full">
+              {{ responses.data.length }} на странице
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-line-2">
+          <thead class="bg-surface/50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                ID
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Просмотрен
+              </th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Дата
+              </th>
+              <th
+                v-for="col in columns"
+                :key="col.name"
+                class="px-6 py-3 text-left text-xs font-medium text-muted-foreground-1 uppercase tracking-wider"
+              >
+                {{ col.title }}
+              </th>
+              <th class="px-6 py-3 text-right text-xs font-medium text-muted-foreground-1 uppercase tracking-wider">
+                Действия
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-line-2">
+            <tr
+              v-for="response in responses.data"
+              :key="response.id"
+              class="group hover:bg-muted-hover/50 transition-all duration-200"
+            >
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span class="text-sm text-muted-foreground-1">{{ response.id }}</span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <button
+                  @click="toggleChecked(response)"
+                  class="h-5 w-5 rounded border transition-colors"
+                  :class="response.checked ? 'bg-primary border-primary' : 'border-layer-line bg-white'"
+                >
+                  <svg v-if="response.checked" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                  </svg>
+                </button>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="text-sm text-foreground">{{ FORMAT_DATE(response.created_at, 'full') }}</div>
+              </td>
+              <td
+                v-for="col in columns"
+                :key="col.name"
+                class="px-6 py-4 text-sm text-foreground max-w-xs truncate"
+              >
+                {{ formatAnswer(response.answers, col) }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-right">
+                <div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    @click="viewResponse(response)"
+                    class="p-2 text-muted-foreground-1 hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
+                    title="Просмотр"
+                  >
+                    <DashboardIcon name="eye" size="4" />
+                  </button>
+                  <button
+                    @click="confirmDeleteResponse(response)"
+                    class="p-2 text-muted-foreground-1 hover:text-rose-600 hover:bg-rose-500/10 rounded-lg transition-all"
+                    title="Удалить"
+                  >
+                    <DashboardIcon name="trash" size="4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+
+            <!-- Empty State -->
+            <EmptyState
+              v-if="responses.data.length === 0"
+              :columns="3 + columns.length"
+              title="Ответы не найдены"
+              description="Пока нет ответов на эту форму"
+              icon-path="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <Pagination :data="responses" />
+    </div>
+
+    <!-- View Response Modal -->
+    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" @click.self="showModal = false">
+      <div class="bg-layer border border-layer-line rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
+        <div class="px-6 py-4 border-b border-layer-line flex items-center justify-between">
+          <h3 class="text-lg font-medium text-foreground">Ответ #{{ selectedResponse?.id }}</h3>
+          <button @click="showModal = false" class="p-1.5 text-muted-foreground-1 hover:text-foreground hover:bg-muted-hover rounded transition-all">
+            <DashboardIcon name="x-mark" size="5" />
+          </button>
+        </div>
+        <div class="p-6 overflow-y-auto max-h-[60vh] space-y-4">
+          <div v-for="col in columns" :key="col.name" class="border-b border-layer-line pb-3 last:border-0">
+            <dt class="text-sm font-medium text-muted-foreground-1">{{ col.title }}</dt>
+            <dd class="mt-1 text-sm text-foreground">{{ formatAnswer(selectedResponse?.answers || {}, col) }}</dd>
+          </div>
+          <div class="border-b border-layer-line pb-3 last:border-0">
+            <dt class="text-sm font-medium text-muted-foreground-1">Дата отправки</dt>
+            <dd class="mt-1 text-sm text-foreground">{{ FORMAT_DATE(selectedResponse?.created_at, 'full') }}</dd>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>
+
+<script>
+import DashboardLayout from '../Components/DashboardLayout.vue';
+import DashboardIcon from '../Components/DashboardIcon.vue';
+import FlashMessages from '../Components/shared/FlashMessages.vue';
+import DataFilters from '../Components/shared/DataFilters.vue';
+import SearchInput from '../Components/shared/SearchInput.vue';
+import SelectFilter from '../Components/shared/SelectFilter.vue';
+import EmptyState from '../Components/shared/EmptyState.vue';
+import Pagination from '../Components/shared/Pagination.vue';
+
+export default {
+  name: 'FormResponsesIndex',
+  components: {
+    DashboardLayout,
+    DashboardIcon,
+    FlashMessages,
+    DataFilters,
+    SearchInput,
+    SelectFilter,
+    EmptyState,
+    Pagination
+  },
+
+  props: {
+    form: { type: Object, required: true },
+    responses: { type: Object, required: true },
+    columns: { type: Array, default: () => [] },
+    filters: { type: Object, default: () => ({ search: '', checked: '' }) }
+  },
+
+  data() {
+    return {
+      searchQuery: this.filters?.search || '',
+      checkedQuery: this.filters?.checked || '',
+      showModal: false,
+      selectedResponse: null
+    }
+  },
+
+  mounted() {
+    this.SET_DOCUMENT_TITLE(`Ответы: ${this.form.title}`);
+  },
+
+  methods: {
+    formatAnswer(answers, col) {
+      const value = answers?.[col.name];
+      if (!value) return '—';
+
+      // Для choice полей — маппим значения на лейблы
+      if (col.options && Object.keys(col.options).length > 0) {
+        if (Array.isArray(value)) {
+          return value.map(v => col.options[v] || v).join(', ');
+        }
+        return col.options[value] || value;
+      }
+
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+
+      return String(value);
+    },
+
+    toggleChecked(response) {
+      this.$inertia.post(route('dashboard.custom-forms.responses.toggle-checked', {
+        customForm: this.form.id,
+        response: response.id
+      }), {}, {
+        preserveScroll: true
+      });
+    },
+
+    viewResponse(response) {
+      this.selectedResponse = response;
+      this.showModal = true;
+    },
+
+    confirmDeleteResponse(response) {
+      this.CONFIRM_AND_DELETE(response, 'dashboard.custom-forms.responses.destroy', {
+        customForm: this.form.id,
+        message: `Удалить ответ #${response.id}?`
+      });
+    },
+
+    search() {
+      this.$inertia.get(route('dashboard.custom-forms.responses.index', this.form.id), {
+        search: this.searchQuery,
+        checked: this.checkedQuery
+      }, { preserveState: true, preserveScroll: true });
+    },
+
+    filterByChecked() {
+      this.search();
+    },
+
+    resetFilters() {
+      this.searchQuery = '';
+      this.checkedQuery = '';
+      this.$inertia.get(route('dashboard.custom-forms.responses.index', this.form.id), {}, {
+        preserveState: true,
+        preserveScroll: true
+      });
+    }
+  }
+}
+</script>