Build Nuxt 4 manager cabinet workflows

app/pages/cart.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useMutation } from '@vue/apollo-composable';
+import { SubmitCalculationOrderDocument } from '~/composables/graphql/generated';
+
+const productName = ref('');
+const quantity = ref(1);
+const width = ref(100);
+const thickness = ref(50);
+const color = ref('прозрачный');
+
+const { mutate, loading, onDone, onError } = useMutation(SubmitCalculationOrderDocument);
+const success = ref('');
+const errorMessage = ref('');
+
+onDone((result) => {
+  success.value = `Заявка ${result.data?.submitCalculationOrder.code} отправлена`;
+  errorMessage.value = '';
+});
+
+onError((error) => {
+  errorMessage.value = error.message;
+  success.value = '';
+});
+
+function submit() {
+  mutate({
+    input: {
+      productName: productName.value,
+      quantity: Number(quantity.value),
+      parameters: {
+        width: Number(width.value),
+        thickness: Number(thickness.value),
+        color: color.value,
+      },
+    },
+  });
+}
+</script>
+
+<template>
+  <section class="space-y-4 max-w-2xl">
+    <h1 class="text-2xl font-bold">Корзина / заявка на расчет</h1>
+    <div class="card bg-base-100 border border-base-300">
+      <div class="card-body space-y-3">
+        <label class="form-control">
+          <span class="label-text">Название позиции</span>
+          <input v-model="productName" type="text" class="input input-bordered" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Количество</span>
+          <input v-model="quantity" type="number" min="1" class="input input-bordered" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Ширина</span>
+          <input v-model="width" type="number" min="1" class="input input-bordered" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Толщина</span>
+          <input v-model="thickness" type="number" min="1" class="input input-bordered" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Цвет</span>
+          <input v-model="color" type="text" class="input input-bordered" />
+        </label>
+
+        <button class="btn btn-primary" :disabled="loading" @click="submit">Отправить менеджеру</button>
+      </div>
+    </div>
+
+    <div v-if="success" class="alert alert-success">{{ success }}</div>
+    <div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
+  </section>
+</template>