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-next/sidebar/SidebarGroupHeader.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  to: { type: [Object, String], default: '' },
+  label: { type: String, default: '' },
+  icon: { type: [String, Object], default: '' },
+  expandable: { type: Boolean, default: false },
+  isExpanded: { type: Boolean, default: false },
+  isActive: { type: Boolean, default: false },
+  hasActiveChild: { type: Boolean, default: false },
+  getterKeys: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['toggle']);
+
+const showBadge = useMapGetter(props.getterKeys.badge);
+const dynamicCount = useMapGetter(props.getterKeys.count);
+const count = computed(() =>
+  dynamicCount.value > 99 ? '99+' : dynamicCount.value
+);
+</script>
+
+<template>
+  <component
+    :is="to ? 'router-link' : 'div'"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
+    role="button"
+    draggable="false"
+    :to="to"
+    :title="label"
+    :class="{
+      'text-n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'text-n-slate-12 font-medium': hasActiveChild,
+      'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
+    }"
+    @click.stop="emit('toggle')"
+  >
+    <div v-if="icon" class="relative flex items-center gap-2">
+      <Icon v-if="icon" :icon="icon" class="size-4" />
+      <span
+        v-if="showBadge"
+        class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
+      />
+    </div>
+    <div class="flex items-center gap-1.5 flex-grow min-w-0">
+      <span class="text-sm font-medium leading-5 truncate">
+        {{ label }}
+      </span>
+      <span
+        v-if="dynamicCount && !expandable"
+        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
+        :class="{
+          'text-n-blue-text outline-n-slate-6': isActive,
+          'text-n-slate-11 outline-n-strong': !isActive,
+        }"
+      >
+        {{ count }}
+      </span>
+    </div>
+    <span
+      v-if="expandable"
+      v-show="isExpanded"
+      class="i-lucide-chevron-up size-3"
+      @click.stop="emit('toggle')"
+    />
+  </component>
+</template>