@codingfactory/inventory-locator-client 0.1.0

package/src/components/shared/InvTable.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="inv-table-wrapper">
+    <table class="inv-table" role="grid" :aria-busy="loading">
+      <thead class="inv-table__head">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="inv-table__th"
+            :class="[
+              `inv-table__th--${col.align || 'left'}`,
+              { 'inv-table__th--sortable': col.sortable },
+            ]"
+            :style="col.width ? { width: col.width } : undefined"
+            :aria-sort="getSortAria(col)"
+            scope="col"
+          >
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inv-table__sort-btn"
+              :class="{ 'inv-table__sort-btn--active': sortKey === col.key }"
+              @click="handleSort(col)"
+            >
+              <span>{{ col.label }}</span>
+              <svg
+                class="inv-table__sort-icon"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  v-if="sortKey === col.key && sortDir === 'asc'"
+                  d="M7 3L11 8H3L7 3Z"
+                  fill="currentColor"
+                />
+                <path
+                  v-else-if="sortKey === col.key && sortDir === 'desc'"
+                  d="M7 11L3 6H11L7 11Z"
+                  fill="currentColor"
+                />
+                <template v-else>
+                  <path d="M7 3L10 7H4L7 3Z" fill="currentColor" opacity="0.3" />
+                  <path d="M7 11L4 7H10L7 11Z" fill="currentColor" opacity="0.3" />
+                </template>
+              </svg>
+            </button>
+            <span v-else>{{ col.label }}</span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="inv-table__body">
+        <!-- Loading skeleton -->
+        <template v-if="loading">
+          <tr
+            v-for="row in 5"
+            :key="`skeleton-${row}`"
+            class="inv-table__row inv-table__row--skeleton"
+          >
+            <td
+              v-for="col in columns"
+              :key="`skeleton-${row}-${col.key}`"
+              class="inv-table__td"
+            >
+              <div class="inv-table__skeleton-bar" />
+            </td>
+          </tr>
+        </template>
+
+        <!-- Empty state -->
+        <template v-else-if="data.length === 0">
+          <tr>
+            <td :colspan="columns.length" class="inv-table__td inv-table__td--empty">
+              <slot name="empty">
+                <span class="inv-table__empty-text">{{ emptyMessage }}</span>
+              </slot>
+            </td>
+          </tr>
+        </template>
+
+        <!-- Data rows -->
+        <template v-else>
+          <tr
+            v-for="(row, index) in data"
+            :key="index"
+            class="inv-table__row"
+            :class="{
+              'inv-table__row--clickable': clickable,
+            }"
+            :tabindex="clickable ? 0 : undefined"
+            :role="clickable ? 'button' : undefined"
+            @click="clickable ? emit('row-click', row) : undefined"
+            @keydown.enter="clickable ? emit('row-click', row) : undefined"
+            @keydown.space.prevent="clickable ? emit('row-click', row) : undefined"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              class="inv-table__td"
+              :class="[`inv-table__td--${col.align || 'left'}`]"
+            >
+              <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+                {{ row[col.key] ?? '' }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Column } from '../../types'
+
+const props = withDefaults(defineProps<{
+  columns: Column[]
+  data: any[]
+  loading?: boolean
+  sortKey?: string
+  sortDir?: 'asc' | 'desc'
+  emptyMessage?: string
+  clickable?: boolean
+}>(), {
+  loading: false,
+  emptyMessage: 'No data to display.',
+  clickable: false,
+})
+
+const emit = defineEmits<{
+  sort: [payload: { key: string; direction: string }]
+  'row-click': [row: any]
+}>()
+
+function getSortAria(col: Column): 'ascending' | 'descending' | 'none' | undefined {
+  if (!col.sortable) return undefined
+  if (props.sortKey !== col.key) return 'none'
+  return props.sortDir === 'asc' ? 'ascending' : 'descending'
+}
+
+function handleSort(col: Column) {
+  if (!col.sortable) return
+
+  let direction: string
+  if (props.sortKey === col.key) {
+    direction = props.sortDir === 'asc' ? 'desc' : 'asc'
+  } else {
+    direction = 'asc'
+  }
+
+  emit('sort', { key: col.key, direction })
+}
+</script>
+
+<style scoped>
+.inv-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.inv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+}
+
+.inv-table__head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.inv-table__th {
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-table-header-bg);
+  font-weight: 600;
+  font-size: var(--text-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--admin-text-secondary);
+  border-bottom: 1px solid var(--admin-border);
+  white-space: nowrap;
+}
+
+.inv-table__th--left { text-align: left; }
+.inv-table__th--center { text-align: center; }
+.inv-table__th--right { text-align: right; }
+
+.inv-table__sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.inv-table__sort-btn:hover {
+  color: var(--admin-text-primary);
+}
+
+.inv-table__sort-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.inv-table__sort-btn--active {
+  color: var(--color-primary, #2563eb);
+}
+
+.inv-table__sort-icon {
+  flex-shrink: 0;
+}
+
+.inv-table__row {
+  background: var(--admin-table-row-bg);
+  border-bottom: 1px solid var(--admin-border);
+  transition: background-color 0.1s ease;
+}
+
+.inv-table__row:hover {
+  background: var(--admin-table-row-hover);
+}
+
+.inv-table__row--clickable {
+  cursor: pointer;
+}
+
+.inv-table__row--clickable:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.inv-table__row--skeleton:hover {
+  background: var(--admin-table-row-bg);
+}
+
+.inv-table__td {
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  vertical-align: middle;
+  line-height: 1.5;
+}
+
+.inv-table__td--left { text-align: left; }
+.inv-table__td--center { text-align: center; }
+.inv-table__td--right { text-align: right; }
+
+.inv-table__td--empty {
+  text-align: center;
+  padding: var(--space-8, 2rem) var(--space-4, 1rem);
+}
+
+.inv-table__empty-text {
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+
+.inv-table__skeleton-bar {
+  height: 14px;
+  width: 70%;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--admin-border) 25%,
+    var(--admin-content-bg) 50%,
+    var(--admin-border) 75%
+  );
+  background-size: 200% 100%;
+  animation: inv-table-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes inv-table-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>

package/src/composables/useCountSessions.ts

@@ -0,0 +1,184 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import type { CountSession, CountEntry, CountReport, CountStatus } from '../types'
+
+export function useCountSessions() {
+    const sessions = ref<CountSession[]>([])
+    const currentSession = ref<CountSession | null>(null)
+    const entries = ref<CountEntry[]>([])
+    const report = ref<CountReport | null>(null)
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    async function fetchSessions(status?: CountStatus): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const params = status ? `?status=${status}` : ''
+            const response = await getApiClient().get(apiUrl(`/counts${params}`))
+            sessions.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load sessions'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function createSession(name: string, scopeLocationId?: number): Promise<CountSession> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl('/counts'), {
+                name,
+                scope_location_id: scopeLocationId || null,
+            })
+            const session = response.data.data
+            sessions.value.unshift(session)
+            return session
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to create session'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchSession(id: number): Promise<CountSession> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/counts/${id}`))
+            currentSession.value = response.data.data
+            return response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load session'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function updateStatus(id: number, status: 'in_progress' | 'cancelled'): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().patch(apiUrl(`/counts/${id}`), { status })
+            currentSession.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to update session'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function generateEntries(id: number): Promise<{ entries_created: number }> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl(`/counts/${id}/generate`))
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to generate entries'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchEntries(
+        sessionId: number,
+        filters?: { status?: string; location_id?: number; discrepancies_only?: boolean }
+    ): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const params = new URLSearchParams()
+            if (filters?.status) params.set('status', filters.status)
+            if (filters?.location_id) params.set('location_id', String(filters.location_id))
+            if (filters?.discrepancies_only) params.set('discrepancies_only', '1')
+            const response = await getApiClient().get(apiUrl(`/counts/${sessionId}/entries?${params}`))
+            entries.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load entries'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function submitCount(
+        sessionId: number,
+        entryId: number,
+        countedQuantity: number,
+        notes?: string
+    ): Promise<CountEntry> {
+        error.value = null
+        try {
+            const response = await getApiClient().post(
+                apiUrl(`/counts/${sessionId}/entries/${entryId}/count`),
+                { counted_quantity: countedQuantity, notes }
+            )
+            const updated = response.data.data
+            const idx = entries.value.findIndex(e => e.id === entryId)
+            if (idx !== -1) entries.value[idx] = updated
+            return updated
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to submit count'
+            throw err
+        }
+    }
+
+    async function verifyEntry(sessionId: number, entryId: number): Promise<CountEntry> {
+        error.value = null
+        try {
+            const response = await getApiClient().post(
+                apiUrl(`/counts/${sessionId}/entries/${entryId}/verify`)
+            )
+            const updated = response.data.data
+            const idx = entries.value.findIndex(e => e.id === entryId)
+            if (idx !== -1) entries.value[idx] = updated
+            return updated
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to verify entry'
+            throw err
+        }
+    }
+
+    async function applySession(id: number): Promise<{ adjustments_made: number; total_discrepancy: number }> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl(`/counts/${id}/apply`))
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to apply session'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchReport(id: number): Promise<CountReport> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/counts/${id}/report`))
+            report.value = response.data
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load report'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        sessions, currentSession, entries, report, loading, error,
+        fetchSessions, createSession, fetchSession, updateStatus,
+        generateEntries, fetchEntries, submitCount, verifyEntry,
+        applySession, fetchReport,
+    }
+}

