@codingfactory/inventory-locator-client 0.1.0

package/src/components/dashboard/InventoryDashboard.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="inv-dashboard">
+    <h1 class="inv-dashboard__title">Inventory Dashboard</h1>
+
+    <!-- Stat cards -->
+    <div class="inv-dashboard__stats">
+      <div class="inv-dashboard__stat-card inv-dashboard__stat-card--primary">
+        <div v-if="statsLoading" class="inv-dashboard__stat-shimmer" />
+        <template v-else>
+          <span class="inv-dashboard__stat-value">{{ stats?.total_locations ?? 0 }}</span>
+          <span class="inv-dashboard__stat-label">Total Locations</span>
+        </template>
+      </div>
+      <div class="inv-dashboard__stat-card inv-dashboard__stat-card--success">
+        <div v-if="statsLoading" class="inv-dashboard__stat-shimmer" />
+        <template v-else>
+          <span class="inv-dashboard__stat-value">{{ formatNumber(stats?.total_products_tracked ?? 0) }}</span>
+          <span class="inv-dashboard__stat-label">Products Tracked</span>
+        </template>
+      </div>
+      <div class="inv-dashboard__stat-card inv-dashboard__stat-card--info">
+        <div v-if="statsLoading" class="inv-dashboard__stat-shimmer" />
+        <template v-else>
+          <span class="inv-dashboard__stat-value">{{ stats?.locations_with_products ?? 0 }}</span>
+          <span class="inv-dashboard__stat-label">In Use</span>
+        </template>
+      </div>
+      <div class="inv-dashboard__stat-card inv-dashboard__stat-card--warning">
+        <div v-if="statsLoading" class="inv-dashboard__stat-shimmer" />
+        <template v-else>
+          <span class="inv-dashboard__stat-value">{{ stats?.empty_leaf_locations ?? 0 }}</span>
+          <span class="inv-dashboard__stat-label">Empty</span>
+        </template>
+      </div>
+    </div>
+
+    <!-- Locations by type -->
+    <InvCard
+      v-if="stats && Object.keys(stats.locations_by_type).length > 0"
+      title="Locations by Type"
+      compact
+      class="inv-dashboard__by-type"
+    >
+      <div class="inv-dashboard__type-grid">
+        <div
+          v-for="(count, type) in stats.locations_by_type"
+          :key="type"
+          class="inv-dashboard__type-item"
+        >
+          <span class="inv-dashboard__type-count">{{ count }}</span>
+          <span class="inv-dashboard__type-label">{{ formatTypeName(type as string) }}</span>
+        </div>
+      </div>
+    </InvCard>
+
+    <!-- Quick actions -->
+    <InvCard title="Quick Actions" compact class="inv-dashboard__quick-actions">
+      <div class="inv-dashboard__actions-grid">
+        <button
+          v-for="action in quickActions"
+          :key="action.label"
+          type="button"
+          class="inv-dashboard__action-btn"
+          @click="handleAction(action.route)"
+        >
+          <span class="inv-dashboard__action-icon" v-html="action.icon" />
+          <span class="inv-dashboard__action-label">{{ action.label }}</span>
+        </button>
+      </div>
+    </InvCard>
+
+    <!-- Recent Activity -->
+    <InvCard title="Recent Activity" class="inv-dashboard__activity" :loading="movementsLoading">
+      <div v-if="movements.length > 0" class="inv-dashboard__activity-list" role="list">
+        <button
+          v-for="movement in movements"
+          :key="movement.id"
+          type="button"
+          role="listitem"
+          class="inv-dashboard__activity-row"
+          @click="navigateToMovementLocation(movement)"
+        >
+          <span
+            class="inv-dashboard__activity-icon"
+            :class="`inv-dashboard__activity-icon--${movement.reason}`"
+            aria-hidden="true"
+          >
+            {{ movementIcon(movement.reason) }}
+          </span>
+          <div class="inv-dashboard__activity-info">
+            <span class="inv-dashboard__activity-product">{{ movement.product_name }}</span>
+            <span class="inv-dashboard__activity-location">
+              <template v-if="movement.reason === 'moved' && movement.from_location && movement.to_location">
+                {{ movement.from_location.full_code }} &rarr; {{ movement.to_location.full_code }}
+              </template>
+              <template v-else-if="movement.to_location">
+                &rarr; {{ movement.to_location.full_code }}
+              </template>
+              <template v-else-if="movement.from_location">
+                &larr; {{ movement.from_location.full_code }}
+              </template>
+            </span>
+          </div>
+          <span class="inv-dashboard__activity-time">{{ formatTimeAgo(movement.performed_at) }}</span>
+        </button>
+      </div>
+      <p v-else-if="!movementsLoading" class="inv-dashboard__no-activity">
+        No recent activity
+      </p>
+    </InvCard>
+
+    <!-- Bottom widgets row -->
+    <div class="inv-dashboard__bottom-row">
+      <!-- Unlocated products summary -->
+      <InvCard title="Unlocated Products" compact class="inv-dashboard__unlocated-widget">
+        <div v-if="unlocatedCount > 0" class="inv-dashboard__unlocated-content">
+          <p class="inv-dashboard__unlocated-text">
+            <strong>{{ unlocatedCount }}</strong> products have no assigned location
+          </p>
+          <InvButton
+            variant="secondary"
+            size="sm"
+            @click="router.push({ name: 'inventory-unlocated' })"
+          >
+            View All
+          </InvButton>
+        </div>
+        <p v-else class="inv-dashboard__unlocated-none">
+          All products have assigned locations
+        </p>
+      </InvCard>
+
+      <!-- Active counts -->
+      <InvCard title="Active Counts" compact class="inv-dashboard__counts-widget">
+        <div v-if="activeCounts.length > 0">
+          <div
+            v-for="count in activeCounts"
+            :key="count.id"
+            class="inv-dashboard__count-row"
+          >
+            <div class="inv-dashboard__count-info">
+              <span class="inv-dashboard__count-name">{{ count.name }}</span>
+              <div
+                class="inv-dashboard__count-progress"
+                role="progressbar"
+                :aria-valuenow="count.progress.percent_complete"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              >
+                <div class="inv-dashboard__count-progress-track">
+                  <div
+                    class="inv-dashboard__count-progress-fill"
+                    :style="{ width: `${count.progress.percent_complete}%` }"
+                  />
+                </div>
+                <span class="inv-dashboard__count-pct">
+                  {{ count.progress.percent_complete }}%
+                </span>
+              </div>
+            </div>
+            <InvButton
+              variant="secondary"
+              size="sm"
+              @click="router.push({ name: 'inventory-count-detail', params: { id: count.id } })"
+            >
+              Continue
+            </InvButton>
+          </div>
+        </div>
+        <p v-else class="inv-dashboard__no-counts">
+          No active count sessions
+        </p>
+      </InvCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getApiClient, apiUrl } from '../../api/client'
+import { useMovements } from '../../composables/useMovements'
+import { useCountSessions } from '../../composables/useCountSessions'
+import type { DashboardStats, CountSession, MovementReason } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+
+const router = useRouter()
+const { movements, loading: movementsLoading, fetchRecent } = useMovements()
+const { sessions: activeCounts, fetchSessions } = useCountSessions()
+
+const stats = ref<DashboardStats | null>(null)
+const statsLoading = ref(true)
+const unlocatedCount = ref(0)
+
+const quickActions = [
+  {
+    label: 'Scan Location',
+    route: 'inventory-scan',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/></svg>',
+  },
+  {
+    label: 'Add Location',
+    route: 'inventory-locations',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  },
+  {
+    label: 'Find Product',
+    route: 'inventory-locations',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M16 16L20 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  },
+  {
+    label: 'Start Count',
+    route: 'inventory-counts',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 8h2v2H8V8zm4 0h2v2h-2V8zm-4 4h2v2H8v-2zm4 0h2v2h-2v-2z" fill="currentColor"/></svg>',
+  },
+  {
+    label: 'Print Labels',
+    route: 'inventory-labels',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="6" y="2" width="12" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="3" y="9" width="18" height="9" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="7" y="15" width="10" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/></svg>',
+  },
+  {
+    label: 'Browse Locations',
+    route: 'inventory-locations',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3 7H21M3 12H21M3 17H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  },
+]
+
+onMounted(() => {
+  loadStats()
+  fetchRecent()
+  fetchSessions('in_progress')
+  loadUnlocatedCount()
+})
+
+async function loadStats() {
+  statsLoading.value = true
+  try {
+    const response = await getApiClient().get(apiUrl('/dashboard/stats'))
+    stats.value = response.data
+  } catch {
+    // Stats are non-critical, degrade gracefully
+  } finally {
+    statsLoading.value = false
+  }
+}
+
+async function loadUnlocatedCount() {
+  try {
+    const response = await getApiClient().get(apiUrl('/dashboard/unlocated-products?limit=1'))
+    unlocatedCount.value = response.data.meta?.total ?? response.data.data?.length ?? 0
+  } catch {
+    // Non-critical
+  }
+}
+
+function handleAction(routeName: string) {
+  router.push({ name: routeName })
+}
+
+function navigateToMovementLocation(movement: any) {
+  const loc = movement.to_location || movement.from_location
+  if (loc) {
+    router.push({ name: 'inventory-location', params: { code: loc.full_code } })
+  }
+}
+
+function movementIcon(reason: MovementReason): string {
+  const icons: Record<MovementReason, string> = {
+    placed: '+',
+    moved: '\u2194',
+    picked: '-',
+    adjusted: '\u27F3',
+    counted: '#',
+    received: '+',
+    returned: '\u21A9',
+  }
+  return icons[reason] ?? '?'
+}
+
+function formatTimeAgo(isoDate: string): string {
+  const now = Date.now()
+  const then = new Date(isoDate).getTime()
+  const diffMs = now - then
+
+  const seconds = Math.floor(diffMs / 1000)
+  if (seconds < 60) return 'just now'
+
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes} min ago`
+
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'yesterday'
+  return `${days}d ago`
+}
+
+function formatNumber(n: number): string {
+  return n.toLocaleString('en-US')
+}
+
+function formatTypeName(type: string): string {
+  return type.charAt(0).toUpperCase() + type.slice(1) + 's'
+}
+</script>
+
+<style scoped>
+.inv-dashboard {
+  max-width: 960px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 1.25rem);
+}
+
+.inv-dashboard__title {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+/* Stat cards */
+.inv-dashboard__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-4, 1rem);
+}
+
+.inv-dashboard__stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1, 0.25rem);
+  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  border-left-width: 4px;
+  min-height: 80px;
+}
+
+.inv-dashboard__stat-card--primary {
+  border-left-color: var(--color-primary, #2563eb);
+}
+
+.inv-dashboard__stat-card--success {
+  border-left-color: var(--color-success, #059669);
+}
+
+.inv-dashboard__stat-card--info {
+  border-left-color: var(--color-info, #0891b2);
+}
+
+.inv-dashboard__stat-card--warning {
+  border-left-color: var(--color-warning, #d97706);
+}
+
+.inv-dashboard__stat-shimmer {
+  width: 60px;
+  height: 28px;
+  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: dashboard-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes dashboard-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.inv-dashboard__stat-value {
+  font-size: var(--text-2xl, 1.5rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+  line-height: 1.2;
+}
+
+.inv-dashboard__stat-label {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Locations by type */
+.inv-dashboard__type-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4, 1rem);
+}
+
+.inv-dashboard__type-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1, 0.25rem);
+}
+
+.inv-dashboard__type-count {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+}
+
+.inv-dashboard__type-label {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+/* Quick actions */
+.inv-dashboard__actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--space-3, 0.75rem);
+}
+
+.inv-dashboard__action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2, 0.5rem);
+  min-height: 80px;
+  padding: var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.inv-dashboard__action-btn:hover {
+  background: var(--admin-content-bg);
+  border-color: var(--admin-text-tertiary);
+}
+
+.inv-dashboard__action-btn:active {
+  background: var(--admin-table-header-bg);
+}
+
+.inv-dashboard__action-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.inv-dashboard__action-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary, #2563eb);
+}
+
+.inv-dashboard__action-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Recent activity */
+.inv-dashboard__activity-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.inv-dashboard__activity-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) 0;
+  border: none;
+  background: none;
+  color: var(--admin-text-primary);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  width: 100%;
+  border-bottom: 1px solid var(--admin-border);
+  border-radius: 0;
+  transition: background-color 0.1s ease;
+}
+
+.inv-dashboard__activity-row:last-child {
+  border-bottom: none;
+}
+
+.inv-dashboard__activity-row:hover {
+  background: var(--admin-content-bg);
+}
+
+.inv-dashboard__activity-row:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.inv-dashboard__activity-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: var(--text-sm, 0.875rem);
+  flex-shrink: 0;
+}
+
+.inv-dashboard__activity-icon--placed,
+.inv-dashboard__activity-icon--received {
+  background: color-mix(in srgb, var(--color-success, #059669) 12%, transparent);
+  color: var(--color-success, #059669);
+}
+
+.inv-dashboard__activity-icon--moved {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
+  color: var(--color-primary, #2563eb);
+}
+
+.inv-dashboard__activity-icon--picked {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 12%, transparent);
+  color: var(--color-error, #dc2626);
+}
+
+.inv-dashboard__activity-icon--adjusted,
+.inv-dashboard__activity-icon--returned {
+  background: color-mix(in srgb, var(--color-warning, #d97706) 12%, transparent);
+  color: var(--color-warning, #d97706);
+}
+
+.inv-dashboard__activity-icon--counted {
+  background: color-mix(in srgb, #7c3aed 12%, transparent);
+  color: #7c3aed;
+}
+
+.inv-dashboard__activity-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.inv-dashboard__activity-product {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inv-dashboard__activity-location {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.inv-dashboard__activity-time {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.inv-dashboard__no-activity {
+  margin: 0;
+  padding: var(--space-4, 1rem) 0;
+  text-align: center;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+
+/* Bottom widgets */
+.inv-dashboard__bottom-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-4, 1rem);
+}
+
+.inv-dashboard__unlocated-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+}
+
+.inv-dashboard__unlocated-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.inv-dashboard__unlocated-none {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+
+.inv-dashboard__count-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) 0;
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.inv-dashboard__count-row:last-child {
+  border-bottom: none;
+}
+
+.inv-dashboard__count-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.inv-dashboard__count-name {
+  display: block;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: var(--space-1, 0.25rem);
+}
+
+.inv-dashboard__count-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+}
+
+.inv-dashboard__count-progress-track {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--admin-border);
+  overflow: hidden;
+}
+
+.inv-dashboard__count-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--color-primary, #2563eb);
+  transition: width 0.3s ease;
+}
+
+.inv-dashboard__count-pct {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-secondary);
+}
+
+.inv-dashboard__no-counts {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+}
+</style>