init

frontend/src/views/AccountView.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="mx-auto max-w-3xl">
+    <!-- Not logged in -->
+    <div v-if="!clientStore.isAuthenticated" class="text-center py-16">
+      <h1 class="text-2xl font-bold text-gray-900 mb-2">Личный кабинет</h1>
+      <p class="text-gray-500 mb-6">Войдите или зарегистрируйтесь, чтобы увидеть свои заказы</p>
+
+      <div class="mx-auto max-w-sm card">
+        <div class="flex gap-2 mb-4">
+          <button @click="mode = 'login'"
+            :class="['flex-1 rounded-lg py-2 text-sm font-medium transition-colors', mode === 'login' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600']"
+          >Вход</button>
+          <button @click="mode = 'register'"
+            :class="['flex-1 rounded-lg py-2 text-sm font-medium transition-colors', mode === 'register' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600']"
+          >Регистрация</button>
+        </div>
+
+        <form v-if="mode === 'login'" @submit.prevent="handleLogin" class="space-y-3">
+          <input v-model="authForm.email" type="email" required class="input-field" placeholder="Email" />
+          <input v-model="authForm.password" type="password" required class="input-field" placeholder="Пароль" />
+          <p v-if="authError" class="text-sm text-red-600">{{ authError }}</p>
+          <button type="submit" :disabled="authLoading" class="btn-primary w-full">{{ authLoading ? '...' : 'Войти' }}</button>
+        </form>
+
+        <form v-else @submit.prevent="handleRegister" class="space-y-3">
+          <input v-model="authForm.name" required class="input-field" placeholder="Имя" />
+          <input v-model="authForm.email" type="email" required class="input-field" placeholder="Email" />
+          <input v-model="authForm.password" type="password" required minlength="6" class="input-field" placeholder="Пароль (мин. 6 символов)" />
+          <input v-model="authForm.phone" class="input-field" placeholder="Телефон (необязательно)" />
+          <input v-model="authForm.company" class="input-field" placeholder="Компания (необязательно)" />
+          <p v-if="authError" class="text-sm text-red-600">{{ authError }}</p>
+          <button type="submit" :disabled="authLoading" class="btn-primary w-full">{{ authLoading ? '...' : 'Зарегистрироваться' }}</button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Logged in -->
+    <div v-else>
+      <div class="mb-6 flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900">Личный кабинет</h1>
+          <p class="text-sm text-gray-500">{{ clientStore.user?.email }}</p>
+        </div>
+        <div class="flex items-center gap-3">
+          <router-link to="/" class="btn-secondary !py-1.5 !px-3 !text-xs">Калькулятор</router-link>
+          <button @click="handleLogout" class="text-sm text-gray-500 hover:text-gray-700">Выход</button>
+        </div>
+      </div>
+
+      <!-- Profile card -->
+      <div class="card mb-6">
+        <h2 class="text-sm font-bold uppercase text-gray-500 mb-3">Профиль</h2>
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <span class="text-gray-500">Имя:</span>
+            <span class="ml-1 font-medium text-gray-900">{{ clientStore.user?.name }}</span>
+          </div>
+          <div>
+            <span class="text-gray-500">Email:</span>
+            <span class="ml-1 font-medium text-gray-900">{{ clientStore.user?.email }}</span>
+          </div>
+          <div v-if="clientStore.user?.phone">
+            <span class="text-gray-500">Телефон:</span>
+            <span class="ml-1 font-medium text-gray-900">{{ clientStore.user?.phone }}</span>
+          </div>
+          <div v-if="clientStore.user?.company">
+            <span class="text-gray-500">Компания:</span>
+            <span class="ml-1 font-medium text-gray-900">{{ clientStore.user?.company }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Orders -->
+      <div>
+        <h2 class="text-sm font-bold uppercase text-gray-500 mb-3">Мои заказы</h2>
+
+        <div v-if="ordersLoading" class="text-gray-400 text-sm">Загрузка...</div>
+
+        <div v-else-if="orders.length === 0" class="text-center py-10 text-gray-400">
+          <p class="mb-2">Заказов пока нет</p>
+          <router-link to="/" class="text-primary-600 hover:text-primary-700 text-sm font-medium">Рассчитать стоимость</router-link>
+        </div>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="o in orders" :key="o.order_id"
+            class="rounded-xl border border-gray-200 bg-white p-4 hover:shadow-sm transition-shadow"
+          >
+            <div class="flex items-start justify-between">
+              <div>
+                <div class="flex items-center gap-3 mb-1">
+                  <span class="text-sm font-bold text-gray-900">{{ o.order_id }}</span>
+                  <span :class="statusClass(o.status)" class="rounded-full px-2.5 py-0.5 text-xs font-medium">
+                    {{ statusLabel(o.status) }}
+                  </span>
+                </div>
+                <div class="text-xs text-gray-500 space-x-2">
+                  <span v-if="o.material_name">{{ o.material_name }}</span>
+                  <span v-if="o.quantity">&middot; {{ o.quantity }} шт</span>
+                  <span v-if="o.file_name">&middot; {{ o.file_name }}</span>
+                  <span>&middot; {{ o.delivery_method === 'pickup' ? 'Самовывоз' : 'Доставка' }}</span>
+                </div>
+                <div class="text-xs text-gray-400 mt-1">{{ formatDate(o.created_at) }}</div>
+              </div>
+              <div class="text-right">
+                <p class="text-lg font-bold text-gray-900">{{ fmt(o.total_rub) }} &#8381;</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useClientStore } from '../stores/client'
+
+const router = useRouter()
+const clientStore = useClientStore()
+
+const mode = ref('login')
+const authForm = reactive({ email: '', password: '', name: '', phone: '', company: '' })
+const authError = ref('')
+const authLoading = ref(false)
+
+const orders = ref([])
+const ordersLoading = ref(false)
+
+onMounted(() => {
+  if (clientStore.isAuthenticated) {
+    clientStore.fetchMe()
+    loadOrders()
+  }
+})
+
+watch(() => clientStore.isAuthenticated, (val) => {
+  if (val) loadOrders()
+})
+
+async function loadOrders() {
+  ordersLoading.value = true
+  try {
+    orders.value = await clientStore.fetchOrders()
+  } finally {
+    ordersLoading.value = false
+  }
+}
+
+async function handleLogin() {
+  authLoading.value = true
+  authError.value = ''
+  try {
+    await clientStore.login(authForm.email, authForm.password)
+  } catch (e) {
+    authError.value = e.response?.data?.detail || 'Ошибка входа'
+  } finally {
+    authLoading.value = false
+  }
+}
+
+async function handleRegister() {
+  authLoading.value = true
+  authError.value = ''
+  try {
+    await clientStore.register({
+      email: authForm.email,
+      password: authForm.password,
+      name: authForm.name,
+      phone: authForm.phone || null,
+      company: authForm.company || null,
+    })
+  } catch (e) {
+    authError.value = e.response?.data?.detail || 'Ошибка регистрации'
+  } finally {
+    authLoading.value = false
+  }
+}
+
+function handleLogout() {
+  clientStore.logout()
+}
+
+const statuses = {
+  pending: 'Новый', confirmed: 'Подтверждён', printing: 'Печатается',
+  ready: 'Готов', delivered: 'Выдан', cancelled: 'Отменён',
+}
+function statusLabel(s) { return statuses[s] || s }
+
+function statusClass(s) {
+  const map = {
+    pending: 'bg-amber-100 text-amber-700', confirmed: 'bg-blue-100 text-blue-700',
+    printing: 'bg-purple-100 text-purple-700', ready: 'bg-green-100 text-green-700',
+    delivered: 'bg-gray-100 text-gray-600', cancelled: 'bg-red-100 text-red-700',
+  }
+  return map[s] || 'bg-gray-100 text-gray-600'
+}
+
+function formatDate(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function fmt(n) {
+  return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(n || 0)
+}
+</script>

frontend/src/views/TrackView.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="mx-auto max-w-md py-8">
+    <h1 class="text-2xl font-bold text-gray-900 mb-2 text-center">Проверка заказа</h1>
+    <p class="text-sm text-gray-500 text-center mb-8">Введите номер заказа, чтобы узнать его статус</p>
+
+    <form @submit.prevent="checkOrder" class="card">
+      <div class="mb-4">
+        <label class="mb-1.5 block text-sm font-medium text-gray-700">Номер заказа</label>
+        <input
+          v-model="orderId"
+          required
+          class="input-field text-center text-lg tracking-wider"
+          placeholder="ORD-2026-0001"
+        />
+      </div>
+      <button type="submit" :disabled="loading" class="btn-primary w-full">
+        {{ loading ? 'Проверяем...' : 'Проверить' }}
+      </button>
+    </form>
+
+    <!-- Result -->
+    <div v-if="result" class="mt-6 card text-center">
+      <div class="mb-3">
+        <span :class="statusClass(result.status)" class="inline-block rounded-full px-4 py-1.5 text-sm font-semibold">
+          {{ statusLabel(result.status) }}
+        </span>
+      </div>
+      <p class="text-sm text-gray-700 font-medium mb-1">{{ result.order_id }}</p>
+      <p class="text-xs text-gray-400">Дата оформления: {{ formatDate(result.created_at) }}</p>
+
+      <div class="mt-5 border-t border-gray-100 pt-4">
+        <div class="flex justify-center gap-1">
+          <div v-for="s in steps" :key="s.key" class="flex flex-col items-center flex-1">
+            <div :class="[
+              'h-3 w-3 rounded-full mb-1.5',
+              stepReached(result.status, s.key) ? stepColor(s.key) : 'bg-gray-200'
+            ]"></div>
+            <span :class="['text-[10px] font-medium', stepReached(result.status, s.key) ? 'text-gray-700' : 'text-gray-300']">
+              {{ s.label }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Error -->
+    <div v-if="error" class="mt-6 card text-center">
+      <p class="text-sm text-red-600">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import api from '../api/client'
+
+const orderId = ref('')
+const result = ref(null)
+const error = ref('')
+const loading = ref(false)
+
+const steps = [
+  { key: 'pending', label: 'Новый' },
+  { key: 'confirmed', label: 'Подтверждён' },
+  { key: 'printing', label: 'Печать' },
+  { key: 'ready', label: 'Готов' },
+  { key: 'delivered', label: 'Выдан' },
+]
+
+const statusOrder = ['pending', 'confirmed', 'printing', 'ready', 'delivered']
+
+function stepReached(current, step) {
+  if (current === 'cancelled') return step === 'pending'
+  const ci = statusOrder.indexOf(current)
+  const si = statusOrder.indexOf(step)
+  return si <= ci
+}
+
+function stepColor(s) {
+  const map = {
+    pending: 'bg-amber-500', confirmed: 'bg-blue-500',
+    printing: 'bg-purple-500', ready: 'bg-green-500', delivered: 'bg-gray-500',
+  }
+  return map[s] || 'bg-gray-500'
+}
+
+const statusLabels = {
+  pending: 'Новый', confirmed: 'Подтверждён', printing: 'Печатается',
+  ready: 'Готов к выдаче', delivered: 'Выдан', cancelled: 'Отменён',
+}
+function statusLabel(s) { return statusLabels[s] || s }
+
+function statusClass(s) {
+  const map = {
+    pending: 'bg-amber-100 text-amber-700', confirmed: 'bg-blue-100 text-blue-700',
+    printing: 'bg-purple-100 text-purple-700', ready: 'bg-green-100 text-green-700',
+    delivered: 'bg-gray-100 text-gray-600', cancelled: 'bg-red-100 text-red-700',
+  }
+  return map[s] || 'bg-gray-100 text-gray-600'
+}
+
+function formatDate(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+async function checkOrder() {
+  loading.value = true
+  error.value = ''
+  result.value = null
+  try {
+    const { data } = await api.get(`/track/${orderId.value.trim()}`)
+    result.value = data
+  } catch (e) {
+    if (e.response?.status === 404) {
+      error.value = 'Заказ с таким номером не найден'
+    } else {
+      error.value = 'Ошибка проверки. Попробуйте позже.'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>

frontend/src/views/admin/AdminClients.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold text-gray-900">Клиенты</h1>
+    </div>
+
+    <div v-if="loading" class="text-gray-500">Загрузка...</div>
+
+    <div v-else-if="clients.length === 0" class="text-center py-12 text-gray-400">Клиентов пока нет</div>
+
+    <div v-else class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+      <table class="w-full text-sm">
+        <thead class="border-b border-gray-200 bg-gray-50">
+          <tr>
+            <th class="px-4 py-3 text-left font-semibold text-gray-600">Клиент</th>
+            <th class="px-4 py-3 text-left font-semibold text-gray-600">Контакты</th>
+            <th class="px-4 py-3 text-right font-semibold text-gray-600">Заказов</th>
+            <th class="px-4 py-3 text-right font-semibold text-gray-600">Потрачено</th>
+            <th class="px-4 py-3 text-center font-semibold text-gray-600">Активен</th>
+            <th class="px-4 py-3 text-left font-semibold text-gray-600">Дата</th>
+            <th class="px-4 py-3 text-right font-semibold text-gray-600">Действия</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100">
+          <tr v-for="c in clients" :key="c.id" class="hover:bg-gray-50 transition-colors cursor-pointer" @click="openClient(c)">
+            <td class="px-4 py-3">
+              <div class="font-medium text-gray-900">{{ c.name }}</div>
+              <div v-if="c.company" class="text-xs text-gray-400">{{ c.company }}</div>
+            </td>
+            <td class="px-4 py-3">
+              <div class="text-gray-700">{{ c.email }}</div>
+              <div v-if="c.phone" class="text-xs text-gray-400">{{ c.phone }}</div>
+            </td>
+            <td class="px-4 py-3 text-right font-medium text-gray-900">{{ c.orders_count }}</td>
+            <td class="px-4 py-3 text-right font-medium text-gray-900">{{ fmt(c.total_spent) }} &#8381;</td>
+            <td class="px-4 py-3 text-center">
+              <span v-if="c.is_active" class="text-green-600">&#10003;</span>
+              <span v-else class="text-red-400">&#10005;</span>
+            </td>
+            <td class="px-4 py-3 text-xs text-gray-400">{{ formatDate(c.created_at) }}</td>
+            <td class="px-4 py-3 text-right" @click.stop>
+              <button
+                @click="toggleActive(c)"
+                :class="['rounded-md px-2.5 py-1 text-xs font-medium transition-colors', c.is_active ? 'bg-red-50 text-red-600 hover:bg-red-100' : 'bg-green-50 text-green-600 hover:bg-green-100']"
+              >
+                {{ c.is_active ? 'Деактивировать' : 'Активировать' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Client detail modal -->
+    <Teleport to="body">
+      <div v-if="selectedClient" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="selectedClient = null">
+        <div class="w-full max-w-lg rounded-xl bg-white shadow-2xl max-h-[90vh] overflow-y-auto">
+          <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
+            <h2 class="text-lg font-bold">{{ selectedClient.client.name }}</h2>
+            <button @click="selectedClient = null" class="rounded-md p-1 text-gray-400 hover:bg-gray-100">
+              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="p-5 space-y-4">
+            <div class="rounded-lg bg-gray-50 p-3 text-sm space-y-1">
+              <p><span class="text-gray-500">Email:</span> {{ selectedClient.client.email }}</p>
+              <p v-if="selectedClient.client.phone"><span class="text-gray-500">Телефон:</span> {{ selectedClient.client.phone }}</p>
+              <p v-if="selectedClient.client.company"><span class="text-gray-500">Компания:</span> {{ selectedClient.client.company }}</p>
+              <p><span class="text-gray-500">Регистрация:</span> {{ formatDate(selectedClient.client.created_at) }}</p>
+            </div>
+
+            <div>
+              <h3 class="text-xs font-bold uppercase text-gray-500 mb-2">Заказы ({{ selectedClient.orders.length }})</h3>
+              <div v-if="selectedClient.orders.length === 0" class="text-sm text-gray-400">Нет заказов</div>
+              <div v-else class="space-y-2">
+                <div v-for="o in selectedClient.orders" :key="o.order_id" class="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2">
+                  <div>
+                    <span class="text-sm font-medium text-gray-900">{{ o.order_id }}</span>
+                    <span :class="statusClass(o.status)" class="ml-2 rounded-full px-2 py-0.5 text-xs font-medium">
+                      {{ statusLabel(o.status) }}
+                    </span>
+                  </div>
+                  <div class="text-right">
+                    <span class="text-sm font-bold text-gray-900">{{ fmt(o.total_rub) }} &#8381;</span>
+                    <div class="text-xs text-gray-400">{{ formatDate(o.created_at) }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../../api/client'
+
+const clients = ref([])
+const loading = ref(true)
+const selectedClient = ref(null)
+
+onMounted(() => loadClients())
+
+async function loadClients() {
+  loading.value = true
+  try {
+    const { data } = await api.get('/admin/clients')
+    clients.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+async function openClient(c) {
+  const { data } = await api.get(`/admin/clients/${c.id}`)
+  selectedClient.value = data
+}
+
+async function toggleActive(c) {
+  await api.patch(`/admin/clients/${c.id}/active`, { is_active: !c.is_active })
+  c.is_active = !c.is_active
+}
+
+const statuses = {
+  pending: 'Новый', confirmed: 'Подтверждён', printing: 'Печатается',
+  ready: 'Готов', delivered: 'Выдан', cancelled: 'Отменён',
+}
+function statusLabel(s) { return statuses[s] || s }
+
+function statusClass(s) {
+  const map = {
+    pending: 'bg-amber-100 text-amber-700', confirmed: 'bg-blue-100 text-blue-700',
+    printing: 'bg-purple-100 text-purple-700', ready: 'bg-green-100 text-green-700',
+    delivered: 'bg-gray-100 text-gray-600', cancelled: 'bg-red-100 text-red-700',
+  }
+  return map[s] || 'bg-gray-100 text-gray-600'
+}
+
+function formatDate(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function fmt(n) {
+  return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(n || 0)
+}
+</script>

frontend/src/views/admin/AdminDashboard.vue

@@ -25,6 +25,10 @@
         <p class="text-sm text-gray-500">Расчётов</p>
         <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.total_calculations }}</p>
       </div>
+      <div class="rounded-xl border border-gray-200 bg-white p-5">
+        <p class="text-sm text-gray-500">Клиентов</p>
+        <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.clients_count }}</p>
+      </div>
       <div class="rounded-xl border border-gray-200 bg-white p-5">
         <p class="text-sm text-gray-500">Материалов</p>
         <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.materials_count }}</p>

frontend/src/views/admin/AdminLayout.vue

@@ -74,10 +74,12 @@ const IconOrders = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24'
 const IconMaterials = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '2' }, [h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9' })])}
 const IconSettings = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '2' }, [h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z' }), h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z' })])}
 const IconUsers = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '2' }, [h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z' })])}
+const IconClients = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '2' }, [h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z' })])}
 
 const nav = [
   { to: '/admin', label: 'Дашборд', icon: IconDashboard },
-  { to: '/admin/orders', label: 'Заказы (CRM)', icon: IconOrders },
+  { to: '/admin/orders', label: 'Заказы', icon: IconOrders },
+  { to: '/admin/clients', label: 'Клиенты', icon: IconClients },
   { to: '/admin/materials', label: 'Материалы', icon: IconMaterials },
   { to: '/admin/users', label: 'Администраторы', icon: IconUsers },
   { to: '/admin/settings', label: 'Настройки', icon: IconSettings },

frontend/src/views/admin/AdminMaterials.vue

@@ -154,6 +154,34 @@
               </div>
             </div>
 
+            <!-- Colors -->
+            <div>
+              <label class="mb-1.5 block text-xs font-semibold uppercase text-gray-500">Цвета</label>
+              <div class="flex flex-wrap gap-2 mb-2">
+                <div v-for="(c, idx) in form.color_options" :key="idx"
+                  class="flex items-center gap-1.5 rounded-full border border-gray-200 bg-white pl-1 pr-2 py-0.5"
+                >
+                  <span class="h-5 w-5 rounded-full border border-gray-300 flex-shrink-0" :style="{ backgroundColor: c.hex }"></span>
+                  <span class="text-xs text-gray-700">{{ c.name }}</span>
+                  <button type="button" @click="form.color_options.splice(idx, 1)" class="ml-0.5 text-gray-400 hover:text-red-500">
+                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <input v-model="newColorName" placeholder="Название" class="input-field !py-1 text-xs flex-1" />
+                <div class="flex items-center gap-1">
+                  <input v-model="newColorHex" type="color" class="h-8 w-8 rounded cursor-pointer border border-gray-300" />
+                  <span class="text-xs text-gray-400 font-mono w-16">{{ newColorHex }}</span>
+                </div>
+                <button type="button" @click="addColor" :disabled="!newColorName"
+                  class="rounded-lg bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 disabled:opacity-40"
+                >+</button>
+              </div>
+            </div>
+
             <div>
               <label class="mb-1 block text-xs font-semibold uppercase text-gray-500">Описание</label>
               <textarea v-model="form.description" rows="2" class="input-field"></textarea>
@@ -205,6 +233,9 @@ const saving = ref(false)
 const editingMaterial = ref(null)
 const deletingMaterial = ref(null)
 
+const newColorName = ref('')
+const newColorHex = ref('#222222')
+
 const defaultForm = () => ({
   name: '',
   category: 'basic',
@@ -220,6 +251,7 @@ const defaultForm = () => ({
   food_safe: false,
   is_active: true,
   description: '',
+  color_options: [],
 })
 
 const form = ref(defaultForm())
@@ -259,6 +291,7 @@ function openEdit(m) {
     food_safe: m.food_safe,
     is_active: m.is_active,
     description: m.description || '',
+    color_options: m.color_options ? [...m.color_options] : [],
   }
   showModal.value = true
 }
@@ -278,6 +311,13 @@ async function saveMaterial() {
   }
 }
 
+function addColor() {
+  if (!newColorName.value) return
+  form.value.color_options.push({ name: newColorName.value, hex: newColorHex.value })
+  newColorName.value = ''
+  newColorHex.value = '#222222'
+}
+
 function confirmDelete(m) {
   deletingMaterial.value = m
 }