@codingfactory/inventory-locator-client 0.1.0

package/src/components/counting/CountSessionDetail.vue

@@ -0,0 +1,650 @@
+<template>
+  <div class="count-detail">
+    <!-- Loading -->
+    <InvCard v-if="loading && !session" loading />
+
+    <!-- Error -->
+    <InvEmptyState
+      v-else-if="error && !session"
+      title="Could not load session"
+      :description="error"
+      action-label="Retry"
+      @action="loadSession"
+    />
+
+    <template v-if="session">
+      <!-- Header -->
+      <div class="count-detail__header">
+        <div class="count-detail__header-info">
+          <h1 class="count-detail__title">{{ session.name }}</h1>
+          <div class="count-detail__meta">
+            <InvBadge :variant="statusVariant">{{ statusLabel }}</InvBadge>
+            <span v-if="session.started_at" class="count-detail__meta-item">
+              Started: {{ formatDate(session.started_at) }}
+            </span>
+            <span v-if="session.scope_location_id" class="count-detail__meta-item">
+              Scope: Location #{{ session.scope_location_id }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Progress card -->
+      <InvCard title="Progress" class="count-detail__progress-card">
+        <div
+          class="count-detail__progress-bar"
+          role="progressbar"
+          :aria-valuenow="session.progress.percent_complete"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-label="`${session.progress.percent_complete}% complete`"
+        >
+          <div class="count-detail__progress-track">
+            <div
+              class="count-detail__progress-fill"
+              :class="progressClass"
+              :style="{ width: `${session.progress.percent_complete}%` }"
+            />
+          </div>
+          <span class="count-detail__progress-pct">
+            {{ session.progress.percent_complete }}%
+          </span>
+        </div>
+
+        <div class="count-detail__stats-grid">
+          <div class="count-detail__stat">
+            <span class="count-detail__stat-value">{{ session.progress.total }}</span>
+            <span class="count-detail__stat-label">Total</span>
+          </div>
+          <div class="count-detail__stat">
+            <span class="count-detail__stat-value">{{ session.progress.counted }}</span>
+            <span class="count-detail__stat-label">Counted</span>
+          </div>
+          <div class="count-detail__stat">
+            <span class="count-detail__stat-value">{{ session.progress.verified }}</span>
+            <span class="count-detail__stat-label">Verified</span>
+          </div>
+          <div class="count-detail__stat">
+            <span class="count-detail__stat-value count-detail__stat-value--pending">
+              {{ session.progress.total - session.progress.counted }}
+            </span>
+            <span class="count-detail__stat-label">Pending</span>
+          </div>
+          <div class="count-detail__stat">
+            <span class="count-detail__stat-value count-detail__stat-value--warning">
+              {{ session.progress.discrepancies }}
+            </span>
+            <span class="count-detail__stat-label">Discrepancies</span>
+          </div>
+        </div>
+      </InvCard>
+
+      <!-- Action buttons -->
+      <InvCard title="Actions" class="count-detail__actions-card">
+        <div class="count-detail__action-grid">
+          <InvButton
+            v-if="canGenerate"
+            variant="secondary"
+            size="md"
+            :loading="generating"
+            @click="handleGenerate"
+          >
+            Generate Entries
+          </InvButton>
+          <InvButton
+            v-if="canStartCounting"
+            variant="primary"
+            size="md"
+            @click="handleStartCounting"
+          >
+            Start Counting
+          </InvButton>
+          <InvButton
+            v-if="hasCounted"
+            variant="secondary"
+            size="md"
+            @click="toggleDiscrepancyFilter"
+          >
+            {{ showDiscrepanciesOnly ? 'Show All' : 'Review Discrepancies' }}
+          </InvButton>
+          <InvButton
+            v-if="canApply"
+            variant="primary"
+            size="md"
+            :loading="applying"
+            @click="handleApply"
+          >
+            Apply Adjustments
+          </InvButton>
+          <InvButton
+            v-if="session.status === 'completed'"
+            variant="secondary"
+            size="md"
+            @click="handleViewReport"
+          >
+            View Report
+          </InvButton>
+          <InvButton
+            v-if="session.status !== 'completed' && session.status !== 'cancelled'"
+            variant="danger"
+            size="md"
+            @click="handleCancel"
+          >
+            Cancel
+          </InvButton>
+        </div>
+      </InvCard>
+
+      <!-- Entry table -->
+      <InvCard title="Entries" class="count-detail__entries-card" no-padding>
+        <!-- Filters -->
+        <template #actions>
+          <div class="count-detail__filters">
+            <InvSelect
+              v-model="statusFilter"
+              :options="statusOptions"
+              placeholder="All Statuses"
+            />
+            <label class="count-detail__discrepancy-toggle">
+              <input
+                v-model="showDiscrepanciesOnly"
+                type="checkbox"
+                class="count-detail__discrepancy-checkbox"
+              />
+              <span>Discrepancies only</span>
+            </label>
+          </div>
+        </template>
+
+        <InvTable
+          :columns="entryColumns"
+          :data="filteredEntries"
+          :loading="entriesLoading"
+          clickable
+          empty-message="No entries. Generate entries to start counting."
+          @row-click="handleEntryClick"
+        >
+          <template #cell-status="{ value }">
+            <span
+              class="count-detail__entry-status"
+              :title="entryStatusLabel(value)"
+            >
+              {{ entryStatusIcon(value) }}
+            </span>
+          </template>
+          <template #cell-product_name="{ value }">
+            <span class="count-detail__entry-product">{{ value }}</span>
+          </template>
+          <template #cell-expected_quantity="{ value }">
+            <span class="count-detail__entry-qty">{{ value ?? '-' }}</span>
+          </template>
+          <template #cell-counted_quantity="{ row }">
+            <span
+              v-if="row.counted_quantity !== null"
+              class="count-detail__entry-qty"
+              :class="{
+                'count-detail__entry-qty--match': row.discrepancy === 0,
+                'count-detail__entry-qty--discrepancy': row.discrepancy !== null && row.discrepancy !== 0,
+              }"
+            >
+              {{ row.counted_quantity }}
+              <span
+                v-if="row.discrepancy !== null && row.discrepancy !== 0"
+                class="count-detail__entry-disc"
+              >
+                ({{ row.discrepancy > 0 ? '+' : '' }}{{ row.discrepancy }})
+              </span>
+            </span>
+            <span v-else class="count-detail__entry-pending">pending</span>
+          </template>
+        </InvTable>
+      </InvCard>
+    </template>
+
+    <!-- Confirmation modal -->
+    <InvModal
+      :show="showConfirmModal"
+      :title="confirmTitle"
+      :description="confirmDescription"
+      size="sm"
+      @update:show="showConfirmModal = $event"
+      @close="showConfirmModal = false"
+    >
+      <template #footer>
+        <InvButton variant="ghost" size="sm" @click="showConfirmModal = false">
+          Cancel
+        </InvButton>
+        <InvButton
+          :variant="confirmDanger ? 'danger' : 'primary'"
+          size="sm"
+          :loading="confirmLoading"
+          @click="confirmAction"
+        >
+          {{ confirmLabel }}
+        </InvButton>
+      </template>
+    </InvModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCountSessions } from '../../composables/useCountSessions'
+import { useCountStore } from '../../stores/countStore'
+import type { CountSession, CountEntry, CountEntryStatus, Column } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvSelect from '../shared/InvSelect.vue'
+import InvModal from '../shared/InvModal.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+
+const props = defineProps<{
+  sessionId: number
+}>()
+
+const router = useRouter()
+const countStore = useCountStore()
+const {
+  currentSession: session,
+  entries,
+  loading,
+  error,
+  fetchSession,
+  fetchEntries,
+  generateEntries,
+  updateStatus,
+  applySession,
+  verifyEntry,
+} = useCountSessions()
+
+const entriesLoading = ref(false)
+const generating = ref(false)
+const applying = ref(false)
+const statusFilter = ref<string>('')
+const showDiscrepanciesOnly = ref(false)
+
+// Confirmation modal state
+const showConfirmModal = ref(false)
+const confirmTitle = ref('')
+const confirmDescription = ref('')
+const confirmLabel = ref('')
+const confirmDanger = ref(false)
+const confirmLoading = ref(false)
+let pendingConfirmAction: (() => Promise<void>) | null = null
+
+const entryColumns: Column[] = [
+  { key: 'status', label: 'Status', width: '60px', align: 'center' },
+  { key: 'product_name', label: 'Product' },
+  { key: 'expected_quantity', label: 'Expected', width: '100px', align: 'right' },
+  { key: 'counted_quantity', label: 'Counted', width: '140px', align: 'right' },
+]
+
+const statusOptions = [
+  { value: '', label: 'All Statuses' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'counted', label: 'Counted' },
+  { value: 'verified', label: 'Verified' },
+  { value: 'adjusted', label: 'Adjusted' },
+]
+
+const statusVariant = computed(() => {
+  if (!session.value) return 'muted' as const
+  const map: Record<string, 'default' | 'success' | 'warning' | 'error' | 'muted'> = {
+    pending: 'muted',
+    in_progress: 'default',
+    completed: 'success',
+    cancelled: 'error',
+  }
+  return map[session.value.status] ?? 'muted'
+})
+
+const statusLabel = computed(() => {
+  if (!session.value) return ''
+  const map: Record<string, string> = {
+    pending: 'Pending',
+    in_progress: 'In Progress',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+  }
+  return map[session.value.status] ?? session.value.status
+})
+
+const progressClass = computed(() => {
+  if (!session.value) return ''
+  const pct = session.value.progress.percent_complete
+  if (pct >= 90) return 'count-detail__progress-fill--success'
+  if (pct >= 50) return 'count-detail__progress-fill--primary'
+  return 'count-detail__progress-fill--warning'
+})
+
+const canGenerate = computed(() =>
+  session.value?.status === 'pending' && entries.value.length === 0
+)
+
+const canStartCounting = computed(() =>
+  session.value &&
+  (session.value.status === 'pending' || session.value.status === 'in_progress') &&
+  entries.value.length > 0
+)
+
+const hasCounted = computed(() =>
+  entries.value.some(e => e.status !== 'pending')
+)
+
+const canApply = computed(() =>
+  entries.value.some(
+    e => e.status === 'verified' && e.discrepancy !== null && e.discrepancy !== 0
+  )
+)
+
+const filteredEntries = computed(() => {
+  let result = entries.value
+  if (statusFilter.value) {
+    result = result.filter(e => e.status === statusFilter.value)
+  }
+  if (showDiscrepanciesOnly.value) {
+    result = result.filter(e => e.discrepancy !== null && e.discrepancy !== 0)
+  }
+  return result
+})
+
+onMounted(() => loadSession())
+
+async function loadSession() {
+  try {
+    await fetchSession(props.sessionId)
+    await loadEntries()
+  } catch {
+    // error state handled by template
+  }
+}
+
+async function loadEntries() {
+  entriesLoading.value = true
+  try {
+    await fetchEntries(props.sessionId)
+  } finally {
+    entriesLoading.value = false
+  }
+}
+
+async function handleGenerate() {
+  generating.value = true
+  try {
+    await generateEntries(props.sessionId)
+    await loadEntries()
+    await fetchSession(props.sessionId)
+  } finally {
+    generating.value = false
+  }
+}
+
+function handleStartCounting() {
+  countStore.startCounting(props.sessionId)
+  router.push({ name: 'inventory-count-entry', params: { id: props.sessionId } })
+}
+
+function toggleDiscrepancyFilter() {
+  showDiscrepanciesOnly.value = !showDiscrepanciesOnly.value
+}
+
+function handleApply() {
+  confirmTitle.value = 'Apply Adjustments'
+  confirmDescription.value = 'This will adjust inventory quantities based on verified counts. This action cannot be undone.'
+  confirmLabel.value = 'Apply'
+  confirmDanger.value = false
+  pendingConfirmAction = async () => {
+    applying.value = true
+    try {
+      await applySession(props.sessionId)
+      await fetchSession(props.sessionId)
+      await loadEntries()
+    } finally {
+      applying.value = false
+    }
+  }
+  showConfirmModal.value = true
+}
+
+function handleCancel() {
+  confirmTitle.value = 'Cancel Session'
+  confirmDescription.value = 'Are you sure you want to cancel this count session? Uncounted entries will be discarded.'
+  confirmLabel.value = 'Cancel Session'
+  confirmDanger.value = true
+  pendingConfirmAction = async () => {
+    await updateStatus(props.sessionId, 'cancelled')
+    await fetchSession(props.sessionId)
+  }
+  showConfirmModal.value = true
+}
+
+async function confirmAction() {
+  if (!pendingConfirmAction) return
+  confirmLoading.value = true
+  try {
+    await pendingConfirmAction()
+    showConfirmModal.value = false
+  } finally {
+    confirmLoading.value = false
+  }
+}
+
+function handleViewReport() {
+  router.push({ name: 'inventory-count-report', params: { id: props.sessionId } })
+}
+
+function handleEntryClick(entry: CountEntry) {
+  if (entry.status === 'counted' && entry.discrepancy !== null && entry.discrepancy !== 0) {
+    verifyEntry(props.sessionId, entry.id)
+      .then(() => loadEntries())
+  }
+}
+
+function entryStatusIcon(status: CountEntryStatus): string {
+  const icons: Record<CountEntryStatus, string> = {
+    pending: '\u23F3',
+    counted: '\u2713',
+    verified: '\u2705',
+    adjusted: '\uD83D\uDD27',
+  }
+  return icons[status] ?? status
+}
+
+function entryStatusLabel(status: CountEntryStatus): string {
+  const labels: Record<CountEntryStatus, string> = {
+    pending: 'Pending',
+    counted: 'Counted',
+    verified: 'Verified',
+    adjusted: 'Adjusted',
+  }
+  return labels[status] ?? status
+}
+
+function formatDate(isoDate: string): string {
+  return new Date(isoDate).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+</script>
+
+<style scoped>
+.count-detail {
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 1.25rem);
+}
+
+.count-detail__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+}
+
+.count-detail__header-info {
+  min-width: 0;
+}
+
+.count-detail__title {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+.count-detail__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  flex-wrap: wrap;
+}
+
+.count-detail__meta-item {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.count-detail__progress-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  margin-bottom: var(--space-4, 1rem);
+}
+
+.count-detail__progress-track {
+  flex: 1;
+  height: 10px;
+  border-radius: 5px;
+  background: var(--admin-border);
+  overflow: hidden;
+}
+
+.count-detail__progress-fill {
+  height: 100%;
+  border-radius: 5px;
+  transition: width 0.3s ease;
+}
+
+.count-detail__progress-fill--primary {
+  background: var(--color-primary, #2563eb);
+}
+
+.count-detail__progress-fill--success {
+  background: var(--color-success, #059669);
+}
+
+.count-detail__progress-fill--warning {
+  background: var(--color-warning, #d97706);
+}
+
+.count-detail__progress-pct {
+  font-size: var(--text-base, 1rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+  min-width: 42px;
+  text-align: right;
+}
+
+.count-detail__stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: var(--space-4, 1rem);
+}
+
+.count-detail__stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+}
+
+.count-detail__stat-value {
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+}
+
+.count-detail__stat-value--pending {
+  color: var(--admin-text-tertiary);
+}
+
+.count-detail__stat-value--warning {
+  color: var(--color-warning, #d97706);
+}
+
+.count-detail__stat-label {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.count-detail__action-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2, 0.5rem);
+}
+
+.count-detail__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+}
+
+.count-detail__discrepancy-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.count-detail__discrepancy-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary, #2563eb);
+  cursor: pointer;
+}
+
+.count-detail__entry-status {
+  font-size: var(--text-base, 1rem);
+}
+
+.count-detail__entry-product {
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.count-detail__entry-qty {
+  font-variant-numeric: tabular-nums;
+}
+
+.count-detail__entry-qty--match {
+  color: var(--color-success, #059669);
+}
+
+.count-detail__entry-qty--discrepancy {
+  color: var(--color-warning, #d97706);
+}
+
+.count-detail__entry-disc {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+}
+
+.count-detail__entry-pending {
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+  font-size: var(--text-sm, 0.875rem);
+}
+</style>