Add personal cabinet with team type (buyer/seller)

- Add cabinet layout with 1/6 sidebar
- Header: rename "Мои заказы" to "Личный кабинет"
- Add cabinet pages: orders, offers (seller only), new offer
- TeamCreateForm: add team type selection (BUYER/SELLER)
- Sidebar shows "Мои предложения" only for SELLER teams

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

ansible/inventory/production/hosts.yml

@@ -3,8 +3,8 @@ all:
   children:
     optovia_servers:
       hosts:
-        optovia-prod:
-          ansible_host: optovia-prod  # tailscale hostname
+        optovia:
+          ansible_host: optovia  # tailscale hostname
           ansible_user: root
           
       vars:

webapp/app/components/Header.vue

@@ -92,10 +92,10 @@
           </div>
 
           <NuxtLink
-            :to="localePath('/dashboard/orders')"
+            :to="localePath('/dashboard/cabinet')"
             class="text-base font-medium text-white/80 hover:text-white transition-colors"
           >
-            Мои заказы
+            Личный кабинет
           </NuxtLink>
         </div>
 

webapp/app/components/TeamCreateForm.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="bg-white rounded-lg shadow p-6">
     <h3 class="font-semibold text-gray-900 mb-6">{{ $t('teams.create_team') }}</h3>
-    
+
     <form @submit.prevent="handleSubmit" class="space-y-6">
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-2">
           {{ $t('teams.team_name') }}
         </label>
-        <input 
+        <input
           v-model="teamName"
-          type="text" 
+          type="text"
           required
           :placeholder="$t('teams.team_name_placeholder')"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
@@ -20,6 +20,32 @@
         </p>
       </div>
 
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Тип компании
+        </label>
+        <div class="flex gap-4">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              v-model="teamType"
+              type="radio"
+              value="BUYER"
+              class="w-4 h-4 text-blue-600 focus:ring-blue-500"
+            />
+            <span class="text-gray-700">Покупатель</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              v-model="teamType"
+              type="radio"
+              value="SELLER"
+              class="w-4 h-4 text-blue-600 focus:ring-blue-500"
+            />
+            <span class="text-gray-700">Продавец</span>
+          </label>
+        </div>
+      </div>
+
       <div class="flex justify-end space-x-3">
         <button
           type="button"
@@ -53,6 +79,7 @@ import { CreateTeamDocument } from '~/composables/graphql/user/teams-generated'
 const emit = defineEmits(['teamCreated', 'cancel'])
 
 const teamName = ref('')
+const teamType = ref('BUYER')
 const isLoading = ref(false)
 const hasError = ref(false)
 const error = ref('')
@@ -63,9 +90,15 @@ const handleSubmit = async () => {
   try {
     isLoading.value = true
     hasError.value = false
-    const result = await execute(CreateTeamDocument, { input: { name: teamName.value.trim() } }, 'user', 'teams')
+    const result = await execute(CreateTeamDocument, {
+      input: {
+        name: teamName.value.trim(),
+        teamType: teamType.value
+      }
+    }, 'user', 'teams')
     emit('teamCreated', result.createTeam?.team)
     teamName.value = ''
+    teamType.value = 'BUYER'
   } catch (err: any) {
     hasError.value = true
     error.value = err?.message || 'Ошибка создания команды'

webapp/app/layouts/cabinet.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="min-h-screen bg-gray-100">
+    <Header />
+
+    <main class="py-6 sm:py-8">
+      <Container>
+        <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
+          <!-- Сайдбар 1/6 -->
+          <aside class="lg:col-span-1">
+            <nav class="bg-white rounded-lg shadow p-4 space-y-1">
+              <NuxtLink
+                :to="localePath('/dashboard/cabinet/orders')"
+                class="flex items-center gap-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
+                active-class="bg-primary/10 text-primary font-medium"
+              >
+                <Icon name="lucide:shopping-bag" size="20" />
+                <span>Мои заказы</span>
+              </NuxtLink>
+
+              <NuxtLink
+                v-if="isSeller"
+                :to="localePath('/dashboard/cabinet/offers')"
+                class="flex items-center gap-3 px-3 py-2 text-gray-700 rounded-lg hover:bg-gray-100 transition-colors"
+                active-class="bg-primary/10 text-primary font-medium"
+              >
+                <Icon name="lucide:package" size="20" />
+                <span>Мои предложения</span>
+              </NuxtLink>
+            </nav>
+          </aside>
+
+          <!-- Контент 5/6 -->
+          <div class="lg:col-span-5">
+            <slot />
+          </div>
+        </div>
+      </Container>
+    </main>
+
+    <FooterPublic />
+  </div>
+</template>
+
+<script setup lang="ts">
+const localePath = useLocalePath()
+
+// Получаем данные пользователя для проверки типа команды
+const userData = ref<{ activeTeam?: { teamType?: string } } | null>(null)
+const { loggedIn, getIdTokenClaims } = useAuth()
+const { execute } = useGraphQL()
+
+const isSeller = computed(() => {
+  return userData.value?.activeTeam?.teamType === 'SELLER'
+})
+
+onMounted(async () => {
+  if (loggedIn.value) {
+    try {
+      const { GetMeDocument } = await import('~/composables/graphql/user/teams-generated')
+      const result = await execute(GetMeDocument, {}, 'user', 'teams')
+      if (result.me) {
+        userData.value = result.me
+      }
+    } catch (err) {
+      console.error('Failed to load user data:', err)
+    }
+  }
+})
+</script>

webapp/app/pages/dashboard/cabinet/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'cabinet',
+  middleware: ['auth-oidc']
+})
+
+const localePath = useLocalePath()
+
+// Редирект на заказы
+await navigateTo(localePath('/dashboard/cabinet/orders'), { replace: true })
+</script>
+
+<template>
+  <div />
+</template>