package/src/composables/useLabelPrinting.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import type { LabelData, LabelFormat } from '../types'
+
+export function useLabelPrinting() {
+    const labelData = ref<LabelData | null>(null)
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    async function fetchLabel(locationId: number, format: LabelFormat = 'standard'): Promise<LabelData> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${locationId}/label?format=${format}`))
+            labelData.value = response.data
+            return response.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load label'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function printLabel(locationId: number, format: LabelFormat = 'standard'): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(
+                apiUrl(`/locations/${locationId}/label/print?format=${format}`)
+            )
+            openPrintWindow(response.data)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to print label'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function printBatch(locationIds: number[], format: LabelFormat = 'standard'): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl('/labels/batch'), {
+                location_ids: locationIds,
+                format,
+            })
+            openPrintWindow(response.data)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to print batch'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    function openPrintWindow(html: string): void {
+        const win = window.open('', '_blank')
+        if (win) {
+            win.document.write(html)
+            win.document.close()
+            win.onload = () => {
+                win.print()
+                setTimeout(() => win.close(), 1000)
+            }
+        }
+    }
+
+    return { labelData, loading, error, fetchLabel, printLabel, printBatch }
+}

package/src/composables/useLocationBreadcrumbs.ts

@@ -0,0 +1,19 @@
+import { ref, inject } from 'vue'
+import type { PathSegment } from '../types'
+
+export function useLocationBreadcrumbs() {
+    const breadcrumbs = ref<PathSegment[]>([])
+
+    function setBreadcrumbs(path: PathSegment[]) {
+        breadcrumbs.value = path
+    }
+
+    function navigateTo(segment: PathSegment) {
+        const router = inject<any>('router', null)
+        if (router) {
+            router.push({ name: 'inventory-location', params: { code: segment.full_code } })
+        }
+    }
+
+    return { breadcrumbs, setBreadcrumbs, navigateTo }
+}

package/src/composables/useLocationProducts.ts

@@ -0,0 +1,125 @@
+import { ref } from 'vue'
+import { getApiClient, apiUrl } from '../api/client'
+import type { LocationProduct, PlaceProductData, MoveProductData } from '../types'
+
+export function useLocationProducts() {
+    const products = ref<LocationProduct[]>([])
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+    async function fetchProducts(locationId: number): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/locations/${locationId}/products`))
+            products.value = response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load products'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function addProduct(locationId: number, data: PlaceProductData): Promise<LocationProduct> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().post(apiUrl(`/locations/${locationId}/products`), data)
+            const product = response.data.data
+            await fetchProducts(locationId)
+            return product
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to add product'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function updateProduct(
+        locationId: number,
+        productId: number | string,
+        data: { quantity?: number; is_primary?: boolean; notes?: string }
+    ): Promise<LocationProduct> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().patch(
+                apiUrl(`/locations/${locationId}/products/${productId}`),
+                data
+            )
+            const updated = response.data.data
+            const idx = products.value.findIndex(p => p.product_id === productId)
+            if (idx !== -1) products.value[idx] = updated
+            return updated
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to update product'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function removeProduct(locationId: number, productId: number | string, quantity?: number): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            const params = quantity !== undefined ? `?quantity=${quantity}` : ''
+            await getApiClient().delete(apiUrl(`/locations/${locationId}/products/${productId}${params}`))
+            products.value = products.value.filter(p => p.product_id !== productId)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to remove product'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function moveProduct(productId: number | string, data: MoveProductData): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            await getApiClient().post(apiUrl(`/products/${productId}/move`), data)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to move product'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function bulkAdd(locationId: number, items: PlaceProductData[]): Promise<void> {
+        loading.value = true
+        error.value = null
+        try {
+            await getApiClient().post(apiUrl(`/locations/${locationId}/products/bulk`), { items })
+            await fetchProducts(locationId)
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to bulk add products'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    async function fetchProductLocations(productId: number | string): Promise<LocationProduct[]> {
+        loading.value = true
+        error.value = null
+        try {
+            const response = await getApiClient().get(apiUrl(`/products/${productId}/locations`))
+            return response.data.data
+        } catch (err: any) {
+            error.value = err.response?.data?.message || 'Failed to load product locations'
+            throw err
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        products, loading, error,
+        fetchProducts, addProduct, updateProduct, removeProduct,
+        moveProduct, bulkAdd, fetchProductLocations,
+    }
+}