GOLDMEX WMS: Warehouse Pallet Scanning View (Tablet)

{
  "code": "## GOLDMEX WMS: Warehouse Pallet Scanning View (Tablet)\n\n### File: `goldmex-wms/src/components/warehouse-scanner.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState, useRef, useCallback, useEffect } from 'react'\n\n// ── Types ──────────────────────────────────────────────────────\n\ninterface PalletItem {\n  id: string\n  product_sku: string\n  product_name: string\n  quantity: number\n  unit: string\n  pallet_code: string\n  scanned: boolean\n  scanned_at: string | null\n  scanned_by: string | null\n}\n\ninterface ClaimableOrder {\n  id: string\n  order_number: string\n  client_code: string\n  is_urgent: boolean\n  ready_date: string\n  item_count: number\n  pallet_count: number\n}\n\ninterface ClaimedOrder extends ClaimableOrder {\n  status: 'claimed' | 'scanning' | 'loading' | 'finishing'\n  pallets: PalletItem[]\n  loading_evidence: {\n    photos: string[]       // URLs from Supabase Storage\n    trailer_number: string\n    container_number: string\n    seal_number: string\n  }\n}\n\ntype Phase = 'select' | 'scan' | 'load' | 'finish'\n\n// ── QR Scanner Component ───────────────────────────────────────\n\nfunction QRScanner({ \n  onScan, \n  onClose \n}: { \n  onScan: (code: string) => void\n  onClose: () => void \n}) {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [error, setError] = useState('')\n\n  useEffect(() => {\n    let stream: MediaStream | null = null\n    \n    async function startCamera() {\n      try {\n        stream = await navigator.mediaDevices.getUserMedia({\n          video: { facingMode: 'environment' }  // Rear camera\n        })\n        if (videoRef.current) {\n          videoRef.current.srcObject = stream\n        }\n      } catch {\n        setError('Camera access denied')\n      }\n    }\n    \n    startCamera()\n    return () => { stream?.getTracks().forEach(t => t.stop()) }\n  }, [])\n\n  // In production: integrate with @nicolo-ribaudo/qr-reader or html5-qrcode\n  const handleManualEntry = () => {\n    const code = prompt('Enter pallet QR code:')\n    if (code) onScan(code)\n  }\n\n  return (\n    <div className=\"fixed inset-0 bg-black z-50 flex flex-col\">\n      <div className=\"flex items-center justify-between p-4 bg-black/80\">\n        <h2 className=\"text-white text-lg font-bold\">Scan Pallet QR</h2>\n        <button type=\"button\" onClick={onClose} className=\"text-white text-3xl px-2\">&times;</button>\n      </div>\n      <div className=\"flex-1 flex items-center justify-center\">\n        {error ? (\n          <p className=\"text-red-400 text-center p-8\">{error}</p>\n        ) : (\n          <video ref={videoRef} autoPlay playsInline className=\"w-full max-h-[60vh] object-cover\" />\n        )}\n      </div>\n      <div className=\"p-6 bg-black/80\">\n        <button\n          type=\"button\"\n          onClick={handleManualEntry}\n          className=\"w-full py-4 bg-blue-600 text-white rounded-xl text-lg font-medium\"\n        >\n          Manual Entry\n        </button>\n      </div>\n    </div>\n  )\n}\n\n// ── Photo Capture Component ────────────────────────────────────\n\nfunction PhotoCapture({\n  photos,\n  onCapture,\n  maxPhotos = 4,\n}: {\n  photos: string[]\n  onCapture: (url: string) => void\n  maxPhotos?: number\n}) {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleCapture = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0]\n    if (!file) return\n    // In production: upload to Supabase Storage\n    const url = URL.createObjectURL(file)\n    onCapture(url)\n  }\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {photos.map((url, i) => (\n        <div key={i} className=\"aspect-square rounded-xl overflow-hidden border-2 border-green-500\">\n          <img src={url} alt={`Evidence ${i + 1}`} className=\"w-full h-full object-cover\" />\n        </div>\n      ))}\n      {photos.length < maxPhotos && (\n        <button\n          type=\"button\"\n          onClick={() => inputRef.current?.click()}\n          className=\"aspect-square rounded-xl border-2 border-dashed border-border flex flex-col items-center justify-center gap-2 hover:bg-background\"\n        >\n          <span className=\"text-3xl text-muted\">📷</span>\n          <span className=\"text-xs text-muted\">{photos.length + 1}/{maxPhotos}</span>\n        </button>\n      )}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleCapture}\n        className=\"hidden\"\n      />\n    </div>\n  )\n}\n\n// ── Main Warehouse Scanner ─────────────────────────────────────\n\nexport default function WarehouseScanner({ workerId }: { workerId: string }) {\n  const [phase, setPhase] = useState<Phase>('select')\n  const [availableOrders, setAvailableOrders] = useState<ClaimableOrder[]>([])\n  const [claimedOrder, setClaimedOrder] = useState<ClaimedOrder | null>(null)\n  const [showScanner, setShowScanner] = useState(false)\n  const [claiming, setClaiming] = useState<string | null>(null)\n\n  // Fetch available orders\n  useEffect(() => {\n    // Supabase query: wms_orders where status = 'pending' AND claimed_by IS NULL\n    // Simulated for now\n  }, [])\n\n  // ── Claim Order (atomic lock) ────────────────────────────────\n  const claimOrder = useCallback(async (order: ClaimableOrder) => {\n    setClaiming(order.id)\n    try {\n      // Atomic claim via Supabase RPC (prevents race conditions)\n      // RPC: claim_wms_order(order_id, worker_id) \n      //   → UPDATE wms_orders SET claimed_by = $2, status = 'claimed'\n      //     WHERE id = $1 AND claimed_by IS NULL\n      //     RETURNING *\n      // If claimed_by IS NULL check fails → another worker got it first\n      \n      // Simulate success\n      setClaimedOrder({\n        ...order,\n        status: 'scanning',\n        pallets: [], // Would come from wms_order_items JOIN wms_pallets\n        loading_evidence: { photos: [], trailer_number: '', container_number: '', seal_number: '' },\n      })\n      setPhase('scan')\n    } catch {\n      alert('Order already claimed by another worker')\n    } finally {\n      setClaiming(null)\n    }\n  }, [])\n\n  // ── Scan Pallet ──────────────────────────────────────────────\n  const handleScan = useCallback((code: string) => {\n    if (!claimedOrder) return\n    \n    setClaimedOrder(prev => {\n      if (!prev) return prev\n      const updated = { ...prev }\n      const palletIdx = updated.pallets.findIndex(p => p.pallet_code === code)\n      \n      if (palletIdx === -1) {\n        alert(`Pallet ${code} not found in this order`)\n        return prev\n      }\n      \n      if (updated.pallets[palletIdx].scanned) {\n        alert(`Pallet ${code} already scanned`)\n        return prev\n      }\n      \n      updated.pallets[palletIdx] = {\n        ...updated.pallets[palletIdx],\n        scanned: true,\n        scanned_at: new Date().toISOString(),\n        scanned_by: workerId,\n      }\n      \n      return updated\n    })\n    setShowScanner(false)\n  }, [claimedOrder, workerId])\n\n  const allScanned = claimedOrder?.pallets.every(p => p.scanned) ?? false\n  const scannedCount = claimedOrder?.pallets.filter(p => p.scanned).length ?? 0\n  const totalPallets = claimedOrder?.pallets.length ?? 0\n\n  // ── Phase: SELECT ORDER ──────────────────────────────────────\n  if (phase === 'select') {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-4\">\n        <h1 className=\"text-xl font-bold\">Available Orders</h1>\n        <p className=\"text-sm text-muted\">Tap an order to claim it. Only one worker can claim each order.</p>\n        \n        {availableOrders.length === 0 && (\n          <div className=\"rounded-xl border border-border bg-card p-8 text-center\">\n            <p className=\"text-muted\">No pending orders available</p>\n          </div>\n        )}\n        \n        {availableOrders.map(order => (\n          <div key={order.id} className=\"rounded-xl border border-border bg-card p-5\">\n            <div className=\"flex items-center justify-between mb-3\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"font-mono font-bold text-lg\">{order.order_number}</span>\n                {order.is_urgent && <span className=\"text-xl\">🔥</span>}\n              </div>\n              <span className=\"text-xs text-muted\">{order.pallet_count} pallets</span>\n            </div>\n            <div className=\"text-sm text-muted mb-4\">\n              Ready by: {new Date(order.ready_date).toLocaleDateString('es-MX')}\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => claimOrder(order)}\n              disabled={claiming === order.id}\n              className=\"w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-lg font-bold touch-manipulation\"\n            >\n              {claiming === order.id ? 'Claiming...' : 'Claim Order'}\n            </button>\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  // ── Phase: SCAN PALLETS ──────────────────────────────────────\n  if (phase === 'scan' && claimedOrder) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-4\">\n        <div className=\"flex items-center justify-between\">\n          <h1 className=\"text-xl font-bold\">{claimedOrder.order_number}</h1>\n          <span className=\"font-mono text-sm text-muted\">{scannedCount}/{totalPallets} scanned</span>\n        </div>\n        \n        {/* Progress bar */}\n        <div className=\"h-3 bg-background rounded-full overflow-hidden\">\n          <div\n            className=\"h-full bg-green-500 rounded-full transition-all duration-300\"\n            style={{ width: totalPallets > 0 ? `${(scannedCount / totalPallets) * 100}%` : '0%' }}\n          />\n        </div>\n\n        {/* Pallet list */}\n        <div className=\"space-y-2\">\n          {claimedOrder.pallets.map(pallet => (\n            <div\n              key={pallet.id}\n              className={`rounded-xl border p-4 flex items-center justify-between ${\n                pallet.scanned\n                  ? 'border-green-500/30 bg-green-500/5'\n                  : 'border-border bg-card'\n              }`}\n            >\n              <div>\n                <span className=\"font-mono font-medium\">{pallet.pallet_code}</span>\n                <span className=\"text-sm text-muted ml-3\">\n                  {pallet.product_name} ({pallet.quantity} {pallet.unit})\n                </span>\n              </div>\n              {pallet.scanned ? (\n                <span className=\"text-green-400 text-2xl\">✓</span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => setShowScanner(true)}\n                  className=\"px-4 py-3 bg-blue-600 text-white rounded-xl text-sm font-medium touch-manipulation\"\n                >\n                  Scan\n                </button>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {/* Start Loading button */}\n        <button\n          type=\"button\"\n          onClick={() => allScanned && setPhase('load')}\n          disabled={!allScanned}\n          className={`w-full py-5 rounded-xl text-xl font-bold touch-manipulation ${\n            allScanned\n              ? 'bg-green-600 hover:bg-green-700 text-white'\n              : 'bg-gray-700 text-gray-400 cursor-not-allowed'\n          }`}\n        >\n          {allScanned ? 'Start Loading →' : `Scan ${totalPallets - scannedCount} more pallets`}\n        </button>\n\n        {/* QR Scanner overlay */}\n        {showScanner && (\n          <QRScanner onScan={handleScan} onClose={() => setShowScanner(false)} />\n        )}\n      </div>\n    )\n  }\n\n  // ── Phase: LOADING EVIDENCE ──────────────────────────────────\n  if (phase === 'load' && claimedOrder) {\n    const evidence = claimedOrder.loading_evidence\n    const canFinish = evidence.photos.length >= 4 && evidence.trailer_number && evidence.seal_number\n\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-6\">\n        <h1 className=\"text-xl font-bold\">Loading Evidence</h1>\n        <p className=\"text-sm text-muted\">Take 4 photos and record trailer details.</p>\n\n        {/* Photos */}\n        <div>\n          <h2 className=\"text-sm font-medium mb-3\">Photos ({evidence.photos.length}/4)</h2>\n          <PhotoCapture\n            photos={evidence.photos}\n            onCapture={url => {\n              setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: {\n                  ...prev.loading_evidence,\n                  photos: [...prev.loading_evidence.photos, url],\n                }\n              } : prev)\n            }}\n          />\n        </div>\n\n        {/* Trailer Details */}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Trailer Number</label>\n            <input\n              type=\"text\"\n              value={evidence.trailer_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, trailer_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., TRL-4521\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Container Number (optional)</label>\n            <input\n              type=\"text\"\n              value={evidence.container_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, container_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., MSKU-1234567\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Seal Number</label>\n            <input\n              type=\"text\"\n              value={evidence.seal_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, seal_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., SEAL-00891\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => canFinish && setPhase('finish')}\n          disabled={!canFinish}\n          className={`w-full py-5 rounded-xl text-xl font-bold touch-manipulation ${\n            canFinish\n              ? 'bg-green-600 hover:bg-green-700 text-white'\n              : 'bg-gray-700 text-gray-400 cursor-not-allowed'\n          }`}\n        >\n          {canFinish ? 'Finish & Generate BOL →' : 'Complete all fields'}\n        </button>\n      </div>\n    )\n  }\n\n  // ── Phase: FINISH ────────────────────────────────────────────\n  if (phase === 'finish' && claimedOrder) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6\">\n        <div className=\"text-6xl\">✅</div>\n        <h1 className=\"text-2xl font-bold\">Order Complete</h1>\n        <p className=\"text-muted\">{claimedOrder.order_number} — BOL generated automatically</p>\n        <button\n          type=\"button\"\n          onClick={() => { setClaimedOrder(null); setPhase('select') }}\n          className=\"w-full max-w-sm py-5 bg-blue-600 text-white rounded-xl text-xl font-bold touch-manipulation\"\n        >\n          Next Order\n        </button>\n      </div>\n    )\n  }\n\n  return null\n}\n```\n\n### Acceptance Criteria\n1. Available orders shown (pending, unclaimed)\n2. Claim button with atomic lock (Supabase RPC: `WHERE claimed_by IS NULL`)\n3. Per-pallet QR scan with camera integration\n4. Green checkmark on scan, duplicate prevention\n5. All scanned → \"Start Loading\" unlocks\n6. Loading: 4 photo capture + trailer/container/seal fields\n7. Finish generates BOL (server-side trigger)\n8. Supervisor unclaim: separate admin action (PATCH status back to pending)\n9. Tablet-responsive: large touch targets (py-4/py-5), font-mono, rounded-xl\n\n### Atomic Claim RPC\n```sql\nCREATE OR REPLACE FUNCTION claim_wms_order(p_order_id UUID, p_worker_id UUID)\nRETURNS wms_orders AS $$\n  UPDATE wms_orders\n  SET claimed_by = p_worker_id, status = 'claimed', claimed_at = NOW()\n  WHERE id = p_order_id AND claimed_by IS NULL\n  RETURNING *;\n$$ LANGUAGE sql;\n```",
  "content": "## GOLDMEX WMS: Warehouse Pallet Scanning View (Tablet)\n\n### File: `goldmex-wms/src/components/warehouse-scanner.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState, useRef, useCallback, useEffect } from 'react'\n\n// ── Types ──────────────────────────────────────────────────────\n\ninterface PalletItem {\n  id: string\n  product_sku: string\n  product_name: string\n  quantity: number\n  unit: string\n  pallet_code: string\n  scanned: boolean\n  scanned_at: string | null\n  scanned_by: string | null\n}\n\ninterface ClaimableOrder {\n  id: string\n  order_number: string\n  client_code: string\n  is_urgent: boolean\n  ready_date: string\n  item_count: number\n  pallet_count: number\n}\n\ninterface ClaimedOrder extends ClaimableOrder {\n  status: 'claimed' | 'scanning' | 'loading' | 'finishing'\n  pallets: PalletItem[]\n  loading_evidence: {\n    photos: string[]       // URLs from Supabase Storage\n    trailer_number: string\n    container_number: string\n    seal_number: string\n  }\n}\n\ntype Phase = 'select' | 'scan' | 'load' | 'finish'\n\n// ── QR Scanner Component ───────────────────────────────────────\n\nfunction QRScanner({ \n  onScan, \n  onClose \n}: { \n  onScan: (code: string) => void\n  onClose: () => void \n}) {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [error, setError] = useState('')\n\n  useEffect(() => {\n    let stream: MediaStream | null = null\n    \n    async function startCamera() {\n      try {\n        stream = await navigator.mediaDevices.getUserMedia({\n          video: { facingMode: 'environment' }  // Rear camera\n        })\n        if (videoRef.current) {\n          videoRef.current.srcObject = stream\n        }\n      } catch {\n        setError('Camera access denied')\n      }\n    }\n    \n    startCamera()\n    return () => { stream?.getTracks().forEach(t => t.stop()) }\n  }, [])\n\n  // In production: integrate with @nicolo-ribaudo/qr-reader or html5-qrcode\n  const handleManualEntry = () => {\n    const code = prompt('Enter pallet QR code:')\n    if (code) onScan(code)\n  }\n\n  return (\n    <div className=\"fixed inset-0 bg-black z-50 flex flex-col\">\n      <div className=\"flex items-center justify-between p-4 bg-black/80\">\n        <h2 className=\"text-white text-lg font-bold\">Scan Pallet QR</h2>\n        <button type=\"button\" onClick={onClose} className=\"text-white text-3xl px-2\">&times;</button>\n      </div>\n      <div className=\"flex-1 flex items-center justify-center\">\n        {error ? (\n          <p className=\"text-red-400 text-center p-8\">{error}</p>\n        ) : (\n          <video ref={videoRef} autoPlay playsInline className=\"w-full max-h-[60vh] object-cover\" />\n        )}\n      </div>\n      <div className=\"p-6 bg-black/80\">\n        <button\n          type=\"button\"\n          onClick={handleManualEntry}\n          className=\"w-full py-4 bg-blue-600 text-white rounded-xl text-lg font-medium\"\n        >\n          Manual Entry\n        </button>\n      </div>\n    </div>\n  )\n}\n\n// ── Photo Capture Component ────────────────────────────────────\n\nfunction PhotoCapture({\n  photos,\n  onCapture,\n  maxPhotos = 4,\n}: {\n  photos: string[]\n  onCapture: (url: string) => void\n  maxPhotos?: number\n}) {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleCapture = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0]\n    if (!file) return\n    // In production: upload to Supabase Storage\n    const url = URL.createObjectURL(file)\n    onCapture(url)\n  }\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {photos.map((url, i) => (\n        <div key={i} className=\"aspect-square rounded-xl overflow-hidden border-2 border-green-500\">\n          <img src={url} alt={`Evidence ${i + 1}`} className=\"w-full h-full object-cover\" />\n        </div>\n      ))}\n      {photos.length < maxPhotos && (\n        <button\n          type=\"button\"\n          onClick={() => inputRef.current?.click()}\n          className=\"aspect-square rounded-xl border-2 border-dashed border-border flex flex-col items-center justify-center gap-2 hover:bg-background\"\n        >\n          <span className=\"text-3xl text-muted\">📷</span>\n          <span className=\"text-xs text-muted\">{photos.length + 1}/{maxPhotos}</span>\n        </button>\n      )}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleCapture}\n        className=\"hidden\"\n      />\n    </div>\n  )\n}\n\n// ── Main Warehouse Scanner ─────────────────────────────────────\n\nexport default function WarehouseScanner({ workerId }: { workerId: string }) {\n  const [phase, setPhase] = useState<Phase>('select')\n  const [availableOrders, setAvailableOrders] = useState<ClaimableOrder[]>([])\n  const [claimedOrder, setClaimedOrder] = useState<ClaimedOrder | null>(null)\n  const [showScanner, setShowScanner] = useState(false)\n  const [claiming, setClaiming] = useState<string | null>(null)\n\n  // Fetch available orders\n  useEffect(() => {\n    // Supabase query: wms_orders where status = 'pending' AND claimed_by IS NULL\n    // Simulated for now\n  }, [])\n\n  // ── Claim Order (atomic lock) ────────────────────────────────\n  const claimOrder = useCallback(async (order: ClaimableOrder) => {\n    setClaiming(order.id)\n    try {\n      // Atomic claim via Supabase RPC (prevents race conditions)\n      // RPC: claim_wms_order(order_id, worker_id) \n      //   → UPDATE wms_orders SET claimed_by = $2, status = 'claimed'\n      //     WHERE id = $1 AND claimed_by IS NULL\n      //     RETURNING *\n      // If claimed_by IS NULL check fails → another worker got it first\n      \n      // Simulate success\n      setClaimedOrder({\n        ...order,\n        status: 'scanning',\n        pallets: [], // Would come from wms_order_items JOIN wms_pallets\n        loading_evidence: { photos: [], trailer_number: '', container_number: '', seal_number: '' },\n      })\n      setPhase('scan')\n    } catch {\n      alert('Order already claimed by another worker')\n    } finally {\n      setClaiming(null)\n    }\n  }, [])\n\n  // ── Scan Pallet ──────────────────────────────────────────────\n  const handleScan = useCallback((code: string) => {\n    if (!claimedOrder) return\n    \n    setClaimedOrder(prev => {\n      if (!prev) return prev\n      const updated = { ...prev }\n      const palletIdx = updated.pallets.findIndex(p => p.pallet_code === code)\n      \n      if (palletIdx === -1) {\n        alert(`Pallet ${code} not found in this order`)\n        return prev\n      }\n      \n      if (updated.pallets[palletIdx].scanned) {\n        alert(`Pallet ${code} already scanned`)\n        return prev\n      }\n      \n      updated.pallets[palletIdx] = {\n        ...updated.pallets[palletIdx],\n        scanned: true,\n        scanned_at: new Date().toISOString(),\n        scanned_by: workerId,\n      }\n      \n      return updated\n    })\n    setShowScanner(false)\n  }, [claimedOrder, workerId])\n\n  const allScanned = claimedOrder?.pallets.every(p => p.scanned) ?? false\n  const scannedCount = claimedOrder?.pallets.filter(p => p.scanned).length ?? 0\n  const totalPallets = claimedOrder?.pallets.length ?? 0\n\n  // ── Phase: SELECT ORDER ──────────────────────────────────────\n  if (phase === 'select') {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-4\">\n        <h1 className=\"text-xl font-bold\">Available Orders</h1>\n        <p className=\"text-sm text-muted\">Tap an order to claim it. Only one worker can claim each order.</p>\n        \n        {availableOrders.length === 0 && (\n          <div className=\"rounded-xl border border-border bg-card p-8 text-center\">\n            <p className=\"text-muted\">No pending orders available</p>\n          </div>\n        )}\n        \n        {availableOrders.map(order => (\n          <div key={order.id} className=\"rounded-xl border border-border bg-card p-5\">\n            <div className=\"flex items-center justify-between mb-3\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"font-mono font-bold text-lg\">{order.order_number}</span>\n                {order.is_urgent && <span className=\"text-xl\">🔥</span>}\n              </div>\n              <span className=\"text-xs text-muted\">{order.pallet_count} pallets</span>\n            </div>\n            <div className=\"text-sm text-muted mb-4\">\n              Ready by: {new Date(order.ready_date).toLocaleDateString('es-MX')}\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => claimOrder(order)}\n              disabled={claiming === order.id}\n              className=\"w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-lg font-bold touch-manipulation\"\n            >\n              {claiming === order.id ? 'Claiming...' : 'Claim Order'}\n            </button>\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  // ── Phase: SCAN PALLETS ──────────────────────────────────────\n  if (phase === 'scan' && claimedOrder) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-4\">\n        <div className=\"flex items-center justify-between\">\n          <h1 className=\"text-xl font-bold\">{claimedOrder.order_number}</h1>\n          <span className=\"font-mono text-sm text-muted\">{scannedCount}/{totalPallets} scanned</span>\n        </div>\n        \n        {/* Progress bar */}\n        <div className=\"h-3 bg-background rounded-full overflow-hidden\">\n          <div\n            className=\"h-full bg-green-500 rounded-full transition-all duration-300\"\n            style={{ width: totalPallets > 0 ? `${(scannedCount / totalPallets) * 100}%` : '0%' }}\n          />\n        </div>\n\n        {/* Pallet list */}\n        <div className=\"space-y-2\">\n          {claimedOrder.pallets.map(pallet => (\n            <div\n              key={pallet.id}\n              className={`rounded-xl border p-4 flex items-center justify-between ${\n                pallet.scanned\n                  ? 'border-green-500/30 bg-green-500/5'\n                  : 'border-border bg-card'\n              }`}\n            >\n              <div>\n                <span className=\"font-mono font-medium\">{pallet.pallet_code}</span>\n                <span className=\"text-sm text-muted ml-3\">\n                  {pallet.product_name} ({pallet.quantity} {pallet.unit})\n                </span>\n              </div>\n              {pallet.scanned ? (\n                <span className=\"text-green-400 text-2xl\">✓</span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => setShowScanner(true)}\n                  className=\"px-4 py-3 bg-blue-600 text-white rounded-xl text-sm font-medium touch-manipulation\"\n                >\n                  Scan\n                </button>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {/* Start Loading button */}\n        <button\n          type=\"button\"\n          onClick={() => allScanned && setPhase('load')}\n          disabled={!allScanned}\n          className={`w-full py-5 rounded-xl text-xl font-bold touch-manipulation ${\n            allScanned\n              ? 'bg-green-600 hover:bg-green-700 text-white'\n              : 'bg-gray-700 text-gray-400 cursor-not-allowed'\n          }`}\n        >\n          {allScanned ? 'Start Loading →' : `Scan ${totalPallets - scannedCount} more pallets`}\n        </button>\n\n        {/* QR Scanner overlay */}\n        {showScanner && (\n          <QRScanner onScan={handleScan} onClose={() => setShowScanner(false)} />\n        )}\n      </div>\n    )\n  }\n\n  // ── Phase: LOADING EVIDENCE ──────────────────────────────────\n  if (phase === 'load' && claimedOrder) {\n    const evidence = claimedOrder.loading_evidence\n    const canFinish = evidence.photos.length >= 4 && evidence.trailer_number && evidence.seal_number\n\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 space-y-6\">\n        <h1 className=\"text-xl font-bold\">Loading Evidence</h1>\n        <p className=\"text-sm text-muted\">Take 4 photos and record trailer details.</p>\n\n        {/* Photos */}\n        <div>\n          <h2 className=\"text-sm font-medium mb-3\">Photos ({evidence.photos.length}/4)</h2>\n          <PhotoCapture\n            photos={evidence.photos}\n            onCapture={url => {\n              setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: {\n                  ...prev.loading_evidence,\n                  photos: [...prev.loading_evidence.photos, url],\n                }\n              } : prev)\n            }}\n          />\n        </div>\n\n        {/* Trailer Details */}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Trailer Number</label>\n            <input\n              type=\"text\"\n              value={evidence.trailer_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, trailer_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., TRL-4521\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Container Number (optional)</label>\n            <input\n              type=\"text\"\n              value={evidence.container_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, container_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., MSKU-1234567\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium mb-1\">Seal Number</label>\n            <input\n              type=\"text\"\n              value={evidence.seal_number}\n              onChange={e => setClaimedOrder(prev => prev ? {\n                ...prev,\n                loading_evidence: { ...prev.loading_evidence, seal_number: e.target.value }\n              } : prev)}\n              placeholder=\"e.g., SEAL-00891\"\n              className=\"w-full bg-background border border-border rounded-xl px-4 py-4 text-lg font-mono\"\n            />\n          </div>\n        </div>\n\n        <button\n          type=\"button\"\n          onClick={() => canFinish && setPhase('finish')}\n          disabled={!canFinish}\n          className={`w-full py-5 rounded-xl text-xl font-bold touch-manipulation ${\n            canFinish\n              ? 'bg-green-600 hover:bg-green-700 text-white'\n              : 'bg-gray-700 text-gray-400 cursor-not-allowed'\n          }`}\n        >\n          {canFinish ? 'Finish & Generate BOL →' : 'Complete all fields'}\n        </button>\n      </div>\n    )\n  }\n\n  // ── Phase: FINISH ────────────────────────────────────────────\n  if (phase === 'finish' && claimedOrder) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-4 flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6\">\n        <div className=\"text-6xl\">✅</div>\n        <h1 className=\"text-2xl font-bold\">Order Complete</h1>\n        <p className=\"text-muted\">{claimedOrder.order_number} — BOL generated automatically</p>\n        <button\n          type=\"button\"\n          onClick={() => { setClaimedOrder(null); setPhase('select') }}\n          className=\"w-full max-w-sm py-5 bg-blue-600 text-white rounded-xl text-xl font-bold touch-manipulation\"\n        >\n          Next Order\n        </button>\n      </div>\n    )\n  }\n\n  return null\n}\n```\n\n### Acceptance Criteria\n1. Available orders shown (pending, unclaimed)\n2. Claim button with atomic lock (Supabase RPC: `WHERE claimed_by IS NULL`)\n3. Per-pallet QR scan with camera integration\n4. Green checkmark on scan, duplicate prevention\n5. All scanned → \"Start Loading\" unlocks\n6. Loading: 4 photo capture + trailer/container/seal fields\n7. Finish generates BOL (server-side trigger)\n8. Supervisor unclaim: separate admin action (PATCH status back to pending)\n9. Tablet-responsive: large touch targets (py-4/py-5), font-mono, rounded-xl\n\n### Atomic Claim RPC\n```sql\nCREATE OR REPLACE FUNCTION claim_wms_order(p_order_id UUID, p_worker_id UUID)\nRETURNS wms_orders AS $$\n  UPDATE wms_orders\n  SET claimed_by = p_worker_id, status = 'claimed', claimed_at = NOW()\n  WHERE id = p_order_id AND claimed_by IS NULL\n  RETURNING *;\n$$ LANGUAGE sql;\n```"
}