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/shared/components/charts/BarChart.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js';
+
+const props = defineProps({
+  collection: {
+    type: Object,
+    default: () => ({}),
+  },
+  chartOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
+
+const fontFamily =
+  'Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+
+const defaultChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  legend: {
+    display: false,
+    labels: {
+      fontFamily,
+    },
+  },
+  animation: {
+    duration: 0,
+  },
+  datasets: {
+    bar: {
+      barPercentage: 1.0,
+    },
+  },
+  scales: {
+    x: {
+      ticks: {
+        fontFamily: fontFamily,
+      },
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+    y: {
+      type: 'linear',
+      position: 'left',
+      ticks: {
+        fontFamily: fontFamily,
+        beginAtZero: true,
+        stepSize: 1,
+      },
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+  },
+};
+
+const options = computed(() => {
+  return { ...defaultChartOptions, ...props.chartOptions };
+});
+</script>
+
+<template>
+  <Bar :data="collection" :options="options" />
+</template>