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/dialog/Dialog.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'edit',
+    validator: value => ['alert', 'edit'].includes(value),
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  cancelButtonLabel: {
+    type: String,
+    default: '',
+  },
+  confirmButtonLabel: {
+    type: String,
+    default: '',
+  },
+  disableConfirmButton: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: true,
+  },
+  showConfirmButton: {
+    type: Boolean,
+    default: true,
+  },
+  overflowYAuto: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: 'lg',
+    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
+  },
+});
+
+const emit = defineEmits(['confirm', 'close']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const dialogContentRef = ref(null);
+
+const maxWidthClass = computed(() => {
+  const classesMap = {
+    '3xl': 'max-w-3xl',
+    '2xl': 'max-w-2xl',
+    xl: 'max-w-xl',
+    lg: 'max-w-lg',
+    md: 'max-w-md',
+    sm: 'max-w-sm',
+  };
+
+  return classesMap[props.width] ?? 'max-w-md';
+});
+
+const open = () => {
+  dialogRef.value?.showModal();
+};
+
+const close = () => {
+  emit('close');
+  dialogRef.value?.close();
+};
+
+const confirm = () => {
+  emit('confirm');
+};
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <dialog
+      ref="dialogRef"
+      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="[
+        maxWidthClass,
+        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
+      ]"
+      @close="close"
+    >
+      <OnClickOutside @trigger="close">
+        <form
+          ref="dialogContentRef"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          @submit.prevent="confirm"
+          @click.stop
+        >
+          <div v-if="title || description" class="flex flex-col gap-2">
+            <h3 class="text-base font-medium leading-6 text-n-slate-12">
+              {{ title }}
+            </h3>
+            <slot name="description">
+              <p v-if="description" class="mb-0 text-sm text-n-slate-11">
+                {{ description }}
+              </p>
+            </slot>
+          </div>
+          <slot />
+          <!-- Dialog content will be injected here -->
+          <slot name="footer">
+            <div
+              v-if="showCancelButton || showConfirmButton"
+              class="flex items-center justify-between w-full gap-3"
+            >
+              <Button
+                v-if="showCancelButton"
+                variant="faded"
+                color="slate"
+                :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+                class="w-full"
+                type="button"
+                @click="close"
+              />
+              <Button
+                v-if="showConfirmButton"
+                :color="type === 'edit' ? 'blue' : 'ruby'"
+                :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+                class="w-full"
+                :is-loading="isLoading"
+                :disabled="disableConfirmButton || isLoading"
+                type="submit"
+              />
+            </div>
+          </slot>
+        </form>
+      </OnClickOutside>
+    </dialog>
+  </TeleportWithDirection>
+</template>
+
+<style scoped>
+dialog::backdrop {
+  @apply bg-n-alpha-black1 backdrop-blur-[4px];
+}
+</style>