@codingfactory/inventory-locator-client 0.1.0

package/src/composables/useLocationSearch.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import type { Location, LocationType } from '../types'
+
+export function useLocationSearch() {
+    const results = ref<Location[]>([])
+    const query = ref('')
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+    function search(q: string, filters?: { type?: LocationType }) {
+        query.value = q
+
+        if (debounceTimer) clearTimeout(debounceTimer)
+
+        if (!q || q.length < 2) {
+            results.value = []
+            return
+        }
+
+        debounceTimer = setTimeout(async () => {
+            loading.value = true
+            error.value = null
+            try {
+                const params = new URLSearchParams({ q })
+                if (filters?.type) params.set('type', filters.type)
+                const response = await getApiClient().get(apiUrl(`/locations/search?${params}`))
+                results.value = response.data.data
+            } catch (err: any) {
+                error.value = err.response?.data?.message || 'Search failed'
+            } finally {
+                loading.value = false
+            }
+        }, 300)
+    }
+
+    function clear() {
+        query.value = ''
+        results.value = []
+        if (debounceTimer) clearTimeout(debounceTimer)
+    }
+
+    return { results, query, loading, error, search, clear }
+}

package/src/composables/useLocations.ts

@@ -0,0 +1,159 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import { useLocationStore } from '../stores/locationStore'
+import type { Location, CreateLocationData, UpdateLocationData, LocationTypeInfo } from '../types'
+
+export function useLocations() {
+    const locations = ref<Location[]>([])
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+    const locationStore = useLocationStore()
+
+    async function fetchRoots(): Promise<Location[]> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl('/locations'))
+            const data = response.data.data
+            locationStore.setRoots(data)
+            locations.value = data
+            return data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load locations'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchLocation(id: number): Promise<Location> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${id}?include_path=1`))
+            return response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load location'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchChildren(locationId: number): Promise<Location[]> {
+        const cached = locationStore.childrenCache.get(locationId)
+        if (cached) return cached
+
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${locationId}`))
+            const children = response.data.data.children || []
+            locationStore.cacheChildren(locationId, children)
+            return children
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load children'
+            throw err
+        }
+    }
+
+    async function fetchTree(locationId: number): Promise<any> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${locationId}/tree`))
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load tree'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function create(data: CreateLocationData): Promise<Location> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl('/locations'), data)
+            const location = response.data.data
+            await fetchRoots()
+            return location
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to create location'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function update(id: number, data: UpdateLocationData): Promise<Location> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().put(apiUrl(`/locations/${id}`), data)
+            const location = response.data.data
+            locationStore.updateLocationInTree(location)
+            return location
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to update location'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function remove(id: number): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            await getApiClient().delete(apiUrl(`/locations/${id}`))
+            locationStore.removeLocationFromTree(id)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to delete location'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function move(id: number, parentId: number | null): Promise<Location> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl(`/locations/${id}/move`), { parent_id: parentId })
+            const location = response.data.data
+            await fetchRoots()
+            return location
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to move location'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchTypes(): Promise<LocationTypeInfo[]> {
+        try {
+            const response = await getApiClient().get(apiUrl('/locations/types'))
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load types'
+            throw err
+        }
+    }
+
+    async function scanLookup(code: string): Promise<Location | null> {
+        try {
+            const response = await getApiClient().get(apiUrl(`/scan/${encodeURIComponent(code)}`))
+            return response.data.data
+        } catch (err: any) {
+            if (err.response?.status === 404) return null
+            throw err
+        }
+    }
+
+    return {
+        locations, loading, error,
+        fetchRoots, fetchLocation, fetchChildren, fetchTree,
+        create, update, remove, move, fetchTypes, scanLookup,
+    }
+}

package/src/composables/useMovements.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import type { Movement } from '../types'
+
+export function useMovements() {
+    const movements = ref<Movement[]>([])
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    async function fetchAll(filters?: { reason?: string; from_date?: string; to_date?: string }): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const params = new URLSearchParams()
+            if (filters?.reason) params.set('reason', filters.reason)
+            if (filters?.from_date) params.set('from_date', filters.from_date)
+            if (filters?.to_date) params.set('to_date', filters.to_date)
+            const response = await getApiClient().get(apiUrl(`/movements?${params}`))
+            movements.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load movements'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchByLocation(locationId: number): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${locationId}/movements`))
+            movements.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load movements'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchByProduct(productId: number | string): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/products/${productId}/movements`))
+            movements.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load movements'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchRecent(): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl('/dashboard/recent-movements'))
+            movements.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load movements'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return { movements, loading, error, fetchAll, fetchByLocation, fetchByProduct, fetchRecent }
+}

