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/message/MessageMeta.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import MessageStatus from './MessageStatus.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { useMessageContext } from './provider.js';
+
+import { MESSAGE_STATUS, MESSAGE_TYPES } from './constants';
+
+const {
+  isAFacebookInbox,
+  isALineChannel,
+  isAPIInbox,
+  isASmsInbox,
+  isATelegramChannel,
+  isATwilioChannel,
+  isAWebWidgetInbox,
+  isAWhatsAppChannel,
+  isAnEmailChannel,
+  isAnInstagramChannel,
+  isATiktokChannel,
+} = useInbox();
+
+const {
+  status,
+  isPrivate,
+  createdAt,
+  sourceId,
+  messageType,
+  contentAttributes,
+} = useMessageContext();
+
+const readableTime = computed(() =>
+  messageTimestamp(createdAt.value, 'LLL d, h:mm a')
+);
+
+const showStatusIndicator = computed(() => {
+  if (isPrivate.value) return false;
+  // Don't show status for failed messages, we already show error message
+  if (status.value === MESSAGE_STATUS.FAILED) return false;
+  // Don't show status for deleted messages
+  if (contentAttributes.value?.deleted) return false;
+
+  if (messageType.value === MESSAGE_TYPES.OUTGOING) return true;
+  if (messageType.value === MESSAGE_TYPES.TEMPLATE) return true;
+
+  return false;
+});
+
+const isSent = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  // Messages will be marked as sent for the Email channel if they have a source ID.
+  if (isAnEmailChannel.value) return !!sourceId.value;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isAFacebookInbox.value ||
+    isASmsInbox.value ||
+    isATelegramChannel.value ||
+    isAnInstagramChannel.value ||
+    isATiktokChannel.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
+  }
+
+  // All messages will be mark as sent for the Line channel, as there is no source ID.
+  if (isALineChannel.value) return true;
+
+  return false;
+});
+
+const isDelivered = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isASmsInbox.value ||
+    isAFacebookInbox.value ||
+    isATiktokChannel.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
+  }
+  // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
+  if (isAWebWidgetInbox.value || isAPIInbox.value) {
+    return status.value === MESSAGE_STATUS.SENT;
+  }
+  if (isALineChannel.value) {
+    return status.value === MESSAGE_STATUS.DELIVERED;
+  }
+
+  return false;
+});
+
+const isRead = computed(() => {
+  if (!showStatusIndicator.value) return false;
+
+  if (
+    isAWhatsAppChannel.value ||
+    isATwilioChannel.value ||
+    isAFacebookInbox.value ||
+    isAnInstagramChannel.value ||
+    isATiktokChannel.value
+  ) {
+    return sourceId.value && status.value === MESSAGE_STATUS.READ;
+  }
+
+  if (isAWebWidgetInbox.value || isAPIInbox.value) {
+    return status.value === MESSAGE_STATUS.READ;
+  }
+
+  return false;
+});
+
+const statusToShow = computed(() => {
+  if (isRead.value) return MESSAGE_STATUS.READ;
+  if (isDelivered.value) return MESSAGE_STATUS.DELIVERED;
+  if (isSent.value) return MESSAGE_STATUS.SENT;
+
+  return MESSAGE_STATUS.PROGRESS;
+});
+</script>
+
+<template>
+  <div class="text-xs flex items-center gap-1.5">
+    <div class="inline">
+      <time class="inline">{{ readableTime }}</time>
+    </div>
+    <Icon v-if="isPrivate" icon="i-lucide-lock-keyhole" class="size-3" />
+    <MessageStatus v-if="showStatusIndicator" :status="statusToShow" />
+  </div>
+</template>
+`