+ {item.photo_urls.length > 0 ? (
+ 
+ ) : (
+
+
+ {item.hw_id || item.asset_tag}
+{item.ai_notes}
+ )} +
+
+
+ {/* Notes preview */}
+ {item.ai_notes && (
+ {item.ai_notes}
+ )}
+
+ {/* Quick action */}
+
+
+ )
+ }
+ ```
+
+ **6. Create web/src/components/layout/TopBar.tsx** — app-wide navigation bar:
+ Left: "HWLab" in Inter Black volt text. Right: intake button (forest green), scan QR button (outline).
+
+ ```typescript
+ import { Plus, QrCode } from 'lucide-react'
+ import { Link } from '@tanstack/react-router'
+ import { Button } from '@/components/ui/button'
+
+ export function TopBar() {
+ return (
+
+
+
+
+
+
+ {children}
+
+
+ )
+ }
+ ```
+
+
+ {/* Search */}
+
+ )
+ }
+ ```
+
+ **2. Create web/src/pages/DashboardPage.tsx** — the main inventory view:
+
+ ```typescript
+ import { useState, useMemo } from 'react'
+ import { AppShell } from '@/components/layout/AppShell'
+ import { FilterBar } from '@/components/inventory/FilterBar'
+ import { ItemCard } from '@/components/inventory/ItemCard'
+ import { ItemRow } from '@/components/inventory/ItemRow'
+ import { useInventory } from '@/hooks/useInventory'
+ import { useUIStore } from '@/store/ui'
+ import { Loader2, AlertCircle } from 'lucide-react'
+
+ export function DashboardPage() {
+ const { data: items, isLoading, error } = useInventory()
+ const { viewMode } = useUIStore()
+ const [search, setSearch] = useState('')
+ const [statusFilter, setStatusFilter] = useState('')
+
+ const filtered = useMemo(() => {
+ if (!items) return []
+ return items.filter((item) => {
+ const matchSearch =
+ !search ||
+ item.name.toLowerCase().includes(search.toLowerCase()) ||
+ (item.hw_id?.toLowerCase() ?? '').includes(search.toLowerCase()) ||
+ (item.asset_tag?.toLowerCase() ?? '').includes(search.toLowerCase())
+ const matchStatus = !statusFilter || item.catalog_status === statusFilter
+ return matchSearch && matchStatus
+ })
+ }, [items, search, statusFilter])
+
+ return (
+
+
+
+ {/* Status filter */}
+
+
+ {/* Item count */}
+
+ {totalCount} items
+
+
+ {/* View toggle */}
+
+
+
+
+
+
+
+ Inventory
+All cataloged hardware in your homelab
+
+
+ )}
+
+ {/* Error */}
+ {error && (
+
+
+ )}
+
+ {/* Empty state */}
+ {!isLoading && !error && filtered.length === 0 && (
+
+
+ )}
+
+ {/* Grid view */}
+ {!isLoading && !error && filtered.length > 0 && viewMode === 'grid' && (
+ 0
++ {items && items.length > 0 ? 'No items match your filters' : 'No items cataloged yet — add your first item'} +
+
+ {filtered.map((item) => (
+
+ )}
+
+ {/* List view */}
+ {!isLoading && !error && filtered.length > 0 && viewMode === 'list' && (
+
+ {filtered.map((item) => (
+
+ )}
+
+ {label}
+ {value}
+
+ )
+ }
+
+ export function ItemDetailPage() {
+ const { id } = useParams({ from: '/item/$id' })
+ const numericId = parseInt(id, 10)
+ const { data: item, isLoading, error } = useInventoryItem(numericId)
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Two-column layout: photos (left on lg+) / fields (right or below) */}
+
+
+ {item.hw_id || item.asset_tag}
+{item.name}
+
+
+
+ {/* Photos */}
+
+
+ Photos
+
+
+ {item.photo_urls.length > 0 ? (
+
+
+
+ {/* Fields */}
+
+
+ {item.photo_urls.map((url, i) => (
+
+ 
+
+ ))}
+
+ ) : (
+
+
+ )}
+ No photos
+
+
+
+ Details
+
+
+
+
+
+ {item.ai_notes && (
+
+
+ AI Notes
+
+
+
+
+ )}
+
+ {item.test_data && (
+
+
+ Test Data
+
+
+
+
+ )}
+
+ {item.ai_notes}
+
+ {(() => {
+ try { return JSON.stringify(JSON.parse(item.test_data!), null, 2) }
+ catch { return item.test_data }
+ })()}
+
+
+
+
+ )
+
+ const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: () => (
+
+ {photos.map((file, i) => {
+ const url = URL.createObjectURL(file)
+ return (
+
+ )
+ }
+ ```
+
+ **4. Create web/src/components/intake/DropZone.tsx** — drag-drop upload area:
+ ```typescript
+ import { useCallback } from 'react'
+ import { useDropzone } from 'react-dropzone'
+ import { Upload, Camera } from 'lucide-react'
+ import { cn } from '@/lib/utils'
+
+ interface DropZoneProps {
+ photoCount: number
+ onDrop: (files: File[]) => void
+ }
+
+ const MAX = 3
+
+ export function DropZone({ photoCount, onDrop }: DropZoneProps) {
+ const remaining = MAX - photoCount
+ const disabled = remaining === 0
+
+ const handleDrop = useCallback(
+ (accepted: File[]) => {
+ onDrop(accepted.slice(0, remaining))
+ },
+ [onDrop, remaining],
+ )
+
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ accept: { 'image/*': [] },
+ maxFiles: remaining,
+ disabled,
+ onDrop: handleDrop,
+ })
+
+ return (
+
+
+
+
+ )
+ })}
+
+
+ {isDragActive ? (
+
+ )
+ }
+ ```
+
+ Run `npm run build` to confirm TypeScript compiles.
+
+
+ + {isDragActive + ? 'Drop photos here' + : disabled + ? 'Maximum 3 photos reached' + : 'Drag photos or tap to shoot'} +
++ {disabled ? '' : `${remaining} of ${MAX} slots remaining · JPEG, PNG, WebP`} +
+
+
+ )
+ }
+
+ export function AIResultReview({ result, editedName, onNameChange }: AIResultReviewProps) {
+ return (
+
+
+
+ {pct}%
+ {pct >= 85 ? (
+
+ {/* Confidence */}
+
+
+ AI Confidence
+
+
+
+
+
+ {/* Editable name */}
+
+
+
+ Item Name
+
+
+
+ onNameChange(e.target.value)}
+ className="w-full px-3 py-2 bg-near-black border border-charcoal/80 rounded-sharp text-white text-sm focus:outline-none focus:border-volt/60 focus:ring-1 focus:ring-volt/30"
+ placeholder="Item name"
+ />
+
+
+
+ {/* Classification */}
+
+
+ Classification
+
+
+
+
+
+ {/* AI notes */}
+ {result.ai_notes && (
+
+
+ AI Notes
+
+
+
+
+ )}
+
+ )
+ }
+ ```
+
+ **2. Create web/src/components/intake/ConfirmForm.tsx** — final action buttons:
+ ```typescript
+ import { CheckCircle, RotateCcw, Loader2 } from 'lucide-react'
+ import { Button } from '@/components/ui/button'
+
+ interface ConfirmFormProps {
+ isSubmitting: boolean
+ onConfirm: () => void
+ onReset: () => void
+ }
+
+ export function ConfirmForm({ isSubmitting, onConfirm, onReset }: ConfirmFormProps) {
+ return (
+ + Low confidence — item will be flagged for research +
+ )} +
+ Manufacturer
+ {result.manufacturer || '—'}
+
+
+ Model
+ {result.model || '—'}
+
+
+ Category
+ {result.category || '—'}
+
+ {result.suggested_tags.length > 0 && (
+
+ Tags
+
+ )}
+
+ {result.suggested_tags.map((tag) => (
+ {tag}
+ ))}
+
+ {result.ai_notes}
+
+
+
+
+ )
+ }
+ ```
+
+ **3. Create web/src/pages/IntakePage.tsx** — the intake wizard orchestrator:
+
+ Three steps:
+ - `upload`: Show DropZone + PhotoPreview + "Analyze with AI" button (forest green)
+ - `submitting`: Uploading spinner overlay
+ - `review`: AIResultReview + ConfirmForm
+ - `done`: Success card with HW ID (volt) + "Add Another" / "Go to Dashboard" buttons
+ - `error`: Error card with retry
+
+ The page submits photos to POST /api/intake with `quick_add=false` initially (user reviews). The review ConfirmForm button calls `submitIntake` again with `quick_add=true` to trigger actual NetBox record creation (or relies on the already-created record from the initial call — see INTAKE-04 decision: handler always creates immediately). Check the Phase 2 decision: the backend creates the record on the first POST; there is no separate "confirm" POST. The UI review step is purely a display concern. The flow is: POST photos → show result → user edits name (display only, name was set by AI in NetBox already) → navigate to dashboard.
+
+ Adjust: since the backend creates on the first POST (INTAKE-04 decision from Phase 2 summary), the intake flow is:
+ 1. Upload + submit (POST /api/intake) → NetBox record created, AI result returned
+ 2. Review result (readonly display, name already in NetBox)
+ 3. Done → toast with HW ID → navigate to dashboard
+
+ ```typescript
+ import { useNavigate, Link } from '@tanstack/react-router'
+ import toast from 'react-hot-toast'
+ import { Loader2, CheckCircle2 } from 'lucide-react'
+ import { AppShell } from '@/components/layout/AppShell'
+ import { DropZone } from '@/components/intake/DropZone'
+ import { PhotoPreview } from '@/components/intake/PhotoPreview'
+ import { AIResultReview } from '@/components/intake/AIResultReview'
+ import { Button } from '@/components/ui/button'
+ import { Card, CardContent } from '@/components/ui/card'
+ import { useIntakeStore } from '@/store/intake'
+ import { submitIntake } from '@/lib/api'
+
+ export function IntakePage() {
+ const navigate = useNavigate()
+ const {
+ step, photos, aiResult, editedName,
+ addPhoto, removePhoto, setStep, setAIResult, setEditedName, setError, reset,
+ } = useIntakeStore()
+
+ async function handleAnalyze() {
+ if (photos.length === 0) return
+ setStep('submitting')
+ setError(null)
+ try {
+ const result = await submitIntake(photos, false)
+ setAIResult(result)
+ setStep('review')
+ toast.success(`HW ID assigned: ${result.hw_id}`)
+ } catch (e) {
+ setError((e as Error).message)
+ setStep('error')
+ }
+ }
+
+ function handleDone() {
+ const hwid = aiResult?.hw_id
+ reset()
+ if (hwid) {
+ toast.success(`${hwid} added to inventory`)
+ }
+ navigate({ to: '/' })
+ }
+
+ return (
+
+
+
+ {/* Step: upload */}
+ {(step === 'upload' || step === 'error') && (
+ Add Item
+Upload 1–3 photos — AI extracts specs automatically
+
+ files.forEach(addPhoto)} />
+
+
+ Analysis failed — check that the Go backend is running and try again.
+
+
+ )}
+
+
+ )}
+
+ {/* Step: submitting */}
+ {step === 'submitting' && (
+
+
+ )}
+
+ {/* Step: review */}
+ {step === 'review' && aiResult && (
+ Analyzing photos…
+Gemma 4 is extracting specs
+
+
+ )}
+
+
+
+
+ {aiResult.queued && (
+ + NetBox was unavailable — item is queued for sync +
+ )} +