package/src/composables/useScanner.ts

@@ -0,0 +1,83 @@
+import { ref, onUnmounted } from 'vue'
+
+export function useScanner() {
+    const isScanning = ref(false)
+    const lastResult = ref<string | null>(null)
+    const error = ref<string | null>(null)
+    const isSupported = ref(false)
+    const hasFlash = ref(false)
+    const flashOn = ref(false)
+
+    let scanner: any = null
+
+    isSupported.value = typeof navigator !== 'undefined'
+        && !!navigator.mediaDevices?.getUserMedia
+
+    async function startScanning(
+        elementId: string,
+        onResult: (code: string) => void
+    ): Promise<void> {
+        if (!isSupported.value) {
+            error.value = 'Camera scanning not supported in this browser'
+            return
+        }
+
+        try {
+            const { Html5Qrcode, Html5QrcodeSupportedFormats } = await import('html5-qrcode')
+
+            scanner = new Html5Qrcode(elementId)
+            isScanning.value = true
+            error.value = null
+
+            await scanner.start(
+                { facingMode: 'environment' },
+                {
+                    fps: 10,
+                    qrbox: { width: 250, height: 250 },
+                    formatsToSupport: [
+                        Html5QrcodeSupportedFormats.QR_CODE,
+                        Html5QrcodeSupportedFormats.CODE_128,
+                        Html5QrcodeSupportedFormats.CODE_39,
+                    ],
+                },
+                (decodedText: string) => {
+                    lastResult.value = decodedText
+                    if (navigator.vibrate) navigator.vibrate(100)
+                    onResult(decodedText)
+                },
+                () => {} // ignore "no code found" frames
+            )
+        } catch (err: any) {
+            error.value = err?.message || 'Camera access denied or not available'
+            isScanning.value = false
+        }
+    }
+
+    async function stopScanning(): Promise<void> {
+        if (scanner?.isScanning) {
+            await scanner.stop()
+        }
+        scanner = null
+        isScanning.value = false
+    }
+
+    async function toggleFlash(): Promise<void> {
+        flashOn.value = !flashOn.value
+    }
+
+    onUnmounted(() => {
+        stopScanning()
+    })
+
+    return {
+        isScanning,
+        lastResult,
+        error,
+        isSupported,
+        hasFlash,
+        flashOn,
+        startScanning,
+        stopScanning,
+        toggleFlash,
+    }
+}

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/src/index.ts

@@ -0,0 +1,46 @@
+// Types
+export type * from './types'
+
+// Stores
+export { useLocationStore } from './stores/locationStore'
+export { useScannerStore } from './stores/scannerStore'
+export { useCountStore } from './stores/countStore'
+
+// Composables
+export { useLocations } from './composables/useLocations'
+export { useLocationProducts } from './composables/useLocationProducts'
+export { useLocationSearch } from './composables/useLocationSearch'
+export { useScanner } from './composables/useScanner'
+export { useCountSessions } from './composables/useCountSessions'
+export { useMovements } from './composables/useMovements'
+export { useLabelPrinting } from './composables/useLabelPrinting'
+export { useLocationBreadcrumbs } from './composables/useLocationBreadcrumbs'
+
+// Page-level components (used in host app router)
+export { default as InventoryDashboard } from './components/dashboard/InventoryDashboard.vue'
+export { default as InventoryLocatorShell } from './components/locations/InventoryLocatorShell.vue'
+export { default as LocationDetail } from './components/locations/LocationDetail.vue'
+export { default as ScannerOverlay } from './components/scanning/ScannerOverlay.vue'
+export { default as CountSessionList } from './components/counting/CountSessionList.vue'
+export { default as CountSessionDetail } from './components/counting/CountSessionDetail.vue'
+export { default as CountEntryForm } from './components/counting/CountEntryForm.vue'
+export { default as CountReport } from './components/counting/CountReport.vue'
+export { default as LabelBatchPrint } from './components/labels/LabelBatchPrint.vue'
+
+// Embeddable components (used inside other host app views)
+export { default as LocationTree } from './components/locations/LocationTree.vue'
+export { default as LocationSearchInput } from './components/locations/LocationSearchInput.vue'
+export { default as LocationCodeBadge } from './components/locations/LocationCodeBadge.vue'
+export { default as LocationTypeIcon } from './components/locations/LocationTypeIcon.vue'
+export { default as LocationBreadcrumb } from './components/locations/LocationBreadcrumb.vue'
+export { default as ProductLocationList } from './components/products/ProductLocationList.vue'
+export { default as ScanResult } from './components/scanning/ScanResult.vue'
+export { default as ScanHistory } from './components/scanning/ScanHistory.vue'
+export { default as LabelPreview } from './components/labels/LabelPreview.vue'
+export { default as UnlocatedProducts } from './components/dashboard/UnlocatedProducts.vue'
+
+// Plugin (optional global registration)
+export { InventoryLocatorPlugin } from './plugin'
+
+// API client configuration
+export { configureApiClient } from './api/client'

