web/app/components/inventory/SelectedInvItem.vue

<script setup>
const props = defineProps({
  invItem: Object
});

const { $dayjs, $numtoString } = useNuxtApp();
const emit = defineEmits('unselect');
</script>

<template>
  <div v-if="invItem" class="cell relative fs-14">
    <div class="card">
      <button
        @click="emit('unselect')"
        class="button is-white rounded-full has-text-grey absolute size-8 is-flex is-justify-content-center is-align-items-center"
        style="right: 0.5rem; top: 0.5rem;"
      >
        <span class="icon">
          <Icon name="material-symbols:close-rounded" :size="22" />
        </span>
      </button>
      <div class="card-content is-clipped">
        <div class="py-3 sticky top-0">
          <p class="fs-17 font-semibold">Chi tiết sản phẩm</p> 
        </div>
        <hr class="m-0" />
        <div style="max-height: 600px; overflow-y: scroll">
          <div>
            <div class="is-flex is-gap-2 is-align-items-center">
              <div class="is-flex is-gap-2">
                <div 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 mb-1">{{ invItem.name }}</p>
                  <p class="has-text-grey-40">SKU: {{ invItem.sku }}</p>
                  <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
                </div>
              </div>
            </div>
            <div class="is-flex is-gap-1 mt-4">
              <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">{{ $numtoString(invItem.unit_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">{{ $numtoString(invItem.total, { hasUnit: true }) }}</p>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Tóm tắt tồn kho</p>
              <div class="is-flex is-flex-direction-column">
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Tồn hiện tại</p>
                  <p class="fs-14 font-semibold">{{ invItem.stock }}</p>
                </div>
                <hr class="my-1 has-background-grey-95" />
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Đặt trước</p>
                  <p class="fs-14 font-semibold has-text-orange">{{ invItem.preorder }}</p>
                </div>
                <hr class="my-1 has-background-grey-95" />
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Khả dụng</p>
                  <p class="fs-14 font-semibold has-text-green">{{ invItem.available }}</p>
                </div>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
              <div class="p-4 rounded-md has-background-grey-95">
                <div class="is-flex is-gap-1">
                  <Icon name="material-symbols:location-on-outline-rounded" :size="20" />
                  <div>
                    <p>{{ invItem.storage }}</p>
                    <p class="mt-1 fs-13 is-family-monospace">{{ invItem.storage__position }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
              <div class="p-4 rounded-md has-background-grey-95">
                <p class="fs-13 has-text-grey">Mã lô</p>
                <p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
              </div>
              <div class="p-4 mt-4 rounded-md has-background-grey-95">
                <div class="is-flex is-gap-1 is-align-items-center">
                  <Icon name="material-symbols:calendar-today-outline-rounded" :size="18"
                    class="has-text-grey-50"
                   />
                  <p class="fs-13 has-text-grey">Hạn sử dụng</p>
                </div>
                <p class="mt-1">{{ $dayjs(invItem.expired).format('LL') }}</p>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Lịch sử di chuyển</p>
              <div
                v-for="move in invItem.moveHistory"
                :key="move.id"
                class="p-4 mb-4 rounded-md has-background-grey-95 has-text-grey-40 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-sm 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>
          <hr />
          <div class="mt-6">
            <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>
      </div>
    </div>
  </div> 
</template>
<style scoped>
.card-content {
  padding: 0; /* 1.5rem */

  > div {
    padding: var(--bulma-card-content-padding);
  }
}
</style>