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/SearchResultArticleItem.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from 'vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { ARTICLE_STATUSES } from 'dashboard/helper/portalHelper';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+
+const props = defineProps({
+  id: { type: [String, Number], default: 0 },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  category: { type: String, default: '' },
+  locale: { type: String, default: '' },
+  content: { type: String, default: '' },
+  portalSlug: { type: String, required: true },
+  accountId: { type: [String, Number], default: 0 },
+  status: { type: String, default: '' },
+  updatedAt: { type: Number, default: 0 },
+});
+
+const MAX_LENGTH = 300;
+
+const navigateTo = computed(() => {
+  return frontendURL(
+    `accounts/${props.accountId}/portals/${props.portalSlug}/${props.locale}/articles/edit/${props.id}`
+  );
+});
+
+const updatedAtTime = computed(() => {
+  if (!props.updatedAt) return '';
+  return dynamicTime(props.updatedAt);
+});
+
+const truncatedContent = computed(() => {
+  if (!props.content) return props.description || '';
+
+  // Use MessageFormatter to properly convert markdown to plain text
+  const formatter = new MessageFormatter(props.content);
+  const plainText = formatter.plainText.trim();
+
+  return plainText.length > MAX_LENGTH
+    ? `${plainText.substring(0, MAX_LENGTH)}...`
+    : plainText;
+});
+
+const statusTextColor = computed(() => {
+  switch (props.status) {
+    case ARTICLE_STATUSES.ARCHIVED:
+      return 'text-n-slate-12';
+    case ARTICLE_STATUSES.DRAFT:
+      return 'text-n-amber-11';
+    default:
+      return 'text-n-teal-11';
+  }
+});
+</script>
+
+<template>
+  <router-link :to="navigateTo">
+    <CardLayout
+      layout="col"
+      class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:pt-4 [&>div]:pb-5 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
+    >
+      <div class="min-w-0 flex-1 flex flex-col items-start gap-2 w-full">
+        <div class="flex items-center min-w-0 justify-between gap-2 w-full">
+          <div class="flex items-center gap-2">
+            <h5
+              class="text-sm font-medium leading-4 truncate min-w-0 text-n-slate-12"
+            >
+              {{ title }}
+            </h5>
+            <div v-if="category" class="w-px h-4 bg-n-strong mx-2" />
+            <span
+              v-if="category"
+              class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-1.5 h-6 text-n-slate-12"
+            >
+              {{ category }}
+            </span>
+            <span
+              v-if="status"
+              class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-2 h-6"
+              :class="statusTextColor"
+            >
+              {{ status }}
+            </span>
+          </div>
+          <span
+            v-if="updatedAtTime"
+            class="text-sm font-normal min-w-0 truncate text-n-slate-11"
+          >
+            {{ updatedAtTime }}
+          </span>
+        </div>
+        <p
+          v-if="truncatedContent"
+          class="text-sm leading-6 text-n-slate-11 line-clamp-2"
+        >
+          {{ truncatedContent }}
+        </p>
+      </div>
+    </CardLayout>
+  </router-link>
+</template>