Build Nuxt 4 client cabinet with Apollo and GraphQL flows

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>