manja_dev_ui/src/views/warehouse/WarehouseDetail.vue

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBarcodeMovements, getWarehouseBatch } from '@/services/warehouseService'
import { showError } from '@/utils/swal.js'
const route = useRoute(),
  router = useRouter(),
  loading = ref(true),
  item = ref(null),
  barcodeId = ref(''),
  barcodeMovements = ref([])
async function load() {
  try {
    const r = await getWarehouseBatch(route.params.id)
    item.value = r.data
    barcodeId.value = item.value.barcodes?.[0]?.id || ''
    await loadBarcode()
  } catch (e) {
    showError(e?.response?.data?.message || 'Detail barang gagal dimuat.')
    router.back()
  } finally {
    loading.value = false
  }
}
async function loadBarcode() {
  if (!barcodeId.value) {
    barcodeMovements.value = []
    return
  }
  const r = await getBarcodeMovements(item.value.id, barcodeId.value)
  barcodeMovements.value = r.data || []
}
const selectedBarcode = () => item.value?.barcodes?.find((x) => x.id == barcodeId.value)
onMounted(load)
</script>
<template>
  <div class="brdvx-page-container">
    <div v-if="loading" class="brdvx-loading-state">
      <CSpinner />
      <p>Memuat detail...</p>
    </div>
    <template v-else-if="item"
      ><div class="brdvx-page-header d-flex justify-content-between">
        <div>
          <h5 class="mb-0">{{ item.item_number }}</h5>
          <small>{{ item.name }} · Kode {{ item.item_code?.code }} · {{ item.warehouse?.name }}</small>
        </div>
        <CButton size="sm" @click="router.back()">Kembali</CButton>
      </div>
      <CRow
        ><CCol :lg="7"
          ><CCard class="mb-3"
            ><CCardHeader><strong>Detail Barang</strong></CCardHeader
            ><CCardBody
              ><div class="row g-3">
                <div class="col-6">
                  <small>Status</small>
                  <div>{{ item.status }}</div>
                </div>
                <div class="col-6">
                  <small>Kode</small>
                  <div>{{ item.item_code?.code }}</div>
                </div>
                <div class="col-6">
                  <small>Jumlah awal</small>
                  <div>{{ item.received_qty }} {{ item.unit }}</div>
                </div>
                <div class="col-6">
                  <small>Sisa stok</small>
                  <div>
                    {{ item.barcodes.reduce((n, x) => n + Number(x.remaining_qty), 0) }}
                    {{ item.unit }}
                  </div>
                </div>
              </div></CCardBody
            ></CCard
          ><CCard
            ><CCardHeader><strong>Histori Stok Barang</strong></CCardHeader
            ><CCardBody
              ><div v-if="!item.movements?.length" class="text-body-secondary">
                Belum ada histori.
              </div>
              <div v-for="x in item.movements" :key="x.id" class="border-bottom py-2">
                <strong>{{ x.movement_type }}</strong>
                <div>
                  {{ x.qty }} {{ item.unit }} · {{ new Date(x.created_at).toLocaleString('id-ID') }}
                </div>
                <small>{{ x.notes }}</small>
              </div></CCardBody
            ></CCard
          ></CCol
        ><CCol :lg="5"
          ><CCard class="mb-3"
            ><CCardHeader><strong>Detail Barcode</strong></CCardHeader
            ><CCardBody
              ><CFormSelect v-model="barcodeId" @change="loadBarcode"
                ><option v-for="x in item.barcodes" :key="x.id" :value="x.id">
                  {{ x.barcode }}
                </option></CFormSelect
              >
              <div v-if="selectedBarcode()" class="mt-3">
                <div>Serial: {{ selectedBarcode().serial_number || '-' }}</div>
                <div>
                  Jumlah awal: {{ selectedBarcode().initial_qty }} {{ selectedBarcode().unit }}
                </div>
                <div>Sisa: {{ selectedBarcode().remaining_qty }} {{ selectedBarcode().unit }}</div>
                <div>Status: {{ selectedBarcode().status }}</div>
              </div></CCardBody
            ></CCard
          ><CCard
            ><CCardHeader><strong>Histori Barcode</strong></CCardHeader
            ><CCardBody
              ><div v-if="!barcodeMovements.length" class="text-body-secondary">
                Belum ada pergerakan barcode.
              </div>
              <div v-for="x in barcodeMovements" :key="x.id" class="border-bottom py-2">
                <strong>{{ x.movement_type }}</strong>
                <div>{{ x.qty }} · {{ new Date(x.created_at).toLocaleString('id-ID') }}</div>
                <small>{{ x.notes }}</small>
              </div></CCardBody
            ></CCard
          ></CCol
        ></CRow
      ></template
    >
  </div>
</template>