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/captain/assistant/InboxCard.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Policy from 'dashboard/components/policy.vue';
+import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const inboxName = computed(() => {
+  const inbox = props.inbox;
+  if (!inbox?.name) {
+    return '';
+  }
+
+  const isTwilioChannel = inbox.channel_type === INBOX_TYPES.TWILIO;
+  const isWhatsAppChannel = inbox.channel_type === INBOX_TYPES.WHATSAPP;
+  const isEmailChannel = inbox.channel_type === INBOX_TYPES.EMAIL;
+
+  if (isTwilioChannel || isWhatsAppChannel) {
+    const identifier = inbox.messaging_service_sid || inbox.phone_number;
+    return identifier ? `${inbox.name} (${identifier})` : inbox.name;
+  }
+
+  if (isEmailChannel && inbox.email) {
+    return `${inbox.name} (${inbox.email})`;
+  }
+
+  return inbox.name;
+});
+
+const menuItems = computed(() => [
+  {
+    label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+]);
+
+const icon = computed(() => {
+  const { medium, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, medium, 'outline');
+});
+
+const handleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('action', { action, value, id: props.id });
+};
+</script>
+
+<template>
+  <CardLayout>
+    <div class="flex justify-between w-full gap-1">
+      <span
+        class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
+      >
+        <span :class="icon" />
+        {{ inboxName }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Policy
+          v-on-clickaway="() => toggleDropdown(false)"
+          :permissions="['administrator']"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="menuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 top-full"
+            @action="handleAction($event)"
+          />
+        </Policy>
+      </div>
+    </div>
+  </CardLayout>
+</template>