big update all menus

2026-08-07 09:17:04 +07:00
parent 484f89e2ee
commit 8682cb7e73
28 changed files with 4012 additions and 990 deletions
@@ -0,0 +1,127 @@
+<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>