Build Nuxt 4 client cabinet with Apollo and GraphQL flows

app/components/orders/OrderStatusBadge.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import OrderStatusBadge from './OrderStatusBadge.vue';
+
+const meta: Meta<typeof OrderStatusBadge> = {
+  title: 'Orders/OrderStatusBadge',
+  component: OrderStatusBadge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OrderStatusBadge>;
+
+export const InProgress: Story = {
+  args: { status: 'IN_PROGRESS' },
+};
+
+export const Completed: Story = {
+  args: { status: 'COMPLETED' },
+};

app/components/orders/OrderStatusBadge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  status: string;
+}>();
+
+const className = computed(() => {
+  if (props.status === 'COMPLETED') return 'badge badge-success';
+  if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'badge badge-error';
+  if (props.status === 'MANAGER_BLOCKED') return 'badge badge-warning';
+  return 'badge badge-info';
+});
+</script>
+
+<template>
+  <span :class="className">{{ status }}</span>
+</template>

app/components/ui/AppHeader.stories.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import AppHeader from './AppHeader.vue';
+
+const meta: Meta<typeof AppHeader> = {
+  title: 'UI/AppHeader',
+  component: AppHeader,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppHeader>;
+
+export const Default: Story = {};

app/components/ui/AppHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <header class="navbar bg-base-100 border-b border-base-300 sticky top-0 z-10">
+    <div class="navbar-start">
+      <NuxtLink to="/" class="btn btn-ghost text-xl">Fregat</NuxtLink>
+    </div>
+    <div class="navbar-center hidden md:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><NuxtLink to="/products">Товары</NuxtLink></li>
+        <li><NuxtLink to="/cart">Корзина</NuxtLink></li>
+        <li><NuxtLink to="/orders">Заказы</NuxtLink></li>
+        <li><NuxtLink to="/profile">Профиль</NuxtLink></li>
+      </ul>
+    </div>
+  </header>
+</template>