From 8df8618f40b083c5432943df0b04b02996f64e3f Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Fri, 24 Apr 2026 14:04:01 +0800
Subject: [PATCH] feat: wardrobe orders

---
 src/assets/icons/Invoice.svg       |   6 +
 src/views/shoppingCart/sc-item.vue | 342 ++++++++--------
 src/views/wardrobe/Assets.vue      |  46 +--
 src/views/wardrobe/Empty.vue       |  56 +++
 src/views/wardrobe/Orders.vue      | 604 ++++++++++++++++++-----------
 5 files changed, 636 insertions(+), 418 deletions(-)
 create mode 100644 src/assets/icons/Invoice.svg
 create mode 100644 src/views/wardrobe/Empty.vue

diff --git a/src/assets/icons/Invoice.svg b/src/assets/icons/Invoice.svg
new file mode 100644
index 0000000..f2d3425
--- /dev/null
+++ b/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>
diff --git a/src/views/shoppingCart/sc-item.vue b/src/views/shoppingCart/sc-item.vue
index d96d4cd..9b60251 100644
--- a/src/views/shoppingCart/sc-item.vue
+++ b/src/views/shoppingCart/sc-item.vue
@@ -1,164 +1,194 @@
 <template>
-	<div class="sc-item">
-		<slot name="checkbox" />
-		<img :src="info.url" />
-		<div class="content">
-			<div class="title">{{ info.title }}</div>
-			<div class="brand">
-				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
-				<span class="text">{{ info.brand }}</span>
-			</div>
-			<div class="tags" v-if="showTags">
-				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
-			</div>
-			<div class="size" v-if="showSize">
-				<div class="icon"><svg-icon name="order-file" size="18" /></div>
-				<div class="text">
-					<span>{{ FormatBytes(info.fileSize) }}</span>
-					<span v-if="showSizeDate"
-						>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
-							FormatDate(info.date, 'SM D, YYYY, h:mm A')
-						}}</span
-					>
-				</div>
-			</div>
-		</div>
-		<div class="right">
-			<div class="amount">${{ info.amount }}<span> HKD</span></div>
-			<div class="remove" v-if="showRemove" @click="onRemove">
-				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
-				<span class="text">Remove</span>
-			</div>
-		</div>
-	</div>
+  <div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
+    <slot name="checkbox" />
+    <img :src="info.url" />
+    <div class="content">
+      <div class="title">{{ info.title }}</div>
+      <div class="brand">
+        <span class="icon"><svg-icon name="order-shop" size="24" /></span>
+        <span class="text">{{ info.brand }}</span>
+      </div>
+      <div class="tags" v-if="showTags">
+        <span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
+      </div>
+      <div class="size" v-if="showSize">
+        <div class="icon"><svg-icon name="order-file" size="18" /></div>
+        <div class="text">
+          <span>{{ FormatBytes(info.fileSize) }}</span>
+          <span v-if="showSizeDate"
+            >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
+              FormatDate(info.date, 'SM D, YYYY, h:mm A')
+            }}</span
+          >
+        </div>
+      </div>
+    </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>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, onMounted } from 'vue'
-	import { FormatBytes, FormatDate } from '@/utils/tools'
-	const emit = defineEmits(['remove'])
-	const props = defineProps({
-		showTags: { type: Boolean, default: true },
-		showSize: { type: Boolean, default: true },
-		showSizeDate: { type: Boolean, default: true },
-		showRemove: { type: Boolean, default: true },
-		info: { type: Object, default: () => {} }
-	})
-	const onRemove = () => {
-		emit('remove', props.info.id)
-	}
+import { computed, ref, onMounted } from 'vue'
+import { FormatBytes, FormatDate } from '@/utils/tools'
+const emit = defineEmits(['remove'])
+const props = defineProps({
+  showTags: { type: Boolean, default: true },
+  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 = () => {
+  emit('remove', props.info.id)
+}
 </script>
 
 <style lang="less" scoped>
-	.sc-item {
-		border-bottom: 0.1rem solid #c4c4c4;
-		padding: var(--sc-item-padding, 2.4rem 0);
-		display: flex;
-		align-items: center;
-		> img {
-			width: var(--sc-item-img-width, 14.8rem);
-			height: var(--sc-item-img-height, 18.8rem);
-			object-fit: contain;
-			background-color: #f6f6f6;
-		}
-		> .content {
-			flex: 1;
-			margin: var(--sc-item-content-margin, 0 4rem);
-			align-self: var(--sc-item-content-align-self, auto);
-			> * {
-				margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
-				&:last-child {
-					margin-bottom: 0;
-				}
-			}
-			> .title {
-				font-family: KaiseiOpti-Bold;
-				font-size: var(--sc-item-title-font-size, 2.4rem);
-				color: #232323;
-			}
-			> .brand {
-				display: flex;
-				align-items: center;
-				> .icon {
-					width: 2.4rem;
-					height: 2.4rem;
-					margin-right: 1rem;
-				}
-				> .text {
-					font-size: var(--sc-item-brand-font-size, 1.6rem);
-					text-decoration: underline;
-					color: #232323;
-				}
-			}
-			> .tags {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0.8rem;
-				> .tag {
-					min-width: var(--sc-item-tag-min-width, 8.8rem);
-					height: var(--sc-item-tag-height, 2.4rem);
-					line-height: var(--sc-item-tag-height, 2.4rem);
-					border-radius: var(--sc-item-tag-radius, 2.4rem);
-					font-size: var(--sc-item-tag-font-size, 1.4rem);
-					padding: var(--sc-item-tag-padding, 0 1rem);
-					text-align: center;
-					color: #8f8f8f;
-					background-color: #eee;
-				}
-			}
-			> .size {
-				display: flex;
-				align-items: center;
-				> .icon {
-					width: 2.4rem;
-					height: 2.4rem;
-					margin-right: 1rem;
-					color: #808080;
-				}
+.sc-item {
+  border-bottom: 0.1rem solid #c4c4c4;
+  padding: var(--sc-item-padding, 2.4rem 0);
+  display: flex;
+  align-items: center;
+  > img {
+    width: var(--sc-item-img-width, 14.8rem);
+    height: var(--sc-item-img-height, 18.8rem);
+    object-fit: contain;
+    background-color: #f6f6f6;
+  }
+  > .content {
+    flex: 1;
+    margin: var(--sc-item-content-margin, 0 4rem);
+    align-self: var(--sc-item-content-align-self, auto);
+    > * {
+      margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    > .title {
+      font-family: KaiseiOpti-Bold;
+      font-size: var(--sc-item-title-font-size, 2.4rem);
+      color: #232323;
+    }
+    > .brand {
+      display: flex;
+      align-items: center;
+      > .icon {
+        width: 2.4rem;
+        height: 2.4rem;
+        margin-right: 1rem;
+      }
+      > .text {
+        font-size: var(--sc-item-brand-font-size, 1.6rem);
+        text-decoration: underline;
+        color: #232323;
+      }
+    }
+    > .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.8rem;
+      > .tag {
+        min-width: var(--sc-item-tag-min-width, 8.8rem);
+        height: var(--sc-item-tag-height, 2.4rem);
+        line-height: var(--sc-item-tag-height, 2.4rem);
+        border-radius: var(--sc-item-tag-radius, 2.4rem);
+        font-size: var(--sc-item-tag-font-size, 1.4rem);
+        padding: var(--sc-item-tag-padding, 0 1rem);
+        text-align: center;
+        color: #8f8f8f;
+        background-color: #eee;
+      }
+    }
+    > .size {
+      display: flex;
+      align-items: center;
+      > .icon {
+        width: 2.4rem;
+        height: 2.4rem;
+        margin-right: 1rem;
+        color: #808080;
+      }
 
-				> .text {
-					font-family: KaiseiOpti-Regular;
-					font-size: 1.4rem;
-					color: #808080;
-				}
-			}
-		}
-		> .right {
-			align-self: var(--sc-item-right-align-self, end);
-			display: var(--sc-item-right-display, '');
-			flex-direction: var(--sc-item-right-flex-direction, '');
-			justify-content: var(--sc-item-right-justify-content, '');
-			align-items: var(--sc-item-right-align-items, '');
-			height: var(--sc-item-right-height, auto);
-			margin-top: var(--sc-item-right-margin-top, 0);
-			> .amount {
-				font-family: KaiseiOpti-Bold;
-				font-size: var(--sc-item-amount-font-size, 2.2rem);
-				color: #232323;
-				> span {
-					font-size: var(--sc-item-currency-font-size, 1.4rem);
-					color: #585858;
-					vertical-align: bottom;
-				}
-			}
-			> .remove {
-				margin-top: var(--sc-item-remove-margin-top, 9rem);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				user-select: none;
-				cursor: pointer;
-				> .icon {
-					width: 2rem;
-					height: 2rem;
-					margin-right: 0.4rem;
-				}
-				> .text {
-					font-family: KaiseiOpti-Regular;
-					font-size: 1.4rem;
-					color: #808080;
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+      > .text {
+        font-family: KaiseiOpti-Regular;
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
+  }
+  > .right {
+    align-self: var(--sc-item-right-align-self, end);
+    display: var(--sc-item-right-display, '');
+    flex-direction: var(--sc-item-right-flex-direction, '');
+    justify-content: var(--sc-item-right-justify-content, '');
+    align-items: var(--sc-item-right-align-items, '');
+    height: var(--sc-item-right-height, auto);
+    margin-top: var(--sc-item-right-margin-top, 0);
+    > .amount {
+      font-family: KaiseiOpti-Bold;
+      font-size: var(--sc-item-amount-font-size, 2.2rem);
+      color: #232323;
+      > span {
+        font-size: var(--sc-item-currency-font-size, 1.4rem);
+        color: #585858;
+        vertical-align: bottom;
+      }
+    }
+    > .remove {
+      margin-top: var(--sc-item-remove-margin-top, 9rem);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      cursor: pointer;
+      > .icon {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 0.4rem;
+      }
+      > .text {
+        font-family: KaiseiOpti-Regular;
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
+  }
+
+  &.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>
diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue
index eb1467f..7a22eaf 100644
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -99,17 +99,7 @@
         </div>
       </div>
 
-      <div v-else class="assets-empty flex flex-col flex-center">
-        <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>
+      <Empty v-else @explore="goToDigitalItems" />
     </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>
diff --git a/src/views/wardrobe/Empty.vue b/src/views/wardrobe/Empty.vue
new file mode 100644
index 0000000..f09a150
--- /dev/null
+++ b/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>
diff --git a/src/views/wardrobe/Orders.vue b/src/views/wardrobe/Orders.vue
index 38e51ff..ecb22bc 100644
--- a/src/views/wardrobe/Orders.vue
+++ b/src/views/wardrobe/Orders.vue
@@ -1,257 +1,425 @@
+<template>
+  <div class="wardrobe-orders">
+    <div class="orders-toolbar">
+      <button
+        v-for="status in statusOptions"
+        :key="status.key"
+        class="orders-toolbar__chip"
+        type="button"
+        :class="{ 'is-active': activeStatus === status.key }"
+        @click="activeStatus = status.key"
+      >
+        {{ status.label }}
+      </button>
+    </div>
+
+    <div class="orders-list">
+      <article v-for="order in filteredOrders" :key="order.id" class="order-card">
+        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
+          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
+        </button>
+
+        <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>
+
+          <div class="order-card__preview" aria-hidden="true">
+            <span
+              v-for="item in order.items.slice(0, 2)"
+              :key="item.id"
+              class="order-card__thumb"
+              :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 { shallowRef } from 'vue'
-import { useRouter } from 'vue-router'
+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
+  key: OrderStatus
+  label: string
 }
 
-const router = useRouter()
+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: 'Cancelled' }
+  { 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 goToDigitalItems = () => {
-	router.push('/digitalItem')
+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>
 
-<template>
-	<div class="wardrobe-orders">
-		<div class="orders-toolbar">
-			<button
-				v-for="status in statusOptions"
-				:key="status.key"
-				class="orders-toolbar__chip"
-				type="button"
-				:class="{ 'is-active': activeStatus === status.key }"
-				@click="activeStatus = status.key"
-			>
-				{{ status.label }}
-			</button>
-		</div>
-
-		<div class="orders-empty">
-			<div class="orders-empty__illustration" aria-hidden="true">
-				<div class="orders-empty__hook"></div>
-				<div class="orders-empty__hanger"></div>
-				<div class="orders-empty__body"></div>
-				<div class="orders-empty__hem"></div>
-			</div>
-
-			<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
-			<p class="orders-empty__description">
-				Explore the digital item and add pieces to your collection.
-			</p>
-			<button class="orders-empty__button" type="button" @click="goToDigitalItems">
-				Explore Digital Items
-			</button>
-		</div>
-	</div>
-</template>
-
 <style lang="less" scoped>
-	.wardrobe-orders {
-		--wardrobe-border-color: #d9d4cd;
-		--wardrobe-border-dark: #c8c0b4;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		background: #fffdf8;
+.c-svg {
+  width: initial;
+  height: initial;
+}
+.wardrobe-orders {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 9rem;
+  overflow-y: auto;
 
-		> .orders-toolbar {
-			display: flex;
-			align-items: center;
-			gap: 1rem;
-			padding: 2.2rem 3rem 0;
-			flex-wrap: wrap;
+  .orders-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    padding: 3.6rem 0 2.8rem;
+    flex-wrap: wrap;
 
-			> .orders-toolbar__chip {
-				height: 3rem;
-				padding: 0 1.4rem;
-				border: 0.1rem solid var(--wardrobe-border-color);
-				border-radius: 999rem;
-				background: #ffffff;
-				font-family: 'KaiseiOpti-Regular';
-				font-size: 1.2rem;
-				line-height: 1;
-				color: #8b8277;
-				cursor: pointer;
+    .orders-toolbar__chip {
+      height: 4rem;
+      min-width: 8rem;
+      padding: 0 3rem;
+      border: 0.1rem solid #232323;
+      border-radius: 2rem;
+      background: #ffffff;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.6rem;
+      color: #585858;
+      font-weight: 400;
+      cursor: pointer;
 
-				&.is-active {
-					background: #232323;
-					border-color: #232323;
-					color: #ffffff;
-				}
-			}
-		}
+      &.is-active {
+        background: #232323;
+        border-color: #232323;
+        color: #ffffff;
+      }
+    }
+  }
 
-		> .orders-empty {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			padding: 4rem 2rem 7rem;
-			text-align: center;
+  .orders-list {
+    padding-bottom: 8rem;
+  }
+}
 
-			> .orders-empty__illustration {
-				position: relative;
-				width: 8.8rem;
-				height: 10.4rem;
-				margin-bottom: 2.4rem;
-				opacity: 0.55;
+.order-card {
+  position: relative;
+  border-bottom: 0.1rem solid #c4c4c4;
 
-				> .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);
-				}
+  .order-card__toggle {
+    position: absolute;
+    top: 5.8rem;
+    left: 4.2rem;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
 
-				> .orders-empty__hanger {
-					position: absolute;
-					left: 50%;
-					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);
-				}
+    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;
 
-				> .orders-empty__body {
-					position: absolute;
-					left: 50%;
-					top: 3.2rem;
-					width: 4.8rem;
-					height: 4.8rem;
-					border: 0.14rem solid #b8b1a5;
-					border-top: 0;
-					transform: translateX(-50%);
+      &.is-expanded {
+        transform: rotate(45deg);
+      }
+    }
+  }
 
-					&::before,
-					&::after {
-						content: '';
-						position: absolute;
-						top: 0.2rem;
-						width: 1.7rem;
-						height: 2.6rem;
-						border: 0.14rem solid #b8b1a5;
-						border-bottom: 0;
-					}
+  .order-card__summary {
+    min-height: 12.4rem;
+    display: grid;
+    grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
+    align-items: center;
+    column-gap: 2rem;
+    padding-left: 9rem;
 
-					&::before {
-						left: -1.2rem;
-						transform: skewY(22deg);
-					}
+    .order-card__meta {
+      .order-card__id {
+        font-family: 'KaiseiOpti-Bold';
+        font-size: 2rem;
+        line-height: 3rem;
+        color: #232323;
+      }
 
-					&::after {
-						right: -1.2rem;
-						transform: skewY(-22deg);
-					}
-				}
+      .order-card__date {
+        margin: 0.8rem 0 0;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
 
-				> .orders-empty__hem {
-					position: absolute;
-					left: 50%;
-					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%);
+    .order-card__preview {
+      display: flex;
+      align-items: center;
 
-					&::before,
-					&::after {
-						content: '';
-						position: absolute;
-						top: 0;
-						width: 1.3rem;
-						height: 100%;
-						border-bottom: 0.14rem solid #b8b1a5;
-					}
+      .order-card__thumb {
+        width: 8rem;
+        height: 10rem;
+        display: block;
+        margin-right: 1.2rem;
+        img {
+          width: 100%;
+        }
+      }
 
-					&::before {
-						left: -0.1rem;
-						transform: skewX(24deg);
-						transform-origin: left bottom;
-					}
+      .order-card__extra {
+        margin-left: 1.2rem;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        color: #808080;
+      }
+    }
 
-					&::after {
-						right: -0.1rem;
-						transform: skewX(-24deg);
-						transform-origin: right bottom;
-					}
-				}
-			}
+    .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__title {
-				margin: 0;
-				font-family: 'KaiseiOpti-Bold';
-				font-size: 1.8rem;
-				line-height: 1.3;
-				color: #8c8479;
-			}
+      &.is-paid {
+        background: #e8f2ec;
+        color: #769591;
+      }
 
-			> .orders-empty__description {
-				max-width: 32rem;
-				margin: 1rem 0 0;
-				font-family: 'KaiseiOpti-Regular';
-				font-size: 1.3rem;
-				line-height: 1.7;
-				color: #b1a99e;
-			}
+      &.is-unpaid {
+        background: #fef3e2;
+        color: #b48230;
+      }
 
-			> .orders-empty__button {
-				margin-top: 2rem;
-				height: 3.8rem;
-				padding: 0 2.4rem;
-				border: 0.1rem solid var(--wardrobe-border-color);
-				background: #ffffff;
-				font-family: 'KaiseiOpti-Regular';
-				font-size: 1.2rem;
-				line-height: 1;
-				letter-spacing: 0.06rem;
-				text-transform: uppercase;
-				color: #6d655b;
-				cursor: pointer;
-				transition: background-color 0.2s ease, border-color 0.2s ease;
+      &.is-cancelled {
+        background: #fff2f2;
+        color: #c65f5a;
+      }
+    }
 
-				&:hover {
-					background: #f8f3ea;
-					border-color: var(--wardrobe-border-dark);
-				}
-			}
-		}
-	}
+    .order-card__amount {
+      white-space: nowrap;
+      color: #232323;
+      font-family: 'KaiseiOpti-Bold';
 
-	@media (max-width: 960px) {
-		.wardrobe-orders {
-			> .orders-toolbar {
-				padding: 2rem 2rem 0;
-			}
+      span {
+        font-size: 2rem;
+      }
 
-			> .orders-empty {
-				padding: 5rem 2rem 7rem;
-			}
-		}
-	}
+      small {
+        margin-left: 0.4rem;
+        font-size: 1.4rem;
+      }
+    }
+
+    .order-card__action {
+      justify-self: center;
+      width: 14rem;
+      height: 3.8rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      border: 0.1rem solid #c4c4c4;
+      background: #f6f6f6;
+      font-family: 'KaiseiOpti-Bold';
+      font-size: 1.6rem;
+      color: #232323;
+      cursor: pointer;
+
+      &.is-primary {
+        width: 16rem;
+        border-color: #232323;
+        background: #232323;
+        color: #ffffff;
+        font-size: 1.4rem;
+      }
+    }
+  }
+
+  > .order-card__details {
+    margin-left: 9rem;
+    padding: 0 2.4rem;
+    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;
+    }
+
+    :deep(.sc-item:last-child) {
+      border-bottom: 0;
+    }
+  }
+}
 </style>