changes

app/components/inventory/InventoryItemDetails.vue

@@ -0,0 +1,166 @@
+<script setup>
+const props = defineProps({ variant: Object });
+
+const moveHistory = [
+  {
+    id: 1,
+    type: 1,
+    type__name: "Nhập",
+    date: "2026-04-03",
+    code: "PO-009",
+    to__code: "WH-HCM/C-01",
+    delta: 300,
+  },
+  {
+    id: 2,
+    type: 2,
+    type__name: "Xuất",
+    date: "2026-04-04",
+    code: "SO-034",
+    from__code: "WH-HCM/C-01",
+    delta: -100,
+  },
+];
+</script>
+
+<template>
+  <div>
+    <div class="block is-flex is-gap-2 is-align-items-center">
+      <div class="is-flex is-gap-2 is-align-items-flex-start">
+        <NuxtImg
+          v-if="variant.image__path"
+          :src="variant.image__path"
+          width="45"
+        />
+        <div
+          v-else
+          class="has-background-purple size-12 rounded-md is-flex is-justify-content-center is-align-items-center"
+        >
+          <Icon
+            name="material-symbols:deployed-code-outline"
+            :size="24"
+            class="has-text-white"
+          />
+        </div>
+        <div>
+          <p class="font-semibold">
+            {{ variant.product__name }} - {{ variant.color__code }} - {{ variant.ram__code }}
+            {{ variant.internal_storage__code }}
+          </p>
+          <p class="tag fs-13">{{ variant.code }}</p>
+          <p class="fs-12 has-text-grey mt-1">Category{{ variant.category }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="mb-6 is-flex is-gap-1">
+      <div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-blue-95 has-text-blue-40">
+        <p class="fs-13">Giá đơn vị</p>
+        <p class="fs-16 font-semibold">
+          {{ $formatNum(variant.price, { hasUnit: true }) }}
+        </p>
+      </div>
+      <div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-purple-90 has-text-purple-40">
+        <p class="fs-13">Tổng giá trị</p>
+        <p class="fs-16 font-semibold">
+          {{ $formatNum(variant.total || variant.price * 25, { hasUnit: true }) }}
+        </p>
+      </div>
+    </div>
+    <div class="mb-6">
+      <p class="fs-15 font-semibold mb-2">Tóm tắt tồn kho</p>
+      <div class="fs-14 is-flex is-flex-direction-column">
+        <div class="py-1 is-flex is-justify-content-space-between">
+          <p class="has-text-grey">Tồn hiện tại</p>
+          <p class="font-semibold">{{ variant.stock || 25 }}</p>
+        </div>
+        <hr class="my-1" />
+        <div class="py-1 is-flex is-justify-content-space-between">
+          <p class="has-text-grey">Đặt trước</p>
+          <p class="font-semibold has-text-orange">
+            {{ variant.preorder || 0 }}
+          </p>
+        </div>
+        <hr class="my-1" />
+        <div class="py-1 is-flex is-justify-content-space-between">
+          <p class="has-text-grey">Khả dụng</p>
+          <p class="font-semibold has-text-green-40">
+            {{ variant.available || 25 }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="mb-6">
+      <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
+      <div class="p-4 rounded-md has-background-grey-100">
+        <div class="is-flex is-gap-1">
+          <Icon
+            name="material-symbols:location-on-outline-rounded"
+            :size="20"
+          />
+          <div>
+            <p>{{ variant.imeis__warehouse__name }}</p>
+            <p class="mt-1 fs-13 has-text-grey">
+              {{ variant.imeis__warehouse__address }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mb-6">
+      <p class="fs-15 font-semibold mb-4">Lịch sử di chuyển</p>
+      <div
+        v-for="move in moveHistory"
+        :key="move.id"
+        class="p-4 mb-4 rounded-md has-background-grey-100 has-text-grey fs-12"
+      >
+        <div class="is-flex is-justify-content-space-between mb-1">
+          <div class="is-flex is-gap-1 is-align-items-center">
+            <div
+              :class="[
+                'p-1 rounded is-flex is-align-items-center',
+                `has-background-${move.delta > 0 ? 'success' : 'danger'}-soft`,
+              ]"
+            >
+              <Icon
+                :name="move.delta > 0 ? 'ph:chart-line-up' : 'ph:chart-line-down'"
+                :size="18"
+                :class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`"
+              />
+            </div>
+            <p :class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`">
+              {{ move.type__name }}
+            </p>
+          </div>
+          <p :class="['fs-14 font-semibold', `has-text-${move.delta > 0 ? 'success' : 'danger'}-40`]">
+            {{
+              new Intl.NumberFormat("en-US", {
+                signDisplay: "exceptZero",
+              }).format(move.delta)
+            }}
+          </p>
+        </div>
+        <p class="is-flex is-gap-0.5 is-align-items-center">
+          <span>{{ $dayjs(move.date).format("L") }}</span>
+          <span>•</span>
+          <span class="is-family-monospace">{{ move.code }}</span>
+        </p>
+        <p>
+          <span>{{ move.from__code ? "Từ" : "Đến" }}</span>
+          <span>: </span>
+          <span>{{ move.from__code || move.to__code }}</span>
+        </p>
+      </div>
+    </div>
+    <div>
+      <p class="fs-15 font-semibold mb-4">Thao tác nhanh</p>
+      <div class="fixed-grid">
+        <div class="grid">
+          <button class="button fs-13 is-primary">Điều chỉnh</button>
+          <button class="button fs-13">Chuyển kho</button>
+          <button class="button fs-13">Xem báo cáo</button>
+          <button class="button fs-13">In nhãn</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>