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/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue

@@ -0,0 +1,16 @@
+<script setup>
+import PortalEmptyState from './PortalEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/EmptyState/PortalEmptyState"
+    :layout="{ type: 'single', width: '1100px' }"
+  >
+    <Variant title="Portal Empty State">
+      <div class="w-full h-full px-20 mx-auto bg-n-background">
+        <PortalEmptyState />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import articleContent from './portalEmptyStateContent';
+import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
+
+const createPortalDialogRef = ref(null);
+const openDialog = () => {
+  createPortalDialogRef.value.dialogRef.open();
+};
+
+const router = useRouter();
+
+const onPortalCreate = ({ slug: portalSlug, locale }) => {
+  router.push({
+    name: 'portals_articles_index',
+    params: { portalSlug, locale },
+  });
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('HELP_CENTER.TITLE')"
+    :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-2 gap-4 p-px">
+        <div class="space-y-4">
+          <ArticleCard
+            v-for="(article, index) in articleContent"
+            :id="article.id"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
+          />
+        </div>
+        <div class="space-y-4">
+          <ArticleCard
+            v-for="(article, index) in articleContent.reverse()"
+            :id="article.id"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
+          />
+        </div>
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('HELP_CENTER.NEW_PAGE.CREATE_PORTAL_BUTTON')"
+        icon="i-lucide-plus"
+        @click="openDialog"
+      />
+      <CreatePortalDialog
+        ref="createPortalDialogRef"
+        @create="onPortalCreate"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js

@@ -0,0 +1,172 @@
+export default [
+  {
+    id: 1,
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Michael' },
+    category: {
+      slug: 'configuration',
+      icon: '📦',
+      name: 'Setup & Configuration',
+    },
+    views: 3400,
+  },
+  {
+    id: 2,
+    title: 'Setting up your first Help Center portal',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'John' },
+    category: { slug: 'onboarding', icon: '🧑‍🍳', name: 'Onboarding' },
+    views: 400,
+  },
+  {
+    id: 3,
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Fernando' },
+    category: { slug: 'best-practices', icon: '⛺️', name: 'Best Practices' },
+    views: 400,
+  },
+  {
+    id: 4,
+    title: 'Customizing the appearance of your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Jane' },
+    category: { slug: 'design', icon: '🎨', name: 'Design' },
+    views: 400,
+  },
+  {
+    id: 5,
+    title: 'Integrating your Help Center with third-party tools',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sarah' },
+    category: {
+      slug: 'integrations',
+      icon: '🔗',
+      name: 'Integrations',
+    },
+    views: 2800,
+  },
+  {
+    id: 6,
+    title: 'Managing user permissions in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Alex' },
+    category: {
+      slug: 'administration',
+      icon: '🔐',
+      name: 'Administration',
+    },
+    views: 1200,
+  },
+  {
+    id: 7,
+    title: 'Creating and managing FAQ sections',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Emily' },
+    category: {
+      slug: 'content-management',
+      icon: '📝',
+      name: 'Content Management',
+    },
+    views: 5600,
+  },
+  {
+    id: 8,
+    title: 'Implementing search functionality in your Help Center',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'David' },
+    category: {
+      slug: 'features',
+      icon: '🔍',
+      name: 'Features',
+    },
+    views: 1800,
+  },
+  {
+    id: 9,
+    title: 'Analyzing Help Center usage metrics',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Rachel' },
+    category: {
+      slug: 'analytics',
+      icon: '📊',
+      name: 'Analytics',
+    },
+    views: 3200,
+  },
+  {
+    id: 10,
+    title: 'Setting up multilingual support in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Carlos' },
+    category: {
+      slug: 'localization',
+      icon: '🌍',
+      name: 'Localization',
+    },
+    views: 900,
+  },
+  {
+    id: 11,
+    title: 'Creating interactive tutorials for your products',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Olivia' },
+    category: {
+      slug: 'education',
+      icon: '🎓',
+      name: 'Education',
+    },
+    views: 4100,
+  },
+  {
+    id: 12,
+    title: 'Implementing a feedback system in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Nathan' },
+    category: {
+      slug: 'user-engagement',
+      icon: '💬',
+      name: 'User Engagement',
+    },
+    views: 750,
+  },
+  {
+    id: 13,
+    title: 'Optimizing Help Center content for SEO',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sophia' },
+    category: {
+      slug: 'seo',
+      icon: '🚀',
+      name: 'SEO',
+    },
+    views: 2900,
+  },
+  {
+    id: 14,
+    title: 'Creating a knowledge base for internal teams',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Daniel' },
+    category: {
+      slug: 'internal-resources',
+      icon: '🏢',
+      name: 'Internal Resources',
+    },
+    views: 1500,
+  },
+];