Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/dashboard/components/ui/Tabs/Tabs.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, useTemplateRef, provide, computed, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const tabsContainer = useTemplateRef('tabsContainer');
+const tabsList = useTemplateRef('tabsList');
+
+const { width: containerWidth } = useElementSize(tabsContainer);
+const { width: listWidth } = useElementSize(tabsList);
+
+const hasScroll = ref(false);
+
+const activeIndex = computed({
+  get: () => props.index,
+  set: newValue => {
+    emit('change', newValue);
+  },
+});
+
+provide('activeIndex', activeIndex);
+provide('updateActiveIndex', index => {
+  activeIndex.value = index;
+});
+
+const computeScrollWidth = () => {
+  if (tabsContainer.value && tabsList.value) {
+    hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
+  }
+};
+
+const onScrollClick = direction => {
+  if (tabsContainer.value && tabsList.value) {
+    let scrollPosition = tabsList.value.scrollLeft;
+    scrollPosition += direction === 'left' ? -100 : 100;
+    tabsList.value.scrollTo({
+      top: 0,
+      left: scrollPosition,
+      behavior: 'smooth',
+    });
+  }
+};
+
+// Watch for changes in element sizes with immediate execution
+watch(
+  [containerWidth, listWidth],
+  () => {
+    computeScrollWidth();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    ref="tabsContainer"
+    class="flex"
+    :class="[border && 'border-b border-b-n-weak']"
+  >
+    <button
+      v-if="hasScroll"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
+      @click="onScrollClick('left')"
+    >
+      <fluent-icon icon="chevron-left" :size="16" />
+    </button>
+    <ul
+      ref="tabsList"
+      class="border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0"
+      :class="
+        hasScroll ? 'overflow-hidden py-0 px-1 max-w-[calc(100%-64px)]' : ''
+      "
+    >
+      <slot />
+    </ul>
+    <button
+      v-if="hasScroll"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
+      @click="onScrollClick('right')"
+    >
+      <fluent-icon icon="chevron-right" :size="16" />
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+  showBadge: {
+    type: Boolean,
+    default: true,
+  },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const activeIndex = inject('activeIndex');
+const updateActiveIndex = inject('updateActiveIndex');
+
+const active = computed(() => props.index === activeIndex.value);
+const getItemCount = computed(() => props.count);
+
+const onTabClick = event => {
+  event.preventDefault();
+  if (!props.disabled) {
+    updateActiveIndex(props.index);
+  }
+};
+</script>
+
+<template>
+  <li
+    class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
+  >
+    <a
+      class="flex items-center flex-row border-b select-none cursor-pointer text-sm relative top-[1px] transition-[border-color] duration-[150ms] ease-[cubic-bezier(0.37,0,0.63,1)]"
+      :class="[
+        active
+          ? 'border-b border-n-brand text-n-blue-text'
+          : 'border-transparent text-n-slate-11',
+        isCompact ? 'py-2 text-sm' : 'text-base py-3',
+      ]"
+      @click="onTabClick"
+    >
+      {{ name }}
+      <div
+        v-if="showBadge"
+        class="rounded-md h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0 min-w-[20px]"
+        :class="[
+          active
+            ? 'bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text'
+            : 'bg-n-alpha-black2 dark:bg-n-solid-3 text-n-slate-11',
+        ]"
+      >
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>