Simplify manager cabinet flows

app/pages/clients/invite.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useMutation } from '@vue/apollo-composable';
+import { CreateInvitationDocument } from '~/composables/graphql/generated';
+
+definePageMeta({
+  middleware: ['manager-only'],
+});
+
+const email = ref('');
+const companyName = ref('');
+const invitationResult = ref<null | { token: string; expiresAt: string }>(null);
+
+const createInvitationMutation = useMutation(CreateInvitationDocument);
+
+async function createInvitation() {
+  invitationResult.value = null;
+
+  const response = await createInvitationMutation.mutate({
+    input: {
+      email: email.value,
+      companyName: companyName.value,
+      expiresInDays: 7,
+    },
+  });
+
+  const invitation = response?.data?.createInvitation;
+  if (!invitation) {
+    return;
+  }
+
+  invitationResult.value = {
+    token: invitation.token,
+    expiresAt: invitation.expiresAt,
+  };
+}
+</script>
+
+<template>
+  <section class="space-y-6 max-w-3xl">
+    <NuxtLink to="/clients" class="text-sm font-semibold text-[#0d854a]">← Назад к клиентам</NuxtLink>
+
+    <div class="manager-hero">
+      <p class="manager-eyebrow">Приглашение</p>
+      <h1 class="manager-title">Пригласить нового клиента</h1>
+      <p class="manager-copy">Форма вынесена отдельно, чтобы список клиентов оставался чистым и спокойным.</p>
+    </div>
+
+    <div class="surface-card rounded-3xl p-5">
+      <div class="grid gap-3">
+        <label class="form-control">
+          <span class="label-text">Email</span>
+          <input v-model="email" type="email" class="input manager-field w-full" placeholder="client@example.com">
+        </label>
+
+        <label class="form-control">
+          <span class="label-text">Компания</span>
+          <input v-model="companyName" type="text" class="input manager-field w-full" placeholder="Название компании">
+        </label>
+
+        <div>
+          <button class="btn btn-primary border-0" @click="createInvitation">Создать инвайт</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="invitationResult" class="surface-card rounded-3xl p-5">
+      <h2 class="text-xl font-bold text-[#123824]">Инвайт создан</h2>
+      <div class="mt-4 space-y-3 text-sm text-[#123824]">
+        <div class="manager-mini-card">
+          Токен: <span class="font-semibold">{{ invitationResult.token }}</span>
+        </div>
+        <div class="manager-mini-card">
+          Действует до: <span class="font-semibold">{{ new Date(invitationResult.expiresAt).toLocaleString() }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>