web/app/components/inventory/InventoryItemDetails.vue

<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>