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/pagination/PaginationFooter.story.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue';
+import PaginationFooter from './PaginationFooter.vue';
+
+const createPaginationState = (initialPage, totalItems, itemsPerPage) => {
+  const currentPage = ref(initialPage);
+  const handlePageChange = newPage => {
+    currentPage.value = newPage;
+  };
+  return { currentPage, totalItems, itemsPerPage, handlePageChange };
+};
+
+const defaultState = createPaginationState(1, 100, 16);
+const middlePageState = createPaginationState(3, 100, 16);
+const lastPageState = createPaginationState(7, 100, 16);
+const customItemsState = createPaginationState(2, 100, 10);
+const singlePageState = createPaginationState(1, 10, 16);
+</script>
+
+<template>
+  <Story
+    title="Components/PaginationFooter"
+    :layout="{ type: 'grid', width: '957' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-n-background">
+        <PaginationFooter
+          :current-page="defaultState.currentPage.value"
+          :total-items="defaultState.totalItems"
+          :items-per-page="defaultState.itemsPerPage"
+          @update:current-page="defaultState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Middle Page">
+      <div class="p-4 bg-n-background">
+        <PaginationFooter
+          :current-page="middlePageState.currentPage.value"
+          :total-items="middlePageState.totalItems"
+          :items-per-page="middlePageState.itemsPerPage"
+          @update:current-page="middlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Last Page">
+      <div class="p-4 bg-n-background">
+        <PaginationFooter
+          :current-page="lastPageState.currentPage.value"
+          :total-items="lastPageState.totalItems"
+          :items-per-page="lastPageState.itemsPerPage"
+          @update:current-page="lastPageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Items Per Page">
+      <div class="p-4 bg-n-background">
+        <PaginationFooter
+          :current-page="customItemsState.currentPage.value"
+          :total-items="customItemsState.totalItems"
+          :items-per-page="customItemsState.itemsPerPage"
+          @update:current-page="customItemsState.handlePageChange"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Single Page">
+      <div class="p-4 bg-n-background">
+        <PaginationFooter
+          :current-page="singlePageState.currentPage.value"
+          :total-items="singlePageState.totalItems"
+          :items-per-page="singlePageState.itemsPerPage"
+          @update:current-page="singlePageState.handlePageChange"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useNumberFormatter } from 'shared/composables/useNumberFormatter';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true,
+  },
+  totalItems: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 16,
+  },
+  currentPageInfo: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['update:currentPage']);
+const { t } = useI18n();
+const { formatCompactNumber, formatFullNumber } = useNumberFormatter();
+
+const totalPages = computed(() =>
+  Math.ceil(props.totalItems / props.itemsPerPage)
+);
+const startItem = computed(
+  () => (props.currentPage - 1) * props.itemsPerPage + 1
+);
+const endItem = computed(() =>
+  Math.min(startItem.value + props.itemsPerPage - 1, props.totalItems)
+);
+const isFirstPage = computed(() => props.currentPage === 1);
+const isLastPage = computed(() => props.currentPage === totalPages.value);
+const changePage = newPage => {
+  if (newPage >= 1 && newPage <= totalPages.value) {
+    emit('update:currentPage', newPage);
+  }
+};
+
+const currentPageInformation = computed(() => {
+  const translationKey = props.currentPageInfo || 'PAGINATION_FOOTER.SHOWING';
+  return t(
+    translationKey,
+    {
+      startItem: formatFullNumber(startItem.value),
+      endItem: formatFullNumber(endItem.value),
+      totalItems: formatCompactNumber(props.totalItems),
+    },
+    Number(props.totalItems)
+  );
+});
+
+const pageInfo = computed(() => {
+  return t(
+    'PAGINATION_FOOTER.CURRENT_PAGE_INFO',
+    {
+      currentPage: '',
+      totalPages: formatCompactNumber(totalPages.value),
+    },
+    Number(totalPages.value)
+  );
+});
+</script>
+
+<template>
+  <div
+    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+  >
+    <div class="flex items-center gap-3">
+      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
+        {{ currentPageInformation }}
+      </span>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button
+        icon="i-lucide-chevrons-left"
+        variant="ghost"
+        size="sm"
+        color="slate"
+        class="!w-8 !h-6"
+        :disabled="isFirstPage"
+        @click="changePage(1)"
+      />
+      <Button
+        icon="i-lucide-chevron-left"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        class="!w-8 !h-6"
+        :disabled="isFirstPage"
+        @click="changePage(currentPage - 1)"
+      />
+      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
+        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
+          {{ formatFullNumber(currentPage) }}
+        </span>
+        <span class="truncate">
+          {{ pageInfo }}
+        </span>
+      </div>
+      <Button
+        icon="i-lucide-chevron-right"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        class="!w-8 !h-6"
+        :disabled="isLastPage"
+        @click="changePage(currentPage + 1)"
+      />
+      <Button
+        icon="i-lucide-chevrons-right"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        class="!w-8 !h-6"
+        :disabled="isLastPage"
+        @click="changePage(totalPages)"
+      />
+    </div>
+  </div>
+</template>