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/widgets/conversation/linear/SearchableDropdown.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref, computed, defineOptions } from 'vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+
+const props = defineProps({
+  type: { type: String, required: true },
+  label: { type: String, default: null },
+  items: { type: Array, required: true },
+  value: { type: [Number, String], default: null },
+  placeholder: { type: String, default: null },
+  error: { type: String, default: null },
+});
+
+const emit = defineEmits(['change']);
+
+defineOptions({
+  name: 'SearchableDropdown',
+});
+
+const shouldShowDropdown = ref(false);
+
+const toggleDropdown = () => {
+  shouldShowDropdown.value = !shouldShowDropdown.value;
+};
+const onSelect = item => {
+  emit('change', item, props.type);
+  toggleDropdown();
+};
+
+const hasError = computed(() => !!props.error);
+
+const selectedItem = computed(() => {
+  if (!props.value) return null;
+  return props.items.find(i => i.id === props.value);
+});
+
+const selectedItemName = computed(
+  () => selectedItem.value?.name || props.placeholder
+);
+
+const selectedItemId = computed(() => selectedItem.value?.id || null);
+</script>
+
+<template>
+  <div
+    class="flex w-full"
+    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
+  >
+    <label class="w-full" :class="{ error: hasError }">
+      {{ label }}
+      <FilterButton
+        trailing-icon
+        icon="i-lucide-chevron-down"
+        :button-text="selectedItemName"
+        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl bg-n-alpha-black2 outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6"
+        @click="toggleDropdown"
+      >
+        <template v-if="shouldShowDropdown" #dropdown>
+          <FilterListDropdown
+            v-on-clickaway="toggleDropdown"
+            :show-clear-filter="false"
+            :list-items="items"
+            :active-filter-id="selectedItemId"
+            :input-placeholder="placeholder"
+            enable-search
+            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+            @select="onSelect"
+          />
+        </template>
+      </FilterButton>
+      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
+    </label>
+  </div>
+</template>