@questwork/q-inventory 0.1.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@questwork/q-inventory",
+  "version": "0.1.0",
+  "description": "Questwork QInventory",
+  "main": "./dist/q-inventory.min.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/q-inventory.min.cjs",
+      "import": "./dist/q-inventory.esm.js",
+      "default": "./dist/q-inventory.min.js",
+      "types": "./dist/q-inventory.d.ts"
+    }
+  },
+  "types": "./dist/q-inventory.d.ts",
+  "author": {
+    "name": "Questwork Consulting Limited",
+    "email": "info@questwork.com",
+    "url": "https://questwork.com/"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@questwork/q-utilities": "^0.1.31",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@questwork/q-utilities": "^0.1.36",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.39.4",
+    "happy-dom": "^15.11.7",
+    "sass": "^1.83.1",
+    "storybook": "^8.4.7",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.10",
+    "vite-plugin-commonjs": "^0.10.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.4",
+    "vue": "^3.5.13"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "@questwork/q-inventory-model": "^0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:app": "vite build -c vite.app.config.js",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6051",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/components/InventoryAssetDetail.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="inventory-asset-detail">
+    <div v-if="asset" class="inventory-asset-detail__body">
+      <h3>{{ getValue('assetTag') }}</h3>
+      <div>{{ getValue('name') }}</div>
+      <div>{{ getValue('currentLocationCode') }}</div>
+      <button type="button" @click="loadHistory">Load History</button>
+      <div
+        v-for="item in history"
+        :key="getHistoryKey(item)"
+        class="inventory-asset-detail__history"
+      >
+        {{ getHistoryText(item) }}
+      </div>
+    </div>
+    <div v-else class="inventory-asset-detail__empty">No asset selected</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { InventoryMovementApiClient } from '../models/index.js'
+
+defineOptions({
+  name: 'inventory-asset-detail',
+})
+
+const props = defineProps<{
+  movementApiClient?: InventoryMovementApiClient
+  asset?: unknown
+}>()
+
+const history = ref<unknown[]>([])
+
+async function loadHistory() {
+  const assetTag = getValue('assetTag')
+  if (assetTag && props.movementApiClient?.findAll) {
+    history.value = await props.movementApiClient.findAll({ assetTag })
+  }
+}
+
+function getValue(key: string) {
+  return String((props.asset as Record<string, unknown>)?.[key] || '')
+}
+
+function getHistoryKey(item: unknown) {
+  const data = item as Record<string, unknown>
+  return String(data.id || data.inventoryMovementCode || data.movedAt || JSON.stringify(item))
+}
+
+function getHistoryText(item: unknown) {
+  const data = item as Record<string, unknown>
+  return `${data.fromLocationCode || '-'} -> ${data.toLocationCode || '-'}`
+}
+</script>

package/src/components/InventoryLocationAdmin.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="inventory-location-admin">
+    <form class="inventory-location-admin__form" @submit.prevent="submit">
+      <input v-model="form.locationCode" placeholder="Location code" />
+      <input v-model="form.name" placeholder="Name" />
+      <input v-model="form.locationType" placeholder="Type" />
+      <button type="submit">Save</button>
+    </form>
+    <div
+      v-for="location in locations"
+      :key="getLocationKey(location)"
+      class="inventory-location-admin__row"
+    >
+      {{ getLocationText(location) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+defineOptions({
+  name: 'inventory-location-admin',
+})
+
+defineProps<{
+  locations?: unknown[]
+}>()
+
+const emit = defineEmits<{
+  saveLocation: [payload: Record<string, string>]
+}>()
+
+const form = reactive({
+  locationCode: '',
+  locationType: '',
+  name: '',
+})
+
+function submit() {
+  emit('saveLocation', { ...form })
+  form.locationCode = ''
+  form.locationType = ''
+  form.name = ''
+}
+
+function getLocationKey(location: unknown) {
+  const data = location as Record<string, unknown>
+  return String(data.id || data.locationCode || JSON.stringify(location))
+}
+
+function getLocationText(location: unknown) {
+  const data = location as Record<string, unknown>
+  return `${data.locationCode || ''} ${data.name || ''}`.trim()
+}
+</script>

package/src/components/InventoryLocationDetail.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="inventory-location-detail">
+    <div class="inventory-location-detail__header">
+      <div>{{ locationCode || 'No location selected' }}</div>
+      <button type="button" :disabled="!locationCode" @click="loadAssets">Load Assets</button>
+    </div>
+    <div
+      v-for="asset in assets"
+      :key="getAssetKey(asset)"
+      class="inventory-location-detail__asset"
+    >
+      {{ getAssetText(asset) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { InventoryAssetApiClient } from '../models/index.js'
+
+defineOptions({
+  name: 'inventory-location-detail',
+})
+
+const props = defineProps<{
+  assetApiClient?: InventoryAssetApiClient
+  location?: unknown
+}>()
+
+const assets = ref<unknown[]>([])
+const locationCode = computed(() => {
+  if (typeof props.location === 'string') return props.location
+  return String((props.location as Record<string, unknown>)?.locationCode || '')
+})
+
+async function loadAssets() {
+  if (locationCode.value && props.assetApiClient?.findAll) {
+    assets.value = await props.assetApiClient.findAll({ currentLocationCode: locationCode.value })
+  }
+}
+
+function getAssetKey(asset: unknown) {
+  const data = asset as Record<string, unknown>
+  return String(data.id || data.assetTag || JSON.stringify(asset))
+}
+
+function getAssetText(asset: unknown) {
+  const data = asset as Record<string, unknown>
+  return `${data.assetTag || ''} ${data.name || ''}`.trim()
+}
+</script>

package/src/components/InventoryOverview.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="inventory-overview">
+    <div class="inventory-overview__header">
+      <div>Assets</div>
+      <button type="button" @click="reload">Reload</button>
+    </div>
+    <div class="inventory-overview__rows">
+      <button
+        v-for="asset in displayAssets"
+        :key="getAssetKey(asset)"
+        class="inventory-overview__row"
+        type="button"
+        @click="$emit('selectAsset', asset)"
+      >
+        <span>{{ getAssetText(asset, 'assetTag') }}</span>
+        <span>{{ getAssetText(asset, 'name') }}</span>
+        <span
+          class="inventory-overview__location"
+          @click.stop="$emit('selectLocation', getAssetText(asset, 'currentLocationCode'))"
+        >
+          {{ getDisplayLocation(asset) }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  getVirtualUserCode,
+  isVirtualInventoryLocation,
+  isVirtualUserLocationCode,
+} from '@questwork/q-inventory-model'
+import type { InventoryAssetApiClient } from '../models/index.js'
+
+defineOptions({
+  name: 'inventory-overview',
+})
+
+const props = defineProps<{
+  assetApiClient?: InventoryAssetApiClient
+  assets?: unknown[]
+  locations?: unknown[]
+}>()
+
+defineEmits<{
+  selectAsset: [payload: unknown]
+  selectLocation: [payload: unknown]
+}>()
+
+const loadedAssets = ref<unknown[]>([])
+const displayAssets = computed(() => loadedAssets.value.length > 0 ? loadedAssets.value : (props.assets || []))
+
+async function reload() {
+  if (props.assetApiClient?.findAll) {
+    loadedAssets.value = await props.assetApiClient.findAll()
+  }
+}
+
+function getAssetKey(asset: unknown) {
+  return getAssetText(asset, 'id') || getAssetText(asset, 'assetTag') || JSON.stringify(asset)
+}
+
+function getAssetText(asset: unknown, key: string) {
+  return String((asset as Record<string, unknown>)?.[key] || '')
+}
+
+function getDisplayLocation(asset: unknown) {
+  const locationCode = getAssetText(asset, 'currentLocationCode')
+  const locationKind = getAssetText(asset, 'currentLocationKind')
+  if (!locationCode) return 'Never scanned'
+  if (isVirtualInventoryLocation({ locationCode, locationKind }) || isVirtualUserLocationCode(locationCode)) {
+    return `In transit - ${getVirtualUserCode(locationCode)}`
+  }
+  const location = (props.locations || []).find((item) => {
+    return (item as Record<string, unknown>).locationCode === locationCode
+  }) as Record<string, unknown> | undefined
+  return String(location?.name || locationCode)
+}
+</script>

package/src/components/InventoryScanner.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="inventory-scanner">
+    <div class="inventory-scanner__mode">
+      <button
+        class="inventory-scanner__mode-button"
+        :class="{ 'inventory-scanner__mode-button--active': mode === INVENTORY_MOVEMENT_TYPE.PICKUP }"
+        type="button"
+        @click="setMode(INVENTORY_MOVEMENT_TYPE.PICKUP)"
+      >
+        Pickup
+      </button>
+      <button
+        class="inventory-scanner__mode-button"
+        :class="{ 'inventory-scanner__mode-button--active': mode === INVENTORY_MOVEMENT_TYPE.DROPOFF }"
+        type="button"
+        @click="setMode(INVENTORY_MOVEMENT_TYPE.DROPOFF)"
+      >
+        Drop-off
+      </button>
+    </div>
+    <div class="inventory-scanner__state">
+      <div>Mode: {{ mode }}</div>
+      <div>{{ locationLabel }}: {{ activeLocationCode || '-' }}</div>
+      <div>Holder: {{ holderLocationCode || '-' }}</div>
+    </div>
+    <div class="inventory-scanner__manual">
+      <input
+        v-model="manualQr"
+        class="inventory-scanner__input"
+        placeholder="Scan or enter QR text"
+        @keyup.enter="submitManualQr"
+      />
+      <button type="button" @click="submitManualQr">Submit</button>
+    </div>
+    <div class="inventory-scanner__basket-header">
+      <div>
+        <strong>My Basket</strong>
+        <span>{{ basketItems.length }} on hand</span>
+      </div>
+      <button
+        type="button"
+        :disabled="scanLog.length === 0"
+        @click="clearScanLog"
+      >
+        Clear log
+      </button>
+    </div>
+    <div class="inventory-scanner__basket">
+      <div
+        v-if="basketItems.length === 0"
+        class="inventory-scanner__empty"
+      >
+        No items on hand
+      </div>
+      <div
+        v-for="item in basketItems"
+        :key="item.assetTag"
+        class="inventory-scanner__basket-item"
+      >
+        <strong>{{ item.assetTag }}</strong>
+        <small>{{ item.name || item.category || item.currentLocationCode }}</small>
+      </div>
+    </div>
+    <div class="inventory-scanner__log">
+      <div
+        v-for="item in scanLog"
+        :key="item.key"
+        class="inventory-scanner__log-item"
+        :class="{
+          'inventory-scanner__log-item--failed': item.status === 'FAILED',
+          'inventory-scanner__log-item--warning': item.status === 'WARNING',
+        }"
+      >
+        <div>
+          <strong>{{ item.title }}</strong>
+          <span>{{ item.status }}</span>
+        </div>
+        <small>{{ item.message }}</small>
+      </div>
+    </div>
+    <div
+      v-if="scanLog.length === 0"
+      class="inventory-scanner__log-empty"
+    >
+      Scan log will appear here
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  INVENTORY_LOCATION_KIND,
+  INVENTORY_MOVEMENT_TYPE,
+  getVirtualUserLocationCode,
+  isLocationQr,
+  parseInventoryQr,
+} from '@questwork/q-inventory-model'
+import type { InventoryAssetApiClient, InventoryMovePayload, InventoryMoveResult, InventoryMoveWarning } from '../models/index.js'
+
+defineOptions({
+  name: 'inventory-scanner',
+})
+
+type ScannerMode = typeof INVENTORY_MOVEMENT_TYPE.PICKUP | typeof INVENTORY_MOVEMENT_TYPE.DROPOFF
+type ScanLogStatus = 'OK' | 'WARNING' | 'FAILED' | 'INFO'
+
+interface BasketItem {
+  assetTag: string
+  category?: string
+  currentLocationCode?: string
+  name?: string
+}
+
+interface ScanLogItem {
+  key: string
+  message: string
+  status: ScanLogStatus
+  title: string
+}
+
+const props = defineProps<{
+  assetApiClient?: InventoryAssetApiClient
+  assets?: unknown[]
+  currentUserCode?: string
+}>()
+
+const emit = defineEmits<{
+  moved: [payload: InventoryMovePayload]
+  scan: [payload: { raw: string, parsed: unknown }]
+}>()
+
+const activeLocationCode = ref('')
+const basketItems = ref<BasketItem[]>([])
+const manualQr = ref('')
+const mode = ref<ScannerMode>(INVENTORY_MOVEMENT_TYPE.PICKUP)
+const scanLog = ref<ScanLogItem[]>([])
+
+const holderLocationCode = computed(() => getVirtualUserLocationCode(props.currentUserCode || 'currentUser'))
+const locationLabel = computed(() => mode.value === INVENTORY_MOVEMENT_TYPE.PICKUP ? 'Source' : 'Destination')
+
+watch(
+  () => [props.assets, holderLocationCode.value],
+  syncBasketFromAssets,
+  { deep: true, immediate: true },
+)
+
+function setMode(nextMode: ScannerMode) {
+  mode.value = nextMode
+  activeLocationCode.value = ''
+  addLog({
+    message: `Mode changed to ${nextMode}`,
+    status: 'INFO',
+    title: 'Mode',
+  })
+}
+
+async function submitManualQr() {
+  const value = manualQr.value.trim()
+  if (!value) return
+  manualQr.value = ''
+  await handleQr(value)
+}
+
+async function handleQr(value: string) {
+  const parsed = parseInventoryQr(value)
+  emit('scan', { raw: value, parsed })
+
+  if (isLocationQr(value)) {
+    activeLocationCode.value = parsed.code
+    addLog({
+      message: `${locationLabel.value} set to ${parsed.code}`,
+      status: 'INFO',
+      title: 'Location',
+    })
+    return
+  }
+
+  if (!activeLocationCode.value) {
+    addLog({
+      message: `Scan ${locationLabel.value.toLowerCase()} location first`,
+      status: 'FAILED',
+      title: parsed.code,
+    })
+    return
+  }
+
+  const payload = getMovePayload(parsed.code)
+  try {
+    if (props.assetApiClient?.move) {
+      const result = await props.assetApiClient.move(payload)
+      const warnings = getMoveWarnings(result)
+      emit('moved', payload)
+      applyBasketMove(payload)
+      if (warnings.length) {
+        addLog({
+          message: formatWarnings(warnings),
+          status: 'WARNING',
+          title: parsed.code,
+        })
+        return
+      }
+    } else {
+      emit('moved', payload)
+      applyBasketMove(payload)
+    }
+    addLog({
+      message: `${payload.fromLocationCode || '-'} -> ${payload.toLocationCode}`,
+      status: 'OK',
+      title: parsed.code,
+    })
+  } catch (err) {
+    addLog({
+      message: getErrorMessage(err),
+      status: 'FAILED',
+      title: parsed.code,
+    })
+  }
+}
+
+function getMovePayload(assetTag: string): InventoryMovePayload {
+  if (mode.value === INVENTORY_MOVEMENT_TYPE.PICKUP) {
+    return {
+      assetTag,
+      fromLocationCode: activeLocationCode.value,
+      fromLocationKind: INVENTORY_LOCATION_KIND.REGISTERED,
+      movementType: INVENTORY_MOVEMENT_TYPE.PICKUP,
+      toLocationCode: holderLocationCode.value,
+      toLocationKind: INVENTORY_LOCATION_KIND.VIRTUAL,
+    }
+  }
+  return {
+    assetTag,
+    fromLocationCode: holderLocationCode.value,
+    fromLocationKind: INVENTORY_LOCATION_KIND.VIRTUAL,
+    movementType: INVENTORY_MOVEMENT_TYPE.DROPOFF,
+    toLocationCode: activeLocationCode.value,
+    toLocationKind: INVENTORY_LOCATION_KIND.REGISTERED,
+  }
+}
+
+function applyBasketMove(payload: InventoryMovePayload) {
+  if (payload.toLocationCode === holderLocationCode.value) {
+    upsertBasketItem({
+      assetTag: payload.assetTag,
+      currentLocationCode: holderLocationCode.value,
+    })
+    return
+  }
+  basketItems.value = basketItems.value.filter((item) => item.assetTag !== payload.assetTag)
+}
+
+function upsertBasketItem(item: BasketItem) {
+  const index = basketItems.value.findIndex((basketItem) => basketItem.assetTag === item.assetTag)
+  if (index >= 0) {
+    basketItems.value[index] = {
+      ...basketItems.value[index],
+      ...item,
+    }
+    return
+  }
+  basketItems.value.unshift(item)
+}
+
+function syncBasketFromAssets() {
+  basketItems.value = (props.assets || [])
+    .map(toBasketItem)
+    .filter((item): item is BasketItem => !!item && item.currentLocationCode === holderLocationCode.value)
+}
+
+function toBasketItem(asset: unknown): BasketItem | null {
+  const item = asset as Record<string, unknown>
+  const assetTag = getString(item.assetTag)
+  if (!assetTag) {
+    return null
+  }
+  return {
+    assetTag,
+    category: getString(item.category),
+    currentLocationCode: getString(item.currentLocationCode),
+    name: getString(item.name),
+  }
+}
+
+function addLog({ message, status, title }: Omit<ScanLogItem, 'key'>) {
+  scanLog.value.unshift({
+    key: `${Date.now()}-${Math.random()}`,
+    message,
+    status,
+    title,
+  })
+  scanLog.value = scanLog.value.slice(0, 30)
+}
+
+function getString(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+function getErrorMessage(err: unknown) {
+  return err instanceof Error ? err.message : String(err)
+}
+
+function getMoveWarnings(result: unknown) {
+  const response = result as { data?: InventoryMoveResult[] }
+  return response?.data?.[0]?.warnings || []
+}
+
+function formatWarnings(warnings: InventoryMoveWarning[]) {
+  return warnings.map((warning) => `${warning.code}: ${warning.message}`).join('; ')
+}
+
+function clearScanLog() {
+  scanLog.value = []
+}
+</script>