hedena_gold/apps/admin-panel/src/views/order/OrderStatusTimeline.vue

<!--
  Admin status rail — same language as the customer app's tlSheet.
  Rail (markers / stem / current) stays; actions stay the same logically
  (ثبت for every pending, حذف for proceeded except first) but sit quietly
  in one line so the list does not feel stacked and noisy.
-->
<template>
  <div v-if="activity.length" class="ost">
    <header class="ost__banner">
      <span class="ost__chip">وضعیت</span>
      <span class="ost__dash" aria-hidden="true" />
      <span
        v-if="current"
        class="ost__badge"
        :style="{
          background: orderStatusColor(current.status).background,
          color: orderStatusColor(current.status).font,
        }"
      >
        <component :is="orderStatusIcon(current.status)" />
        {{ nodeTitle(current) }}
      </span>
    </header>

    <ol class="ost__rail">
      <li
        v-for="(node, index) in nodes"
        :key="node.status || index"
        class="ost__node"
        :class="[`is-${node.state}`]"
      >
        <div class="ost__axis" aria-hidden="true">
          <span
            v-if="node.state === 'current'"
            class="ost__halo"
            :style="{ color: orderStatusColor(node.status).font }"
          />
          <span class="ost__marker" :style="markerStyle(node)">
            <component :is="orderStatusIcon(node.status)" />
          </span>
          <span
            v-if="index < nodes.length - 1"
            class="ost__stem"
            :style="node.state === 'pending' ? undefined : { background: orderStatusColor(node.status).font }"
          />
        </div>

        <div class="ost__main">
          <div class="ost__row">
            <div class="ost__copy">
              <div class="ost__status">{{ nodeTitle(node) }}</div>
              <p v-if="node.proceed && node.note" class="ost__note">{{ node.note }}</p>
            </div>

            <div class="ost__meta">
              <time v-if="node.proceed && node.uaj" class="ost__when" dir="ltr">{{ formatWhen(node.uaj) }}</time>
              <span v-else-if="node.proceed" class="ost__when is-wait">—</span>
              <span v-else class="ost__when is-wait">در انتظار</span>

              <a-popconfirm
                v-if="node.proceed && canRemove && index > 0"
                ok-text="بله"
                cancel-text="بی‌خیال"
                placement="topLeft"
                @confirm="emit('remove', node)"
              >
                <template #title><p>آیا مطمئن به حذف وضعیت مورد نظر هستید ؟</p></template>
                <a-button
                  danger
                  ghost
                  size="small"
                  class="ost__iconBtn"
                  aria-label="حذف وضعیت"
                >
                  <template #icon><DeleteOutlined /></template>
                </a-button>
              </a-popconfirm>
            </div>
          </div>

          <div v-if="!node.proceed && canSubmit" class="ost__submit">
            <a-input
              v-model:value="node.note"
              size="small"
              placeholder="یادداشت"
              allow-clear
              @pressEnter="emit('submit', node)"
            />
            <a-button size="small" type="primary" @click="emit('submit', node)">ثبت وضعیت</a-button>
          </div>
        </div>
      </li>
    </ol>
  </div>
  <a-empty v-else description="مسیری برای این سفارش ثبت نشده است." />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import moment from 'moment-jalaali';
import { DeleteOutlined } from '@ant-design/icons-vue';
import {
  orderStatusColor,
  orderStatusIcon,
  orderStatusLabel,
} from '../../utils/orderStatus';

export type ActivityItem = {
  status: string;
  title?: string;
  proceed?: boolean;
  uaj?: string | null;
  note?: string;
};

type NodeState = 'done' | 'current' | 'pending';

type TimelineNode = ActivityItem & { state: NodeState };

const props = defineProps<{
  activity: ActivityItem[];
  canSubmit?: boolean;
  canRemove?: boolean;
}>();

const emit = defineEmits<{
  (e: 'submit', item: ActivityItem): void;
  (e: 'remove', item: ActivityItem): void;
}>();

const activity = computed(() => props.activity ?? []);

const lastProceedIdx = computed(() => {
  let idx = -1;
  activity.value.forEach((item, i) => {
    if (item.proceed) idx = i;
  });
  return idx;
});

const nodes = computed((): TimelineNode[] =>
  activity.value.map((item, index) => {
    let state: NodeState = 'pending';
    if (item.proceed) {
      state = index === lastProceedIdx.value ? 'current' : 'done';
    }
    return { ...item, state };
  }),
);

const current = computed(() => nodes.value.find((n) => n.state === 'current') ?? null);

function nodeTitle(node: ActivityItem) {
  return orderStatusLabel(node.status) || node.title || node.status;
}

function formatWhen(v: string) {
  return moment(v).format('jYYYY/jMM/jDD - HH:mm');
}

function markerStyle(node: TimelineNode) {
  if (node.state === 'pending') return undefined;
  const c = orderStatusColor(node.status);
  return { color: c.font, borderColor: c.font };
}
</script>

<style scoped>
.ost__banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ost__chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}

.ost__dash {
  flex: 1 1 auto;
  height: 0;
  border-top: 1.5px dashed #e5e7eb;
  min-width: 16px;
}

.ost__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ost__badge :deep(.anticon) {
  font-size: 13px;
}

.ost__rail {
  list-style: none;
  margin: 0;
  padding: 0 2px;
}

.ost__node {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-height: 52px;
}

.ost__axis {
  flex: 0 0 40px;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ost__halo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ost__halo::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, currentColor 32%, transparent) 0%,
    color-mix(in srgb, currentColor 12%, transparent) 38%,
    transparent 70%
  );
  filter: blur(1.5px);
  opacity: 0;
  animation: ostHalo 4.8s ease-in-out infinite;
}

@keyframes ostHalo {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ost__halo::before {
    animation: none;
    opacity: 0.35;
  }
}

.ost__marker {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  font-size: 16px;
}

.ost__node.is-pending .ost__marker {
  color: #9ca3af;
  border-color: #9ca3af;
  border-style: dashed;
}

.ost__stem {
  flex: 1 1 auto;
  width: 1.5px;
  margin: 4px 0;
  background: #e5e7eb;
  min-height: 12px;
}

.ost__node.is-pending .ost__stem {
  width: 2px;
  background-image: repeating-linear-gradient(180deg, #e5e7eb 0 4px, transparent 4px 8px);
  background-color: transparent;
}

.ost__main {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  padding-bottom: 12px;
}

.ost__node:last-child .ost__main {
  padding-bottom: 2px;
}

.ost__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}

.ost__copy {
  min-width: 0;
  flex: 1;
}

.ost__status {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.35;
}

.ost__note {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1.35;
}

.ost__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ost__when {
  font-size: 11px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.ost__when.is-wait {
  opacity: 0.85;
}

.ost__node.is-pending .ost__status,
.ost__node.is-pending .ost__when {
  color: rgba(0, 0, 0, 0.35);
}

.ost__iconBtn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}

.ost__submit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ost__submit .ant-input {
  flex: 1;
  min-width: 0;
}
</style>