package/src/plugin.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vue'
+import { configureApiClient } from './api/client'
+
+export interface InventoryLocatorOptions {
+    apiPrefix?: string
+}
+
+export const InventoryLocatorPlugin = {
+    install(app: App, options: InventoryLocatorOptions = {}) {
+        configureApiClient({
+            prefix: options.apiPrefix || '/api/inventory-locator/v1',
+        })
+    },
+}

package/src/stores/countStore.ts

@@ -0,0 +1,95 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+interface PendingCount {
+    sessionId: number
+    entryId: number
+    countedQuantity: number
+    notes?: string
+    queuedAt: string
+}
+
+export const useCountStore = defineStore('inventoryCount', () => {
+    const activeSessionId = ref<number | null>(null)
+    const currentLocationId = ref<number | null>(null)
+    const pendingSubmissions = ref<PendingCount[]>([])
+    const isOnline = ref(typeof navigator !== 'undefined' ? navigator.onLine : true)
+
+    const hasPendingSubmissions = computed(() => pendingSubmissions.value.length > 0)
+    const isCountingMode = computed(() => activeSessionId.value !== null)
+
+    function startCounting(sessionId: number) {
+        activeSessionId.value = sessionId
+    }
+
+    function stopCounting() {
+        activeSessionId.value = null
+        currentLocationId.value = null
+    }
+
+    function setCurrentLocation(locationId: number) {
+        currentLocationId.value = locationId
+    }
+
+    function queueCount(count: Omit<PendingCount, 'queuedAt'>) {
+        pendingSubmissions.value.push({
+            ...count,
+            queuedAt: new Date().toISOString(),
+        })
+        persistQueue()
+    }
+
+    function removeFromQueue(entryId: number) {
+        pendingSubmissions.value = pendingSubmissions.value.filter(
+            p => p.entryId !== entryId
+        )
+        persistQueue()
+    }
+
+    function persistQueue() {
+        sessionStorage.setItem(
+            'inv-count-queue',
+            JSON.stringify(pendingSubmissions.value)
+        )
+    }
+
+    function loadQueue() {
+        const saved = sessionStorage.getItem('inv-count-queue')
+        if (saved) {
+            try {
+                pendingSubmissions.value = JSON.parse(saved)
+            } catch {
+                // ignore
+            }
+        }
+    }
+
+    async function syncPendingCounts(submitFn: (p: PendingCount) => Promise<void>) {
+        const queue = [...pendingSubmissions.value]
+        for (const pending of queue) {
+            try {
+                await submitFn(pending)
+                removeFromQueue(pending.entryId)
+            } catch {
+                break
+            }
+        }
+    }
+
+    return {
+        activeSessionId,
+        currentLocationId,
+        pendingSubmissions,
+        isOnline,
+        hasPendingSubmissions,
+        isCountingMode,
+        startCounting,
+        stopCounting,
+        setCurrentLocation,
+        queueCount,
+        removeFromQueue,
+        persistQueue,
+        loadQueue,
+        syncPendingCounts,
+    }
+})

package/src/stores/locationStore.ts

