@codingfactory/inventory-locator-client 0.1.0

package/src/components/counting/CountReport.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="count-report">
+    <!-- Loading -->
+    <InvCard v-if="loading && !report" loading />
+
+    <!-- Error -->
+    <InvEmptyState
+      v-else-if="error && !report"
+      title="Could not load report"
+      :description="error || 'An unknown error occurred'"
+      action-label="Retry"
+      @action="loadReport"
+    />
+
+    <template v-if="report">
+      <!-- Report header -->
+      <div class="count-report__header">
+        <h1 class="count-report__title">
+          Count Report: {{ report.session.name }}
+        </h1>
+        <div class="count-report__actions">
+          <InvButton variant="secondary" size="sm" @click="handleExportCsv">
+            <template #icon-left>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path d="M4 10L8 14L12 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M8 14V2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+              </svg>
+            </template>
+            Export CSV
+          </InvButton>
+          <InvButton variant="secondary" size="sm" @click="handlePrint">
+            <template #icon-left>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <rect x="4" y="1" width="8" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+                <rect x="2" y="6" width="12" height="6" rx="1" stroke="currentColor" stroke-width="1.5" />
+                <rect x="5" y="10" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              </svg>
+            </template>
+            Print Report
+          </InvButton>
+        </div>
+      </div>
+
+      <!-- Summary card -->
+      <InvCard title="Summary" class="count-report__summary">
+        <div class="count-report__summary-grid">
+          <div class="count-report__summary-stat">
+            <span class="count-report__summary-value">{{ report.summary.total_entries }}</span>
+            <span class="count-report__summary-label">Total Items</span>
+          </div>
+          <div class="count-report__summary-stat">
+            <span class="count-report__summary-value">{{ report.summary.counted }}</span>
+            <span class="count-report__summary-label">Counted</span>
+          </div>
+          <div class="count-report__summary-stat">
+            <span class="count-report__summary-value">{{ report.summary.verified }}</span>
+            <span class="count-report__summary-label">Verified</span>
+          </div>
+          <div class="count-report__summary-stat">
+            <span class="count-report__summary-value count-report__summary-value--muted">
+              {{ report.summary.pending }}
+            </span>
+            <span class="count-report__summary-label">Pending</span>
+          </div>
+          <div class="count-report__summary-stat">
+            <span
+              class="count-report__summary-value"
+              :class="report.summary.with_discrepancies > 0
+                ? 'count-report__summary-value--warning'
+                : 'count-report__summary-value--success'"
+            >
+              {{ report.summary.with_discrepancies }}
+            </span>
+            <span class="count-report__summary-label">Discrepancies</span>
+          </div>
+          <div class="count-report__summary-stat">
+            <span
+              class="count-report__summary-value"
+              :class="report.summary.accuracy_percent >= 95
+                ? 'count-report__summary-value--success'
+                : report.summary.accuracy_percent >= 90
+                  ? 'count-report__summary-value--warning'
+                  : 'count-report__summary-value--error'"
+            >
+              {{ report.summary.accuracy_percent.toFixed(1) }}%
+            </span>
+            <span class="count-report__summary-label">Accuracy</span>
+          </div>
+        </div>
+
+        <div class="count-report__totals">
+          <div class="count-report__total-row">
+            <span class="count-report__total-label">Total Expected</span>
+            <span class="count-report__total-value">
+              {{ formatNumber(report.summary.total_expected) }}
+            </span>
+          </div>
+          <div class="count-report__total-row">
+            <span class="count-report__total-label">Total Counted</span>
+            <span class="count-report__total-value">
+              {{ formatNumber(report.summary.total_counted) }}
+            </span>
+          </div>
+          <div class="count-report__total-row count-report__total-row--net">
+            <span class="count-report__total-label">Net Discrepancy</span>
+            <span
+              class="count-report__total-value"
+              :class="{
+                'count-report__total-value--positive': report.summary.net_discrepancy > 0,
+                'count-report__total-value--negative': report.summary.net_discrepancy < 0,
+              }"
+            >
+              {{ report.summary.net_discrepancy > 0 ? '+' : '' }}{{ formatNumber(report.summary.net_discrepancy) }}
+            </span>
+          </div>
+        </div>
+      </InvCard>
+
+      <!-- Top discrepancies table -->
+      <InvCard
+        title="Top Discrepancies"
+        class="count-report__discrepancies"
+        no-padding
+      >
+        <InvTable
+          :columns="discrepancyColumns"
+          :data="report.top_discrepancies"
+          empty-message="No discrepancies found."
+        >
+          <template #cell-location="{ value }">
+            <span class="count-report__disc-location">{{ value }}</span>
+          </template>
+          <template #cell-product="{ value }">
+            <span class="count-report__disc-product">{{ value }}</span>
+          </template>
+          <template #cell-expected="{ value }">
+            <span class="count-report__disc-qty">{{ value }}</span>
+          </template>
+          <template #cell-counted="{ value }">
+            <span class="count-report__disc-qty">{{ value }}</span>
+          </template>
+          <template #cell-discrepancy="{ value }">
+            <span
+              class="count-report__disc-delta"
+              :class="{
+                'count-report__disc-delta--positive': value > 0,
+                'count-report__disc-delta--negative': value < 0,
+              }"
+            >
+              {{ value > 0 ? '+' : '' }}{{ value }}
+            </span>
+          </template>
+        </InvTable>
+      </InvCard>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useCountSessions } from '../../composables/useCountSessions'
+import type { Column } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+
+const props = defineProps<{
+  sessionId: number
+}>()
+
+const {
+  report,
+  loading,
+  error,
+  fetchReport,
+} = useCountSessions()
+
+const discrepancyColumns: Column[] = [
+  { key: 'location', label: 'Location' },
+  { key: 'product', label: 'Product' },
+  { key: 'expected', label: 'Expected', align: 'right', width: '100px' },
+  { key: 'counted', label: 'Counted', align: 'right', width: '100px' },
+  { key: 'discrepancy', label: '\u0394', align: 'right', width: '80px', sortable: true },
+]
+
+onMounted(() => loadReport())
+
+async function loadReport() {
+  try {
+    await fetchReport(props.sessionId)
+  } catch {
+    // Error handled in template
+  }
+}
+
+function formatNumber(value: number): string {
+  return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+function handleExportCsv() {
+  if (!report.value) return
+
+  const rows: string[][] = [
+    ['Location', 'Product', 'Expected', 'Counted', 'Discrepancy'],
+    ...report.value.top_discrepancies.map(d => [
+      d.location,
+      d.product,
+      String(d.expected),
+      String(d.counted),
+      String(d.discrepancy),
+    ]),
+  ]
+
+  const csvContent = rows
+    .map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
+    .join('\n')
+
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `count-report-${props.sessionId}.csv`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+function handlePrint() {
+  window.print()
+}
+</script>
+
+<style scoped>
+.count-report {
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 1.25rem);
+}
+
+.count-report__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  flex-wrap: wrap;
+}
+
+.count-report__title {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+.count-report__actions {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+  flex-shrink: 0;
+}
+
+.count-report__summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: var(--space-4, 1rem);
+  margin-bottom: var(--space-5, 1.25rem);
+}
+
+.count-report__summary-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+  padding: var(--space-3, 0.75rem);
+  background: var(--admin-content-bg);
+  border-radius: 8px;
+}
+
+.count-report__summary-value {
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+}
+
+.count-report__summary-value--success {
+  color: var(--color-success, #059669);
+}
+
+.count-report__summary-value--warning {
+  color: var(--color-warning, #d97706);
+}
+
+.count-report__summary-value--error {
+  color: var(--color-error, #dc2626);
+}
+
+.count-report__summary-value--muted {
+  color: var(--admin-text-tertiary);
+}
+
+.count-report__summary-label {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.count-report__totals {
+  border-top: 1px solid var(--admin-border);
+  padding-top: var(--space-4, 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.5rem);
+}
+
+.count-report__total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.count-report__total-row--net {
+  padding-top: var(--space-2, 0.5rem);
+  border-top: 1px solid var(--admin-border);
+  font-weight: 600;
+}
+
+.count-report__total-label {
+  color: var(--admin-text-secondary);
+}
+
+.count-report__total-value {
+  font-variant-numeric: tabular-nums;
+  color: var(--admin-text-primary);
+}
+
+.count-report__total-value--positive {
+  color: var(--color-success, #059669);
+}
+
+.count-report__total-value--negative {
+  color: var(--color-error, #dc2626);
+}
+
+.count-report__disc-location {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+}
+
+.count-report__disc-product {
+  font-weight: 500;
+}
+
+.count-report__disc-qty {
+  font-variant-numeric: tabular-nums;
+}
+
+.count-report__disc-delta {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.count-report__disc-delta--positive {
+  color: var(--color-success, #059669);
+}
+
+.count-report__disc-delta--negative {
+  color: var(--color-error, #dc2626);
+}
+
+@media print {
+  .count-report__actions {
+    display: none;
+  }
+
+  .count-report {
+    gap: 12pt;
+  }
+}
+</style>