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/modules/search/components/SearchResultConversationItem.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { computed } from 'vue';
+import { frontendURL } from 'dashboard/helper/URLHelper.js';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
+  },
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  email: {
+    type: String,
+    default: '',
+  },
+  accountId: {
+    type: [String, Number],
+    default: '',
+  },
+  createdAt: {
+    type: [String, Date, Number],
+    default: '',
+  },
+  messageId: {
+    type: Number,
+    default: 0,
+  },
+  emailSubject: {
+    type: String,
+    default: '',
+  },
+});
+
+const { inbox } = useInbox(props.inbox?.id);
+
+const navigateTo = computed(() => {
+  const params = {};
+  if (props.messageId) {
+    params.messageId = props.messageId;
+  }
+  return frontendURL(
+    `accounts/${props.accountId}/conversations/${props.id}`,
+    params
+  );
+});
+
+const createdAtTime = computed(() => {
+  if (!props.createdAt) return '';
+  return dynamicTime(props.createdAt);
+});
+
+const infoItems = computed(() => [
+  {
+    label: 'SEARCH.FROM',
+    value: props.name,
+    show: !!props.name,
+  },
+  {
+    label: 'SEARCH.EMAIL',
+    value: props.email,
+    show: !!props.email,
+  },
+  {
+    label: 'SEARCH.EMAIL_SUBJECT',
+    value: props.emailSubject,
+    show: !!props.emailSubject,
+  },
+]);
+
+const visibleInfoItems = computed(() =>
+  infoItems.value.filter(item => item.show)
+);
+
+const inboxName = computed(() => props.inbox?.name);
+
+const inboxIcon = computed(() => {
+  if (!inbox.value) return null;
+  const { channelType, medium } = inbox.value;
+  return getInboxIconByType(channelType, medium);
+});
+</script>
+
+<template>
+  <router-link :to="navigateTo">
+    <CardLayout
+      layout="col"
+      class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
+    >
+      <div
+        class="flex items-center min-w-0 justify-between gap-2 w-full h-7 mb-1"
+      >
+        <div class="flex items-center gap-3">
+          <div class="flex items-center gap-1.5 flex-shrink-0">
+            <Icon
+              icon="i-lucide-hash"
+              class="flex-shrink-0 text-n-slate-11 size-4"
+            />
+            <span class="text-n-slate-12 text-sm leading-4">
+              {{ id }}
+            </span>
+          </div>
+          <div v-if="inboxName" class="w-px h-3 bg-n-strong" />
+          <div v-if="inboxName" class="flex items-center gap-1.5 flex-shrink-0">
+            <div
+              v-if="inboxIcon"
+              class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
+            >
+              <Icon
+                :icon="inboxIcon"
+                class="flex-shrink-0 text-n-slate-11 size-2.5"
+              />
+            </div>
+            <span class="text-sm leading-4 text-n-slate-12">
+              {{ inboxName }}
+            </span>
+          </div>
+        </div>
+        <span
+          v-if="createdAtTime"
+          class="text-sm font-normal min-w-0 truncate text-n-slate-11"
+        >
+          {{ createdAtTime }}
+        </span>
+      </div>
+      <div class="flex flex-wrap gap-x-2 gap-y-1.5 items-center">
+        <template
+          v-for="(item, index) in visibleInfoItems"
+          :key="`info-${index}`"
+        >
+          <h5 class="m-0 text-sm min-w-0 text-n-slate-12 truncate">
+            <span class="text-sm leading-4 font-normal text-n-slate-11">
+              {{ $t(item.label) + ':' }}
+            </span>
+            {{ item.value }}
+          </h5>
+          <div
+            v-if="index < visibleInfoItems.length - 1"
+            class="w-px h-3 bg-n-strong"
+          />
+        </template>
+      </div>
+      <slot />
+    </CardLayout>
+  </router-link>
+</template>