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/input/DurationInput.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed, watch } from 'vue';
+import Input from './Input.vue';
+import { useI18n } from 'vue-i18n';
+import { DURATION_UNITS } from './constants';
+
+const props = defineProps({
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: Infinity },
+  disabled: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+const duration = defineModel('modelValue', { type: Number, default: null });
+const unit = defineModel('unit', {
+  type: String,
+  default: DURATION_UNITS.MINUTES,
+  validate(value) {
+    return Object.values(DURATION_UNITS).includes(value);
+  },
+});
+
+const convertToMinutes = newValue => {
+  if (unit.value === DURATION_UNITS.MINUTES) {
+    return Math.floor(newValue);
+  }
+  if (unit.value === DURATION_UNITS.HOURS) {
+    return Math.floor(newValue) * 60;
+  }
+  return Math.floor(newValue) * 24 * 60;
+};
+
+const transformedValue = computed({
+  get() {
+    if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
+    if (unit.value === DURATION_UNITS.HOURS)
+      return Math.floor(duration.value / 60);
+    if (unit.value === DURATION_UNITS.DAYS)
+      return Math.floor(duration.value / 24 / 60);
+
+    return 0;
+  },
+  set(newValue) {
+    let minuteValue = convertToMinutes(newValue);
+
+    duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
+  },
+});
+
+// when unit is changed set the nearest value to that unit
+// so if the minute is set to 900, and the user changes the unit to "days"
+// the transformed value will show 0, but the real value will still be 900
+// this might create some confusion, especially when saving
+// this watcher fixes it by rounding the duration basically, to the nearest unit value
+watch(unit, () => {
+  let adjustedValue = convertToMinutes(transformedValue.value);
+  duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
+});
+</script>
+
+<template>
+  <Input
+    v-model="transformedValue"
+    type="number"
+    autocomplete="off"
+    :disabled="disabled"
+    :placeholder="t('DURATION_INPUT.PLACEHOLDER')"
+    class="flex-grow w-full disabled:"
+  />
+  <select
+    v-model="unit"
+    :disabled="disabled"
+    class="mb-0 text-sm disabled:outline-n-weak disabled:opacity-40"
+  >
+    <option :value="DURATION_UNITS.MINUTES">
+      {{ t('DURATION_INPUT.MINUTES') }}
+    </option>
+    <option :value="DURATION_UNITS.HOURS">
+      {{ t('DURATION_INPUT.HOURS') }}
+    </option>
+    <option :value="DURATION_UNITS.DAYS">
+      {{ t('DURATION_INPUT.DAYS') }}
+    </option>
+  </select>
+</template>

app/javascript/dashboard/components-next/input/Input.story.vue

@@ -0,0 +1,68 @@
+<script setup>
+import Input from './Input.vue';
+</script>
+
+<template>
+  <Story title="Components/Input" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <div class="p-4 bg-n-background">
+        <Input placeholder="Default Input" />
+      </div>
+    </Variant>
+
+    <Variant title="With Label">
+      <div class="p-4 bg-n-background">
+        <Input label="Username" placeholder="Enter your username" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="p-4 bg-n-background">
+        <Input label="Disabled Input" placeholder="Can't type here" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Message">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
+        <Input
+          label="Email"
+          placeholder="Enter your email"
+          message="We'll never share your email."
+        />
+        <Input
+          label="Password"
+          type="password"
+          placeholder="Enter your password"
+          message="Password is incorrect"
+          message-type="error"
+        />
+        <Input
+          label="Verification Code"
+          placeholder="Enter the code"
+          message="Code verified successfully"
+          message-type="success"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Different Types">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
+        <Input label="Text" type="text" placeholder="Text input" />
+        <Input label="Number" type="number" placeholder="Number input" />
+        <Input label="Password" type="password" placeholder="Password input" />
+        <Input label="Email" type="email" placeholder="Email input" />
+        <Input label="Date" type="date" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Input Class">
+      <div class="p-4 bg-n-background">
+        <Input
+          label="Custom Style"
+          placeholder="Custom input class"
+          custom-input-class="border-n-amber-5 dark:border-n-amber-5"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/input/Input.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue';
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  customInputClass: { type: [String, Object, Array], default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  id: { type: String, default: '' },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md'].includes(value),
+  },
+  message: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
+  min: { type: String, default: '' },
+  max: { type: String, default: '' },
+  autofocus: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'input',
+  'focus',
+  'enter',
+]);
+
+// Generate a unique ID per component instance when `id` prop is not provided.
+const { uid } = getCurrentInstance();
+const uniqueId = computed(() => props.id || `input-${uid}`);
+
+const isFocused = ref(false);
+const inputRef = ref(null);
+
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-n-teal-10 dark:text-n-teal-10';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
+const inputOutlineClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
+    default:
+      return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
+  }
+});
+
+const handleInput = event => {
+  let value = event.target.value;
+  // Convert to number if type is number and value is not empty
+  if (props.type === 'number' && value !== '') {
+    value = Number(value);
+  }
+  emit('update:modelValue', value);
+  emit('input', event);
+};
+
+const handleFocus = event => {
+  emit('focus', event);
+  isFocused.value = true;
+};
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 !px-3 !py-2';
+    case 'md':
+      return 'h-10 !px-3 !py-2.5';
+    default:
+      return 'h-10 !px-3 !py-2.5';
+  }
+});
+
+const handleBlur = event => {
+  emit('blur', event);
+  isFocused.value = false;
+};
+
+const handleEnter = event => {
+  emit('enter', event);
+};
+
+onMounted(() => {
+  if (props.autofocus) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col min-w-0 gap-1">
+    <label
+      v-if="label"
+      :for="uniqueId"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
+    >
+      {{ label }}
+    </label>
+    <!-- Added prefix slot to allow adding icons to the input -->
+    <slot name="prefix" />
+    <input
+      :id="uniqueId"
+      v-bind="$attrs"
+      ref="inputRef"
+      :value="modelValue"
+      :class="[
+        customInputClass,
+        inputOutlineClass,
+        sizeClass,
+        {
+          error: messageType === 'error',
+          focus: isFocused,
+        },
+      ]"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
+      :max="
+        ['date', 'datetime-local', 'time', 'number'].includes(type)
+          ? max
+          : undefined
+      "
+      class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keyup.enter="handleEnter"
+    />
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>

app/javascript/dashboard/components-next/input/constants.js

@@ -0,0 +1,5 @@
+export const DURATION_UNITS = {
+  MINUTES: 'minutes',
+  HOURS: 'hours',
+  DAYS: 'days',
+};