feat: wardrobe orders

src/assets/icons/Invoice.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.75 5.41675H6.25V6.25008H13.75V5.41675Z" fill="currentColor"/>
+<path d="M13.75 8.75H6.25V9.58333H13.75V8.75Z" fill="currentColor"/>
+<path d="M10.4167 12.0833H6.25V12.9166H10.4167V12.0833Z" fill="currentColor"/>
+<path d="M2.5 18.3334L6.25 16.6667L10 18.3334L13.75 16.6667L17.5 18.3334V1.66675H2.5V18.3334ZM3.33333 2.50008H16.6667V17.0509L14.0883 15.9051L13.75 15.7547L13.4117 15.9051L10 17.4213L6.58833 15.9051L6.25 15.7547L5.91167 15.9051L3.33333 17.0509V2.50008Z" fill="currentColor"/>
+</svg>

src/views/shoppingCart/sc-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sc-item">
+  <div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
     <slot name="checkbox" />
     <img :src="info.url" />
     <div class="content">
@@ -25,6 +25,7 @@
     </div>
     <div class="right">
       <div class="amount">${{ info.amount }}<span> HKD</span></div>
+      <SvgIcon v-if="orderActionsLayout" name="download" size="32" color="#232323" />
       <div class="remove" v-if="showRemove" @click="onRemove">
         <span class="icon"><svg-icon name="order-delete" size="18" /></span>
         <span class="text">Remove</span>
@@ -42,6 +43,7 @@
   showSize: { type: Boolean, default: true },
   showSizeDate: { type: Boolean, default: true },
   showRemove: { type: Boolean, default: true },
+  orderActionsLayout: { type: Boolean, default: false },
   info: { type: Object, default: () => {} }
 })
 const onRemove = () => {
@@ -160,5 +162,33 @@
       }
     }
   }
