Initial commit: fabric-trade-user Vue 3 app with mobile and desktop layouts

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-03 09:57:24 +02:00
commit fd3e5e5126
142 changed files with 19798 additions and 0 deletions
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Order, OrderStatus } from '@/types'
+import { ORDER_TRACKING_STEPS } from '@/utils/constants'
+import { getStepTimestamp, getTrackingStepIndex } from '@/utils/orderTracking'
+
+const props = defineProps<{
+  order: Order
+}>()
+
+const currentIndex = computed(() => getTrackingStepIndex(props.order.status))
+
+function stepState(index: number): 'done' | 'current' | 'pending' {
+  if (index < currentIndex.value) return 'done'
+  if (index === currentIndex.value) return 'current'
+  return 'pending'
+}
+
+function formatStepTime(date: string | null) {
+  if (!date) return null
+  const d = new Date(date)
+  const datePart = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(d)
+  const timePart = new Intl.DateTimeFormat('fa-IR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(d)
+  return `${datePart} - ${timePart}`
+}
+
+function timestampFor(step: OrderStatus) {
+  return formatStepTime(getStepTimestamp(props.order, step))
+}
+</script>
+
+<template>
+  <div class="tracking-timeline">
+    <div
+      v-for="(step, index) in ORDER_TRACKING_STEPS"
+      :key="step.status"
+      class="tracking-timeline__item"
+      :class="`tracking-timeline__item--${stepState(index)}`"
+    >
+      <div class="tracking-timeline__marker-wrap">
+        <div class="tracking-timeline__line" />
+        <div class="tracking-timeline__marker">
+          <span v-if="stepState(index) === 'done'" class="tracking-timeline__check">✓</span>
+        </div>
+      </div>
+
+      <div class="tracking-timeline__content">
+        <strong class="tracking-timeline__label">{{ step.label }}</strong>
+        <span v-if="timestampFor(step.status)" class="tracking-timeline__time">
+          {{ timestampFor(step.status) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tracking-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.tracking-timeline__item {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 12px;
+  padding: 6px 0;
+}
+
+.tracking-timeline__item--current {
+  margin: 4px 0;
+  padding: 12px;
+  border-radius: 14px;
+  background: #eef4ff;
+}
+
+.tracking-timeline__marker-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.tracking-timeline__line {
+  position: absolute;
+  top: 22px;
+  bottom: -10px;
+  width: 2px;
+  background: #e2e8f0;
+}
+
+.tracking-timeline__item:last-child .tracking-timeline__line {
+  display: none;
+}
+
+.tracking-timeline__item--done .tracking-timeline__line {
+  background: var(--color-success);
+}
+
+.tracking-timeline__marker {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  border: 2px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.tracking-timeline__item--done .tracking-timeline__marker {
+  background: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.tracking-timeline__item--current .tracking-timeline__marker {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 4px rgba(29, 53, 87, 0.12);
+}
+
+.tracking-timeline__item--pending .tracking-timeline__marker {
+  background: #fff;
+  border-color: #cbd5e1;
+}
+
+.tracking-timeline__check {
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.tracking-timeline__content {
+  min-width: 0;
+  padding-top: 1px;
+}
+
+.tracking-timeline__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  margin-bottom: 2px;
+}
+
+.tracking-timeline__item--done .tracking-timeline__label,
+.tracking-timeline__item--current .tracking-timeline__label {
+  color: var(--color-text);
+}
+
+.tracking-timeline__time {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+</style>