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>