+
+  &.is-order-actions-layout {
+    display: grid;
+    grid-template-columns:
+      var(--sc-item-img-width, 14.8rem)
+      minmax(0, 1fr)
+      var(--sc-item-order-amount-width, 12rem)
+      var(--sc-item-order-action-width, 18rem);
+    column-gap: var(--sc-item-order-column-gap, 2rem);
+
+    > .content {
+      min-width: 0;
+    }
+
+    > .right {
+      display: contents;
+
+      > .amount {
+        grid-column: 3;
+        align-self: center;
+        white-space: nowrap;
+      }
+
+      > .download {
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>

src/views/wardrobe/Assets.vue

@@ -99,17 +99,7 @@
         </div>
       </div>
 
-      <div v-else class="assets-empty flex flex-col flex-center">
+      <Empty v-else @explore="goToDigitalItems" />
-        <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="empty-img" alt="" />
-
-        <h2 class="assets-empty__title">Nothing in Wardrobe yet</h2>
-        <p class="assets-empty__description">
-          Explore the digital item and add pieces to your collection.
-        </p>
-        <div class="assets-empty__button" type="button" @click="goToDigitalItems">
-          Explore Digital Items
-        </div>
-      </div>
     </section>
   </div>
 </template>
@@ -117,6 +107,7 @@
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import img from '@/assets/images/collectionStory/Rectangle.png'
+import Empty from './Empty.vue'
 
 interface FilterOption {
   label: string
@@ -553,39 +544,6 @@ onUnmounted(() => {
       }
     }
 
-    .assets-empty {
-      flex: 1;
-
-      color: #979797;
-      .empty-img {
-        width: 14.2rem;
-        height: 18.8rem;
-      }
-
-      .assets-empty__title {
-        font-family: 'KaiseiOpti-Bold';
-        font-size: 1.6rem;
-        margin: 2.4rem 0 0.8rem;
-      }
-
-      .assets-empty__description {
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.4rem;
-      }
-
-      .assets-empty__button {
-        margin-top: 3rem;
-        height: 4.4rem;
-        line-height: 4.4rem;
-        padding: 0 3.8rem;
-        border: 0.1rem solid #c4c4c4;
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.6rem;
-        color: #585858;
-        cursor: pointer;
-        text-transform: uppercase;
-      }
-    }
   }
 }
 </style>

src/views/wardrobe/Empty.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (event: 'explore'): void
+}>()
+</script>
+
+<template>
+  <div class="wardrobe-empty flex flex-col flex-center">
+    <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
+
+    <h2 class="wardrobe-empty__title">Nothing in Wardrobe yet</h2>
+    <p class="wardrobe-empty__description">
+      Explore the digital item and add pieces to your collection.
+    </p>
+    <button class="wardrobe-empty__button" type="button" @click="emit('explore')">
+      Explore Digital Items
+    </button>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.wardrobe-empty {
+  flex: 1;
+  color: #979797;
+
+  > .wardrobe-empty__image {
+    width: 14.2rem;
+    height: 18.8rem;
+  }
+
+  > .wardrobe-empty__title {
+    font-family: 'KaiseiOpti-Bold';
+    font-size: 1.6rem;
+    margin: 2.4rem 0 0.8rem;
+  }
+
+  > .wardrobe-empty__description {
+    font-family: 'KaiseiOpti-Regular';
+    font-size: 1.4rem;
+  }
+
+  > .wardrobe-empty__button {
+    margin-top: 3rem;
+    height: 4.4rem;
+    line-height: 4.4rem;
+    padding: 0 3.8rem;
+    border: 0.1rem solid #c4c4c4;
+    background: #ffffff;
+    font-family: 'KaiseiOpti-Regular';
+    font-size: 1.6rem;
+    text-transform: uppercase;
+    color: #585858;
+    cursor: pointer;
+  }
+}
+</style>

src/views/wardrobe/Orders.vue

@@ -1,30 +1,3 @@
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { useRouter } from 'vue-router'
-
-type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
-
-interface StatusOption {
-	key: OrderStatus
-	label: string
-}
-
-const router = useRouter()
-
-const statusOptions: StatusOption[] = [
-	{ key: 'all', label: 'All' },
-	{ key: 'paid', label: 'Paid' },
-	{ key: 'unpaid', label: 'Unpaid' },
-	{ key: 'cancelled', label: 'Cancelled' }
-]
-
-const activeStatus = shallowRef<OrderStatus>('all')
-
-const goToDigitalItems = () => {
-	router.push('/digitalItem')
-}
-</script>
-
 <template>
   <div class="wardrobe-orders">
     <div class="orders-toolbar">
@@ -40,51 +13,228 @@ const goToDigitalItems = () => {
       </button>
     </div>
 
-		<div class="orders-empty">
+    <div class="orders-list">
-			<div class="orders-empty__illustration" aria-hidden="true">
+      <article v-for="order in filteredOrders" :key="order.id" class="order-card">
-				<div class="orders-empty__hook"></div>
+        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
-				<div class="orders-empty__hanger"></div>
+          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
-				<div class="orders-empty__body"></div>
+        </button>
-				<div class="orders-empty__hem"></div>
+
+        <div class="order-card__summary">
+          <div class="order-card__meta">
+            <h3 class="order-card__id">{{ order.id }}</h3>
+            <p class="order-card__date">{{ order.date }}</p>
           </div>
 
-			<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
+          <div class="order-card__preview" aria-hidden="true">
-			<p class="orders-empty__description">
+            <span
-				Explore the digital item and add pieces to your collection.
+              v-for="item in order.items.slice(0, 2)"
-			</p>
+              :key="item.id"
-			<button class="orders-empty__button" type="button" @click="goToDigitalItems">
+              class="order-card__thumb"
-				Explore Digital Items
+              :style="{ backgroundColor: item.color }"
+            ></span>
+            <span v-if="getExtraCount(order)" class="order-card__extra">
+              +{{ getExtraCount(order) }} more
+            </span>
+          </div>
+
+          <div class="order-card__status" :class="`is-${order.status}`">
+            {{ order.status.toUpperCase() }}
+          </div>
+
+          <div class="order-card__amount">
+            <span>${{ order.amount }}</span>
+            <small>HKD</small>
+          </div>
+
+          <button
+            class="order-card__action"
+            type="button"
+            :class="{ 'is-primary': order.status === 'unpaid' }"
+          >
+            <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
+            <span v-if="order.status === 'paid'">Invoice</span>
+            <span v-else-if="order.status === 'unpaid'">Complete Payment</span>
+            <span v-else>Buy Again</span>
           </button>
         </div>
+
+        <div v-if="expandedOrderId === order.id" class="order-card__details">
+          <ScItem
+            v-for="item in order.items"
+            :key="item.id"
+            class="order-card__item"
+            :style="{ '--order-item-placeholder': item.color }"
+            :info="item"
+            :show-size="false"
+            :show-size-date="false"
+            :show-remove="false"
+            order-actions-layout
+          />
+        </div>
+      </article>
+    </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+import ScItem from '@/views/shoppingCart/sc-item.vue'
+
+type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
+type ActualOrderStatus = Exclude<OrderStatus, 'all'>
+
+interface StatusOption {
+  key: OrderStatus
+  label: string
+}
+
+interface OrderItem {
+  id: number
+  url: string
+  title: string
+  brand: string
+  fileSize: number
+  date: string
+  amount: number
+  tags: string[]
+  checked: boolean
+  color: string
+}
+
+interface OrderRecord {
+  id: string
+  date: string
+  status: ActualOrderStatus
+  amount: number
+  items: OrderItem[]
+}
+
+const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
+
+const statusOptions: StatusOption[] = [
+  { key: 'all', label: 'All' },
+  { key: 'paid', label: 'Paid' },
+  { key: 'unpaid', label: 'Unpaid' },
+  { key: 'cancelled', label: 'Canceled' }
+]
+
+const createOrderItem = (
+  id: number,
+  title: string,
+  brand: string,
+  amount: number,
+  color: string
+): OrderItem => {
+  return {
+    id,
+    url: placeholderImage,
+    title,
+    brand,
+    fileSize: 1024 * (id + 2),
+    date: '2026-02-16 23:34',
+    amount,
+    color,
+    checked: false,
+    tags: ['female', 'dress', 'blouse', 'outwear']
+  }
+}
+const orders: OrderRecord[] = [
+  {
+    id: 'SP897772698',
+    date: 'Feb 23, 2026, 3:00 PM',
+    status: 'paid',
+    amount: 45,
+    items: [
+      createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
+      createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
+      createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
+    ]
+  },
+  {
+    id: 'SP893872698',
+    date: 'Feb 21, 2026, 10:20 AM',
+    status: 'unpaid',
+    amount: 15,
+    items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
+  },
+  {
+    id: 'SP897262698',
+    date: 'Feb 16, 2026, 11:34 PM',
+    status: 'paid',
+    amount: 29,
+    items: [
+      createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
+      createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
+      createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
+    ]
+  },
+  {
+    id: 'SP892072692',
+    date: 'Feb 2, 2026, 9:34 PM',
+    status: 'paid',
+    amount: 15,
+    items: [
+      createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
+      createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
+    ]
+  },
+  {
+    id: 'SP892972603',
+    date: 'Jan 4, 2026, 8:22 PM',
+    status: 'cancelled',
+    amount: 15,
+    items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
+  }
+]
+
+const activeStatus = shallowRef<OrderStatus>('all')
+const expandedOrderId = shallowRef('SP897262698')
+
+const filteredOrders = computed(() => {
+  if (activeStatus.value === 'all') return orders
+  return orders.filter((order) => order.status === activeStatus.value)
+})
+
+const toggleOrder = (orderId: string) => {
+  expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
+}
+
+const getExtraCount = (order: OrderRecord) => {
+  return Math.max(order.items.length - 2, 0)
+}
+</script>
+
 <style lang="less" scoped>
+.c-svg {
+  width: initial;
+  height: initial;
+}
 .wardrobe-orders {
-		--wardrobe-border-color: #d9d4cd;
-		--wardrobe-border-dark: #c8c0b4;
   height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-		background: #fffdf8;
+  padding: 0 9rem;
+  overflow-y: auto;
 
-		> .orders-toolbar {
+  .orders-toolbar {
     display: flex;
     align-items: center;
-			gap: 1rem;
+    gap: 1.2rem;
-			padding: 2.2rem 3rem 0;
+    padding: 3.6rem 0 2.8rem;
     flex-wrap: wrap;
 
-			> .orders-toolbar__chip {
+    .orders-toolbar__chip {
-				height: 3rem;
+      height: 4rem;
-				padding: 0 1.4rem;
+      min-width: 8rem;
-				border: 0.1rem solid var(--wardrobe-border-color);
+      padding: 0 3rem;
-				border-radius: 999rem;
+      border: 0.1rem solid #232323;
+      border-radius: 2rem;
       background: #ffffff;
       font-family: 'KaiseiOpti-Regular';
-				font-size: 1.2rem;
+      font-size: 1.6rem;
-				line-height: 1;
+      color: #585858;
-				color: #8b8277;
+      font-weight: 400;
       cursor: pointer;
 
       &.is-active {
@@ -95,162 +245,180 @@ const goToDigitalItems = () => {
     }
   }
 
-		> .orders-empty {
+  .orders-list {
-			flex: 1;
+    padding-bottom: 8rem;
-			display: flex;
+  }
-			flex-direction: column;
+}
+
+.order-card {
+  position: relative;
+  border-bottom: 0.1rem solid #c4c4c4;
+
+  .order-card__toggle {
+    position: absolute;
+    top: 5.8rem;
+    left: 4.2rem;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+
+    span {
+      display: block;
+      width: 0.9rem;
+      height: 0.9rem;
+      border-right: 0.1rem solid #585858;
+      border-bottom: 0.1rem solid #585858;
+      transform: rotate(-45deg);
+      transition: transform 0.2s ease;
+
+      &.is-expanded {
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  .order-card__summary {
+    min-height: 12.4rem;
+    display: grid;
+    grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
     align-items: center;
-			justify-content: center;
+    column-gap: 2rem;
-			padding: 4rem 2rem 7rem;
+    padding-left: 9rem;
+
+    .order-card__meta {
+      .order-card__id {
+        font-family: 'KaiseiOpti-Bold';
+        font-size: 2rem;
+        line-height: 3rem;
+        color: #232323;
+      }
+
+      .order-card__date {
+        margin: 0.8rem 0 0;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
+
+    .order-card__preview {
+      display: flex;
+      align-items: center;
+
+      .order-card__thumb {
+        width: 8rem;
+        height: 10rem;
+        display: block;
+        margin-right: 1.2rem;
+        img {
+          width: 100%;
+        }
+      }
+
+      .order-card__extra {
+        margin-left: 1.2rem;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
+
+    .order-card__status {
+      justify-self: start;
+      min-width: 8.8rem;
+      height: 2.4rem;
+      padding: 0 1.6rem;
+      border-radius: 2.4rem;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.4rem;
+      line-height: 2.4rem;
       text-align: center;
 
-			> .orders-empty__illustration {
+      &.is-paid {
-				position: relative;
+        background: #e8f2ec;
-				width: 8.8rem;
+        color: #769591;
-				height: 10.4rem;
-				margin-bottom: 2.4rem;
-				opacity: 0.55;
-
-				> .orders-empty__hook {
-					position: absolute;
-					left: 50%;
-					top: 0;
-					width: 1.6rem;
-					height: 1.6rem;
-					border: 0.14rem solid #b8b1a5;
-					border-bottom-color: transparent;
-					border-left-color: transparent;
-					border-radius: 50%;
-					transform: translateX(-10%) rotate(-18deg);
       }
 
-				> .orders-empty__hanger {
+      &.is-unpaid {
-					position: absolute;
+        background: #fef3e2;
-					left: 50%;
+        color: #b48230;
-					top: 1.2rem;
-					width: 4rem;
-					height: 2rem;
-					border-top: 0.14rem solid #b8b1a5;
-					border-left: 0.14rem solid #b8b1a5;
-					border-right: 0.14rem solid #b8b1a5;
-					transform: translateX(-50%) skewY(-12deg);
       }
 
-				> .orders-empty__body {
+      &.is-cancelled {
-					position: absolute;
+        background: #fff2f2;
-					left: 50%;
+        color: #c65f5a;
-					top: 3.2rem;
-					width: 4.8rem;
-					height: 4.8rem;
-					border: 0.14rem solid #b8b1a5;
-					border-top: 0;
-					transform: translateX(-50%);
-
-					&::before,
-					&::after {
-						content: '';
-						position: absolute;
-						top: 0.2rem;
-						width: 1.7rem;
-						height: 2.6rem;
-						border: 0.14rem solid #b8b1a5;
-						border-bottom: 0;
-					}
-
-					&::before {
-						left: -1.2rem;
-						transform: skewY(22deg);
-					}
-
-					&::after {
-						right: -1.2rem;
-						transform: skewY(-22deg);
       }
     }
 
-				> .orders-empty__hem {
+    .order-card__amount {
-					position: absolute;
+      white-space: nowrap;
-					left: 50%;
+      color: #232323;
-					bottom: 0.8rem;
-					width: 4.6rem;
-					height: 2rem;
-					border-left: 0.14rem solid #b8b1a5;
-					border-right: 0.14rem solid #b8b1a5;
-					border-bottom: 0.14rem solid #b8b1a5;
-					transform: translateX(-50%);
-
-					&::before,
-					&::after {
-						content: '';
-						position: absolute;
-						top: 0;
-						width: 1.3rem;
-						height: 100%;
-						border-bottom: 0.14rem solid #b8b1a5;
-					}
-
-					&::before {
-						left: -0.1rem;
-						transform: skewX(24deg);
-						transform-origin: left bottom;
-					}
-
-					&::after {
-						right: -0.1rem;
-						transform: skewX(-24deg);
-						transform-origin: right bottom;
-					}
-				}
-			}
-
-			> .orders-empty__title {
-				margin: 0;
       font-family: 'KaiseiOpti-Bold';
-				font-size: 1.8rem;
+
-				line-height: 1.3;
+      span {
-				color: #8c8479;
+        font-size: 2rem;
       }
 
-			> .orders-empty__description {
+      small {
-				max-width: 32rem;
+        margin-left: 0.4rem;
-				margin: 1rem 0 0;
+        font-size: 1.4rem;
-				font-family: 'KaiseiOpti-Regular';
+      }
-				font-size: 1.3rem;
-				line-height: 1.7;
-				color: #b1a99e;
     }
 
-			> .orders-empty__button {
+    .order-card__action {
-				margin-top: 2rem;
+      justify-self: center;
+      width: 14rem;
       height: 3.8rem;
-				padding: 0 2.4rem;
+      display: inline-flex;
-				border: 0.1rem solid var(--wardrobe-border-color);
+      align-items: center;
-				background: #ffffff;
+      justify-content: center;
-				font-family: 'KaiseiOpti-Regular';
+      gap: 1rem;
-				font-size: 1.2rem;
+      border: 0.1rem solid #c4c4c4;
-				line-height: 1;
+      background: #f6f6f6;
-				letter-spacing: 0.06rem;
+      font-family: 'KaiseiOpti-Bold';
-				text-transform: uppercase;
+      font-size: 1.6rem;
-				color: #6d655b;
+      color: #232323;
       cursor: pointer;
-				transition: background-color 0.2s ease, border-color 0.2s ease;
 
-				&:hover {
+      &.is-primary {
-					background: #f8f3ea;
+        width: 16rem;
-					border-color: var(--wardrobe-border-dark);
+        border-color: #232323;
-				}
+        background: #232323;
+        color: #ffffff;
+        font-size: 1.4rem;
       }
     }
   }
 
-	@media (max-width: 960px) {
+  > .order-card__details {
-		.wardrobe-orders {
+    margin-left: 9rem;
-			> .orders-toolbar {
+    padding: 0 2.4rem;
-				padding: 2rem 2rem 0;
+    background: #fafafa;
+
+    :deep(.sc-item) {
+      --sc-item-img-width: 9.5rem;
+      --sc-item-img-height: 12rem;
+      --sc-item-padding: 1.2rem 2.4rem;
+      --sc-item-content-margin: 0 4rem;
+      --sc-item-title-font-size: 2rem;
+      --sc-item-brand-font-size: 1.4rem;
+      --sc-item-amount-font-size: 2.2rem;
+      --sc-item-currency-font-size: 1.2rem;
+      --sc-item-tag-min-width: 8.8rem;
+      --sc-item-tag-height: 2.4rem;
+      --sc-item-tag-radius: 2.4rem;
+      --sc-item-tag-font-size: 1.4rem;
+      --sc-item-order-amount-width: 12rem;
+      --sc-item-order-action-width: 18rem;
+      --sc-item-order-column-gap: 2rem;
+      border-bottom-color: #e2e2e2;
     }
 
-			> .orders-empty {
+    :deep(.sc-item:last-child) {
-				padding: 5rem 2rem 7rem;
+      border-bottom: 0;
     }
   }
 }