@codingfactory/inventory-locator-client 0.1.0

package/src/components/counting/CountSessionList.vue

@@ -0,0 +1,683 @@
+<template>
+  <div class="count-session-list">
+    <!-- Header -->
+    <div class="count-session-list__header">
+      <h1 class="count-session-list__title">Cycle Counts</h1>
+      <InvButton
+        variant="primary"
+        size="md"
+        @click="showCreateForm = !showCreateForm"
+      >
+        <template #icon-left>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </template>
+        New
+      </InvButton>
+    </div>
+
+    <!-- Inline create form -->
+    <Transition name="count-create">
+      <InvCard
+        v-if="showCreateForm"
+        title="New Count Session"
+        class="count-session-list__create"
+      >
+        <form @submit.prevent="handleCreate">
+          <div class="count-session-list__create-fields">
+            <InvInput
+              v-model="newSessionName"
+              label="Session Name"
+              placeholder="e.g. Full Warehouse Count - March 2026"
+              :error="createError"
+              autofocus
+            />
+            <div class="count-session-list__scope-field">
+              <label class="count-session-list__scope-label">
+                Scope (optional)
+              </label>
+              <p class="count-session-list__scope-hint">
+                Limit count to a specific location and its children
+              </p>
+              <div class="count-session-list__scope-input">
+                <input
+                  v-model="scopeSearch"
+                  type="search"
+                  class="count-session-list__scope-search"
+                  placeholder="Search locations..."
+                  @input="handleScopeSearch"
+                />
+                <div
+                  v-if="scopeResults.length > 0"
+                  class="count-session-list__scope-results"
+                  role="listbox"
+                  aria-label="Scope location results"
+                >
+                  <button
+                    v-for="loc in scopeResults"
+                    :key="loc.id"
+                    type="button"
+                    role="option"
+                    :aria-selected="selectedScope?.id === loc.id"
+                    class="count-session-list__scope-option"
+                    :class="{ 'count-session-list__scope-option--selected': selectedScope?.id === loc.id }"
+                    @click="selectScope(loc)"
+                  >
+                    <LocationCodeBadge :code="loc.full_code" />
+                    <span>{{ loc.name }}</span>
+                  </button>
+                </div>
+                <div
+                  v-if="selectedScope"
+                  class="count-session-list__scope-selected"
+                >
+                  <LocationCodeBadge :code="selectedScope.full_code" />
+                  <span>{{ selectedScope.name }}</span>
+                  <button
+                    type="button"
+                    class="count-session-list__scope-clear"
+                    aria-label="Clear scope selection"
+                    @click="clearScope"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+                      <path d="M10 4L4 10M4 4L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="count-session-list__create-actions">
+            <InvButton
+              variant="ghost"
+              size="sm"
+              @click="cancelCreate"
+            >
+              Cancel
+            </InvButton>
+            <InvButton
+              variant="primary"
+              size="sm"
+              type="submit"
+              :loading="creating"
+              :disabled="!newSessionName.trim()"
+            >
+              Create Session
+            </InvButton>
+          </div>
+        </form>
+      </InvCard>
+    </Transition>
+
+    <!-- Loading state -->
+    <div v-if="loading && sessions.length === 0" class="count-session-list__loading">
+      <InvCard loading />
+      <InvCard loading />
+    </div>
+
+    <!-- Active sessions -->
+    <section
+      v-if="activeSessions.length > 0"
+      class="count-session-list__section"
+    >
+      <h2 class="count-session-list__section-title">Active</h2>
+      <div class="count-session-list__cards">
+        <InvCard
+          v-for="session in activeSessions"
+          :key="session.id"
+          class="count-session-list__active-card"
+        >
+          <div class="count-session-list__card-header">
+            <h3 class="count-session-list__card-name">{{ session.name }}</h3>
+            <InvBadge
+              :variant="session.status === 'in_progress' ? 'default' : 'muted'"
+            >
+              {{ session.status === 'in_progress' ? 'In Progress' : 'Pending' }}
+            </InvBadge>
+          </div>
+
+          <!-- Progress bar -->
+          <div
+            class="count-session-list__progress"
+            role="progressbar"
+            :aria-valuenow="session.progress.percent_complete"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            :aria-label="`Counting progress: ${session.progress.percent_complete}%`"
+          >
+            <div class="count-session-list__progress-track">
+              <div
+                class="count-session-list__progress-fill"
+                :class="progressColorClass(session.progress.percent_complete)"
+                :style="{ width: `${session.progress.percent_complete}%` }"
+              />
+            </div>
+            <span class="count-session-list__progress-label">
+              {{ session.progress.percent_complete }}%
+            </span>
+          </div>
+
+          <p class="count-session-list__card-stats">
+            {{ session.progress.counted }}/{{ session.progress.total }} locations counted,
+            {{ session.progress.discrepancies }} discrepancies
+          </p>
+
+          <div v-if="session.started_at" class="count-session-list__card-meta">
+            Started: {{ formatDate(session.started_at) }}
+          </div>
+
+          <div class="count-session-list__card-actions">
+            <InvButton
+              v-if="session.status === 'in_progress'"
+              variant="primary"
+              size="sm"
+              @click="navigateToCount(session.id)"
+            >
+              Continue Counting
+            </InvButton>
+            <InvButton
+              variant="secondary"
+              size="sm"
+              @click="navigateToDetail(session.id)"
+            >
+              View
+            </InvButton>
+          </div>
+        </InvCard>
+      </div>
+    </section>
+
+    <!-- Completed / cancelled sessions -->
+    <section
+      v-if="completedSessions.length > 0"
+      class="count-session-list__section"
+    >
+      <h2 class="count-session-list__section-title">Recent</h2>
+      <div class="count-session-list__completed">
+        <button
+          v-for="session in completedSessions"
+          :key="session.id"
+          type="button"
+          class="count-session-list__completed-row"
+          @click="navigateToDetail(session.id)"
+        >
+          <div class="count-session-list__completed-info">
+            <span class="count-session-list__completed-name">{{ session.name }}</span>
+            <InvBadge
+              :variant="session.status === 'completed' ? 'success' : 'muted'"
+              size="sm"
+            >
+              {{ session.status === 'completed' ? 'Completed' : 'Cancelled' }}
+            </InvBadge>
+          </div>
+          <div class="count-session-list__completed-meta">
+            <span v-if="session.status === 'completed' && session.progress">
+              Accuracy: {{ session.progress.total > 0
+                ? (((session.progress.total - session.progress.discrepancies) / session.progress.total) * 100).toFixed(1)
+                : '0.0'
+              }}%
+            </span>
+            <span v-if="session.completed_at">{{ formatDate(session.completed_at) }}</span>
+            <span v-else-if="session.updated_at">{{ formatDate(session.updated_at) }}</span>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <!-- Empty state -->
+    <InvEmptyState
+      v-if="!loading && sessions.length === 0"
+      title="No count sessions"
+      description="Create a cycle count session to track inventory accuracy."
+      action-label="Create Session"
+      @action="showCreateForm = true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCountSessions } from '../../composables/useCountSessions'
+import { useLocationSearch } from '../../composables/useLocationSearch'
+import type { Location, CountSession } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvInput from '../shared/InvInput.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationCodeBadge from '../locations/LocationCodeBadge.vue'
+
+const router = useRouter()
+const {
+  sessions,
+  loading,
+  fetchSessions,
+  createSession,
+} = useCountSessions()
+
+const locationSearch = useLocationSearch()
+
+const showCreateForm = ref(false)
+const newSessionName = ref('')
+const createError = ref<string | undefined>(undefined)
+const creating = ref(false)
+const scopeSearch = ref('')
+const scopeResults = ref<Location[]>([])
+const selectedScope = ref<Location | null>(null)
+
+onMounted(async () => {
+  await fetchSessions()
+})
+
+const activeSessions = computed<CountSession[]>(() =>
+  sessions.value.filter(s => s.status === 'pending' || s.status === 'in_progress')
+)
+
+const completedSessions = computed<CountSession[]>(() =>
+  sessions.value.filter(s => s.status === 'completed' || s.status === 'cancelled')
+)
+
+function progressColorClass(percent: number): string {
+  if (percent >= 90) return 'count-session-list__progress-fill--success'
+  if (percent >= 50) return 'count-session-list__progress-fill--primary'
+  return 'count-session-list__progress-fill--warning'
+}
+
+function handleScopeSearch() {
+  if (selectedScope.value) return
+  locationSearch.search(scopeSearch.value)
+  scopeResults.value = locationSearch.results.value
+}
+
+function selectScope(location: Location) {
+  selectedScope.value = location
+  scopeSearch.value = ''
+  scopeResults.value = []
+}
+
+function clearScope() {
+  selectedScope.value = null
+  scopeSearch.value = ''
+  scopeResults.value = []
+}
+
+function cancelCreate() {
+  showCreateForm.value = false
+  newSessionName.value = ''
+  createError.value = undefined
+  clearScope()
+}
+
+async function handleCreate() {
+  const name = newSessionName.value.trim()
+  if (!name) {
+    createError.value = 'Name is required'
+    return
+  }
+
+  creating.value = true
+  createError.value = undefined
+
+  try {
+    const session = await createSession(name, selectedScope.value?.id)
+    showCreateForm.value = false
+    newSessionName.value = ''
+    clearScope()
+    navigateToDetail(session.id)
+  } catch (err: any) {
+    createError.value = err?.response?.data?.message || 'Failed to create session'
+  } finally {
+    creating.value = false
+  }
+}
+
+function navigateToDetail(id: number) {
+  router.push({ name: 'inventory-count-detail', params: { id } })
+}
+
+function navigateToCount(id: number) {
+  router.push({ name: 'inventory-count-entry', params: { id } })
+}
+
+function formatDate(isoDate: string): string {
+  return new Date(isoDate).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+</script>
+
+<style scoped>
+.count-session-list {
+  max-width: 800px;
+}
+
+.count-session-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  margin-bottom: var(--space-5, 1.25rem);
+}
+
+.count-session-list__title {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+.count-session-list__create {
+  margin-bottom: var(--space-5, 1.25rem);
+}
+
+.count-session-list__create-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.count-session-list__scope-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.count-session-list__scope-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.count-session-list__scope-hint {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  line-height: 1.4;
+}
+
+.count-session-list__scope-input {
+  position: relative;
+  margin-top: var(--space-1, 0.25rem);
+}
+
+.count-session-list__scope-search {
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.count-session-list__scope-search:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.count-session-list__scope-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  box-shadow: var(--shadow-md);
+  margin-top: var(--space-1, 0.25rem);
+}
+
+.count-session-list__scope-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: none;
+  background: none;
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  cursor: pointer;
+  text-align: left;
+}
+
+.count-session-list__scope-option:hover,
+.count-session-list__scope-option--selected {
+  background: var(--admin-content-bg);
+}
+
+.count-session-list__scope-option:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.count-session-list__scope-selected {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  margin-top: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-content-bg);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+}
+
+.count-session-list__scope-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.count-session-list__scope-clear:hover {
+  color: var(--admin-text-primary);
+  background: var(--admin-border);
+}
+
+.count-session-list__scope-clear:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.count-session-list__create-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2, 0.5rem);
+  margin-top: var(--space-4, 1rem);
+}
+
+.count-session-list__loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.count-session-list__section {
+  margin-bottom: var(--space-6, 1.5rem);
+}
+
+.count-session-list__section-title {
+  margin: 0 0 var(--space-3, 0.75rem);
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--admin-text-secondary);
+}
+
+.count-session-list__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.count-session-list__card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2, 0.5rem);
+  margin-bottom: var(--space-3, 0.75rem);
+}
+
+.count-session-list__card-name {
+  margin: 0;
+  font-size: var(--text-base, 1rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.count-session-list__progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  margin-bottom: var(--space-2, 0.5rem);
+}
+
+.count-session-list__progress-track {
+  flex: 1;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--admin-border);
+  overflow: hidden;
+}
+
+.count-session-list__progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.count-session-list__progress-fill--primary {
+  background: var(--color-primary, #2563eb);
+}
+
+.count-session-list__progress-fill--success {
+  background: var(--color-success, #059669);
+}
+
+.count-session-list__progress-fill--warning {
+  background: var(--color-warning, #d97706);
+}
+
+.count-session-list__progress-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-secondary);
+  min-width: 36px;
+  text-align: right;
+}
+
+.count-session-list__card-stats {
+  margin: 0 0 var(--space-2, 0.5rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.count-session-list__card-meta {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  margin-bottom: var(--space-3, 0.75rem);
+}
+
+.count-session-list__card-actions {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+}
+
+.count-session-list__completed {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.count-session-list__completed-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border: none;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  border-bottom: 1px solid var(--admin-border);
+  transition: background-color 0.1s ease;
+}
+
+.count-session-list__completed-row:last-child {
+  border-bottom: none;
+}
+
+.count-session-list__completed-row:hover {
+  background: var(--admin-content-bg);
+}
+
+.count-session-list__completed-row:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.count-session-list__completed-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  min-width: 0;
+}
+
+.count-session-list__completed-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count-session-list__completed-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Transition */
+.count-create-enter-active,
+.count-create-leave-active {
+  transition: opacity 0.2s ease, max-height 0.2s ease;
+  overflow: hidden;
+}
+
+.count-create-enter-from,
+.count-create-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+</style>