@@ -0,0 +1,113 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import type { Location } from '../types'
+
+export const useLocationStore = defineStore('inventoryLocation', () => {
+    const roots = ref<Location[]>([])
+    const selectedLocationId = ref<number | null>(null)
+    const expandedNodeIds = ref(new Set<number>())
+    const childrenCache = ref(new Map<number, Location[]>())
+    const loading = ref(false)
+
+    function findInTree(id: number): Location | null {
+        const search = (nodes: Location[]): Location | null => {
+            for (const node of nodes) {
+                if (node.id === id) return node
+                if (node.children) {
+                    const found = search(node.children)
+                    if (found) return found
+                }
+            }
+            return null
+        }
+        return search(roots.value)
+    }
+
+    const selectedLocation = computed<Location | null>(() => {
+        if (!selectedLocationId.value) return null
+        return findInTree(selectedLocationId.value)
+    })
+
+    const isExpanded = computed(() => {
+        return (id: number) => expandedNodeIds.value.has(id)
+    })
+
+    function setRoots(locations: Location[]) {
+        roots.value = locations
+    }
+
+    function selectLocation(id: number | null) {
+        selectedLocationId.value = id
+    }
+
+    function toggleExpand(id: number) {
+        if (expandedNodeIds.value.has(id)) {
+            expandedNodeIds.value.delete(id)
+        } else {
+            expandedNodeIds.value.add(id)
+        }
+    }
+
+    function cacheChildren(parentId: number, children: Location[]) {
+        childrenCache.value.set(parentId, children)
+    }
+
+    function updateLocationInTree(updated: Location) {
+        const replace = (nodes: Location[]): boolean => {
+            for (let i = 0; i < nodes.length; i++) {
+                if (nodes[i].id === updated.id) {
+                    nodes[i] = { ...nodes[i], ...updated }
+                    return true
+                }
+                if (nodes[i].children && replace(nodes[i].children!)) {
+                    return true
+                }
+            }
+            return false
+        }
+        replace(roots.value)
+    }
+
+    function removeLocationFromTree(id: number) {
+        const remove = (nodes: Location[]): boolean => {
+            const idx = nodes.findIndex(n => n.id === id)
+            if (idx !== -1) {
+                nodes.splice(idx, 1)
+                return true
+            }
+            for (const node of nodes) {
+                if (node.children && remove(node.children)) return true
+            }
+            return false
+        }
+        remove(roots.value)
+        if (selectedLocationId.value === id) {
+            selectedLocationId.value = null
+        }
+    }
+
+    function reset() {
+        roots.value = []
+        selectedLocationId.value = null
+        expandedNodeIds.value.clear()
+        childrenCache.value.clear()
+    }
+
+    return {
+        roots,
+        selectedLocationId,
+        expandedNodeIds,
+        childrenCache,
+        loading,
+        selectedLocation,
+        isExpanded,
+        setRoots,
+        selectLocation,
+        toggleExpand,
+        cacheChildren,
+        updateLocationInTree,
+        removeLocationFromTree,
+        findInTree,
+        reset,
+    }
+})

package/src/stores/scannerStore.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+interface ScanHistoryEntry {
+    code: string
+    locationName: string
+    locationId: number
+    scannedAt: string
+}
+
+export const useScannerStore = defineStore('inventoryScanner', () => {
+    const history = ref<ScanHistoryEntry[]>([])
+    const lastScannedCode = ref<string | null>(null)
+
+    function addToHistory(entry: Omit<ScanHistoryEntry, 'scannedAt'>) {
+        history.value.unshift({
+            ...entry,
+            scannedAt: new Date().toISOString(),
+        })
+        if (history.value.length > 20) {
+            history.value = history.value.slice(0, 20)
+        }
+        lastScannedCode.value = entry.code
+        sessionStorage.setItem('inv-scan-history', JSON.stringify(history.value))
+    }
+
+    function loadFromSession() {
+        const saved = sessionStorage.getItem('inv-scan-history')
+        if (saved) {
+            try {
+                history.value = JSON.parse(saved)
+            } catch {
+                // ignore corrupt data
+            }
+        }
+    }
+
+    function clearHistory() {
+        history.value = []
+        lastScannedCode.value = null
+        sessionStorage.removeItem('inv-scan-history')
+    }
+
+    return {
+        history,
+        lastScannedCode,
+        addToHistory,
+        loadFromSession,
+        clearHistory,
+    }
+})