webapp/app/pages/dashboard/cabinet/offers.vue

@@ -0,0 +1,150 @@
+<template>
+  <Stack gap="6">
+    <Stack direction="row" justify="between" align="center">
+      <Heading :level="1">Мои предложения</Heading>
+      <NuxtLink :to="localePath('/dashboard/cabinet/offers/new')">
+        <Button>
+          <Icon name="lucide:plus" size="16" class="mr-2" />
+          Добавить
+        </Button>
+      </NuxtLink>
+    </Stack>
+
+    <Alert v-if="hasError" variant="error">
+      <Stack gap="2">
+        <Heading :level="4" weight="semibold">Ошибка</Heading>
+        <Text tone="muted">{{ error }}</Text>
+        <Button @click="loadOffers">Попробовать снова</Button>
+      </Stack>
+    </Alert>
+
+    <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
+      <Spinner />
+      <Text tone="muted">Загружаем предложения...</Text>
+    </Stack>
+
+    <template v-else>
+      <Stack v-if="offers.length" gap="4">
+        <Card v-for="offer in offers" :key="offer.uuid" padding="lg">
+          <Stack gap="3">
+            <Stack direction="row" justify="between" align="center">
+              <Heading :level="3">{{ offer.title || 'Без названия' }}</Heading>
+              <Badge :variant="getStatusVariant(offer.status)">
+                {{ getStatusText(offer.status) }}
+              </Badge>
+            </Stack>
+
+            <Text v-if="offer.description" tone="muted">{{ offer.description }}</Text>
+
+            <Grid :cols="1" :md="3" :gap="3">
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Локация</Text>
+                <Text tone="muted">{{ offer.locationName || 'Не указана' }}</Text>
+              </Stack>
+
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Товары</Text>
+                <Text tone="muted">
+                  {{ offer.lines?.[0]?.productName || 'Нет товаров' }}
+                  <template v-if="offer.lines?.length > 1">
+                    +{{ offer.lines.length - 1 }} ещё
+                  </template>
+                </Text>
+              </Stack>
+
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Действует до</Text>
+                <Text tone="muted">{{ formatDate(offer.validUntil) }}</Text>
+              </Stack>
+            </Grid>
+          </Stack>
+        </Card>
+      </Stack>
+
+      <Stack v-else align="center" gap="3">
+        <IconCircle tone="primary">
+          <Icon name="lucide:package" size="24" />
+        </IconCircle>
+        <Heading :level="3">Нет предложений</Heading>
+        <Text tone="muted">Создайте своё первое предложение</Text>
+        <NuxtLink :to="localePath('/dashboard/cabinet/offers/new')">
+          <Button>
+            <Icon name="lucide:plus" size="16" class="mr-2" />
+            Добавить предложение
+          </Button>
+        </NuxtLink>
+      </Stack>
+    </template>
+  </Stack>
+</template>
+
+<script setup lang="ts">
+import { GetOffersDocument } from '~/composables/graphql/team/exchange-generated'
+
+definePageMeta({
+  layout: 'cabinet',
+  middleware: ['auth-oidc']
+})
+
+const localePath = useLocalePath()
+const { execute } = useGraphQL()
+
+const offers = ref<any[]>([])
+const isLoading = ref(true)
+const hasError = ref(false)
+const error = ref('')
+
+const loadOffers = async () => {
+  try {
+    isLoading.value = true
+    hasError.value = false
+    const result = await execute(GetOffersDocument, {}, 'team', 'exchange')
+    offers.value = result.getOffers || []
+  } catch (err: any) {
+    hasError.value = true
+    error.value = err.message || 'Не удалось загрузить предложения'
+    offers.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const getStatusVariant = (status: string) => {
+  const variants: Record<string, string> = {
+    active: 'success',
+    draft: 'warning',
+    expired: 'error',
+    sold: 'muted'
+  }
+  return variants[status] || 'muted'
+}
+
+const getStatusText = (status: string) => {
+  const texts: Record<string, string> = {
+    active: 'Активно',
+    draft: 'Черновик',
+    expired: 'Истекло',
+    sold: 'Продано'
+  }
+  return texts[status] || status || 'Неизвестно'
+}
+
+const formatDate = (date: string) => {
+  if (!date) return 'Не указано'
+  try {
+    const dateObj = new Date(date)
+    if (isNaN(dateObj.getTime())) return 'Невалидная дата'
+    return new Intl.DateTimeFormat('ru-RU', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    }).format(dateObj)
+  } catch {
+    return 'Невалидная дата'
+  }
+}
+
+onMounted(async () => {
+  await loadOffers()
+})
+</script>

webapp/app/pages/dashboard/cabinet/offers/new.vue

@@ -0,0 +1,92 @@
+<template>
+  <Stack gap="6">
+    <Stack direction="row" align="center" justify="between">
+      <Heading :level="1">Выберите продукт</Heading>
+      <NuxtLink :to="localePath('/dashboard/cabinet/offers')">
+        <Button variant="outline">
+          <Icon name="lucide:arrow-left" size="16" class="mr-2" />
+          Назад
+        </Button>
+      </NuxtLink>
+    </Stack>
+
+    <Alert v-if="hasError" variant="error">
+      <Stack gap="2">
+        <Heading :level="4" weight="semibold">Ошибка</Heading>
+        <Text tone="muted">{{ error }}</Text>
+        <Button @click="loadProducts">Попробовать снова</Button>
+      </Stack>
+    </Alert>
+
+    <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
+      <Spinner />
+      <Text tone="muted">Загружаем продукты...</Text>
+    </Stack>
+
+    <template v-else>
+      <Grid v-if="products.length" :cols="1" :md="2" :lg="3" :gap="4">
+        <Card
+          v-for="product in products"
+          :key="product.uuid"
+          padding="lg"
+          class="cursor-pointer hover:shadow-md transition-shadow"
+          @click="selectProduct(product)"
+        >
+          <Stack gap="2">
+            <Heading :level="3">{{ product.name }}</Heading>
+            <Text tone="muted">{{ product.categoryName }}</Text>
+          </Stack>
+        </Card>
+      </Grid>
+
+      <Stack v-else align="center" gap="3">
+        <IconCircle tone="warning">
+          <Icon name="lucide:package-x" size="24" />
+        </IconCircle>
+        <Heading :level="3">Нет доступных продуктов</Heading>
+        <Text tone="muted">Обратитесь к администратору для добавления продуктов</Text>
+      </Stack>
+    </template>
+  </Stack>
+</template>
+
+<script setup lang="ts">
+import { GetProductsDocument } from '~/composables/graphql/public/exchange-generated'
+
+definePageMeta({
+  layout: 'cabinet',
+  middleware: ['auth-oidc']
+})
+
+const localePath = useLocalePath()
+const { execute } = useGraphQL()
+
+const products = ref<any[]>([])
+const isLoading = ref(true)
+const hasError = ref(false)
+const error = ref('')
+
+const loadProducts = async () => {
+  try {
+    isLoading.value = true
+    hasError.value = false
+    const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
+    products.value = result.getProducts || []
+  } catch (err: any) {
+    hasError.value = true
+    error.value = err.message || 'Не удалось загрузить продукты'
+    products.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const selectProduct = (product: any) => {
+  // Переходим на страницу добавления характеристик продукта
+  navigateTo(localePath(`/dashboard/add-product?product_uuid=${product.uuid}`))
+}
+
+onMounted(async () => {
+  await loadProducts()
+})
+</script>

webapp/app/pages/dashboard/cabinet/orders.vue

@@ -0,0 +1,166 @@
+<template>
+  <Stack gap="6">
+    <Heading :level="1">Мои заказы</Heading>
+
+    <Alert v-if="hasError" variant="error">
+      <Stack gap="2">
+        <Heading :level="4" weight="semibold">Ошибка</Heading>
+        <Text tone="muted">{{ error }}</Text>
+        <Button @click="loadTeamOrders">Попробовать снова</Button>
+      </Stack>
+    </Alert>
+
+    <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
+      <Spinner />
+      <Text tone="muted">Загружаем заказы...</Text>
+    </Stack>
+
+    <template v-else>
+      <Stack v-if="orders.length" gap="4">
+        <Card v-for="order in orders" :key="order.uuid" padding="lg" class="cursor-pointer hover:shadow-md transition-shadow" @click="openOrder(order)">
+          <Stack gap="3">
+            <Stack direction="row" justify="between" align="center">
+              <Heading :level="3">#{{ order.name }}</Heading>
+              <Text tone="muted">{{ getOrderStartDate(order) }} → {{ getOrderEndDate(order) }}</Text>
+            </Stack>
+
+            <Grid :cols="1" :md="3" :gap="3">
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Маршрут</Text>
+                <Text tone="muted">{{ order.sourceLocationName }} → {{ order.destinationLocationName }}</Text>
+              </Stack>
+
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Товар</Text>
+                <Text tone="muted">
+                  {{ order.orderLines?.[0]?.productName || 'Загрузка...' }}
+                  <template v-if="order.orderLines?.length > 1">
+                    +{{ order.orderLines.length - 1 }} ещё
+                  </template>
+                </Text>
+                <Text tone="muted" size="base">
+                  {{ order.orderLines?.[0]?.quantity || 0 }} {{ order.orderLines?.[0]?.unit || 'тонн' }}
+                </Text>
+              </Stack>
+
+              <Stack gap="1">
+                <Text size="base" weight="semibold">Статус</Text>
+                <Text tone="muted">{{ getStatusText(order.status) }}</Text>
+                <Text tone="muted">Этапов завершено: {{ getCompletedStages(order) }} / {{ order.stages?.length || 0 }}</Text>
+              </Stack>
+            </Grid>
+          </Stack>
+        </Card>
+      </Stack>
+
+      <Stack v-else align="center" gap="3">
+        <IconCircle tone="primary">
+          <Icon name="lucide:shopping-bag" size="24" />
+        </IconCircle>
+        <Heading :level="3">Нет заказов</Heading>
+        <Text tone="muted">Начните с создания нового расчета</Text>
+        <Button @click="navigateTo(localePath('/dashboard'))">
+          Создать новый расчет
+        </Button>
+      </Stack>
+    </template>
+  </Stack>
+</template>
+
+<script setup lang="ts">
+import { GetTeamOrdersDocument } from '~/composables/graphql/team/orders-generated'
+
+definePageMeta({
+  layout: 'cabinet',
+  middleware: ['auth-oidc']
+})
+
+const localePath = useLocalePath()
+const { execute } = useGraphQL()
+
+const orders = ref<any[]>([])
+const isLoading = ref(true)
+const hasError = ref(false)
+const error = ref('')
+
+const loadTeamOrders = async () => {
+  try {
+    isLoading.value = true
+    hasError.value = false
+    const result = await execute(GetTeamOrdersDocument, {}, 'team', 'orders')
+    orders.value = result.getTeamOrders || []
+  } catch (err: any) {
+    hasError.value = true
+    error.value = err.message || 'Не удалось загрузить заказы'
+    orders.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const openOrder = (order: any) => {
+  navigateTo(localePath(`/dashboard/orders/${order.uuid}`))
+}
+
+const getOrderStartDate = (order: any) => {
+  if (!order.createdAt) return 'Не указано'
+  return formatDate(order.createdAt)
+}
+
+const getOrderEndDate = (order: any) => {
+  let latestDate: Date | null = null
+  order.stages?.forEach((stage: any) => {
+    stage.trips?.forEach((trip: any) => {
+      const endDate = trip.actualUnloadingDate || trip.plannedUnloadingDate
+      if (endDate) {
+        const date = new Date(endDate)
+        if (!latestDate || date > latestDate) {
+          latestDate = date
+        }
+      }
+    })
+  })
+  if (latestDate) return formatDate(latestDate.toISOString())
+  if (order.createdAt) {
+    const fallbackDate = new Date(order.createdAt)
+    fallbackDate.setMonth(fallbackDate.getMonth() + 1)
+    return formatDate(fallbackDate.toISOString())
+  }
+  return 'Не указано'
+}
+
+const getStatusText = (status: string) => {
+  const texts: Record<string, string> = {
+    pending: 'Ожидает',
+    processing: 'Обработка',
+    in_transit: 'В пути',
+    delivered: 'Доставлен',
+    cancelled: 'Отменен'
+  }
+  return texts[status] || status || 'Неизвестно'
+}
+
+const getCompletedStages = (order: any) => {
+  if (!order.stages?.length) return 0
+  return order.stages.filter((stage: any) => stage.status === 'completed').length
+}
+
+const formatDate = (date: string) => {
+  if (!date) return 'Нет данных'
+  try {
+    const dateObj = new Date(date)
+    if (isNaN(dateObj.getTime())) return 'Невалидная дата'
+    return new Intl.DateTimeFormat('ru-RU', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    }).format(dateObj)
+  } catch {
+    return 'Невалидная дата'
+  }
+}
+
+onMounted(async () => {
+  await loadTeamOrders()
+})
+</script>