add frontend

2026-06-19 17:42:09 +08:00
parent 49973271e5
commit 5f69ce1a95
53 changed files with 6591 additions and 0 deletions
@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue'
+import Card from '@/components/ui/Card.vue'
+import Badge from '@/components/ui/Badge.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
+
+const props = defineProps({
+  orders: { type: Array, default: () => [] },
+})
+
+const pendingOrders = computed(() =>
+  props.orders.filter(o => o.status === 'Pending' || o.status === 'InProgress'),
+)
+
+const resultedOrders = computed(() =>
+  props.orders.filter(o => o.status === 'Resulted'),
+)
+
+function statusVariant(status) {
+  if (status === 'Resulted') return 'success'
+  if (status === 'InProgress') return 'info'
+  return 'warning'
+}
+</script>
+
+<template>
+  <Card>
+    <template #header>
+      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+        Orders
+      </h2>
+    </template>
+
+    <EmptyState v-if="orders.length === 0" message="No orders" />
+
+    <div v-else class="space-y-4">
+      <section v-if="pendingOrders.length">
+        <h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Pending</h3>
+        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+          <li
+            v-for="order in pendingOrders"
+            :key="order.id"
+            class="flex items-center justify-between gap-3 py-2 first:pt-0"
+          >
+            <div class="min-w-0">
+              <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
+              <div class="text-xs text-gray-500 dark:text-gray-400">{{ order.orderType }}</div>
+            </div>
+            <Badge :variant="statusVariant(order.status)" size="xs">{{ order.status }}</Badge>
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="resultedOrders.length">
+        <h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Resulted</h3>
+        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+          <li
+            v-for="order in resultedOrders"
+            :key="order.id"
+            class="py-2 first:pt-0"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <div class="min-w-0">
+                <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
+                <div v-if="order.resultSummary" class="text-xs text-gray-500 dark:text-gray-400">
+                  {{ order.resultSummary }}
+                </div>
+              </div>
+              <Badge variant="success" size="xs">Resulted</Badge>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </Card>
+</template>