{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "wholesale-b2b-quick-order",
  "title": "Wholesale B2b Quick Order",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/wholesale-b2b-quick-order/WholesaleB2bQuickOrder.vue",
      "content": "<script lang=\"ts\">\nexport interface WholesaleProduct {\n  id: string\n  sku: string\n  name: string\n  variant: string\n  casePack: number\n  msrpUnitPrice: number\n  wholesaleUnitPrice: number\n  cases: number\n  availableCases: number\n  image: string\n  category: string\n}\n\nexport const DEFAULT_WHOLESALE_PRODUCTS: WholesaleProduct[] = [\n  {\n    id: 'prod-1',\n    sku: 'SKU-84920',\n    name: 'Pro Studio Headphones',\n    variant: 'Matte Black · Pro Series',\n    casePack: 12,\n    msrpUnitPrice: 299.0,\n    wholesaleUnitPrice: 194.35,\n    cases: 4,\n    availableCases: 450,\n    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&auto=format&fit=crop&q=80',\n    category: 'Audio & Acoustics',\n  },\n  {\n    id: 'prod-2',\n    sku: 'SKU-49102',\n    name: 'Aero Minimalist Runner',\n    variant: 'Arctic White · US 10-12 Assorted',\n    casePack: 10,\n    msrpUnitPrice: 140.0,\n    wholesaleUnitPrice: 91.0,\n    cases: 3,\n    availableCases: 180,\n    image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&auto=format&fit=crop&q=80',\n    category: 'Footwear',\n  },\n  {\n    id: 'prod-3',\n    sku: 'SKU-77215',\n    name: 'Technical Shell Parka',\n    variant: 'Mineral Gray · Waterproof 3L',\n    casePack: 8,\n    msrpUnitPrice: 220.0,\n    wholesaleUnitPrice: 143.0,\n    cases: 2,\n    availableCases: 95,\n    image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=300&auto=format&fit=crop&q=80',\n    category: 'Outerwear',\n  },\n  {\n    id: 'prod-4',\n    sku: 'SKU-10934',\n    name: 'Braided USB-C Cable',\n    variant: 'Space Gray · 2m 240W EPR',\n    casePack: 24,\n    msrpUnitPrice: 25.0,\n    wholesaleUnitPrice: 16.25,\n    cases: 2,\n    availableCases: 620,\n    image: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=300&auto=format&fit=crop&q=80',\n    category: 'Hardware & Cables',\n  },\n  {\n    id: 'prod-5',\n    sku: 'SKU-63821',\n    name: 'Leather Cardholder',\n    variant: 'Saddle Brown · Full-Grain Veg-Tan',\n    casePack: 20,\n    msrpUnitPrice: 50.0,\n    wholesaleUnitPrice: 32.5,\n    cases: 1,\n    availableCases: 24,\n    image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=300&auto=format&fit=crop&q=80',\n    category: 'Leather Goods',\n  },\n]\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  Bookmark,\n  Building2,\n  CheckCircle2,\n  Download,\n  FileSpreadsheet,\n  Minus,\n  Package,\n  Plus,\n  RefreshCw,\n  Send,\n  Layers,\n  Trash2,\n  TrendingDown,\n  Truck,\n  Upload,\n  X,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface Props {\n  poNumber?: string\n  accountName?: string\n  accountTier?: string\n  tierDiscountPercent?: number\n  paymentTerms?: string\n  freeFreightThreshold?: number\n  initialProducts?: WholesaleProduct[]\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  poNumber: 'PO-2026-8841B',\n  accountName: 'Northwind Retailers',\n  accountTier: 'Tier 3 Wholesale Partner',\n  tierDiscountPercent: 35,\n  paymentTerms: 'Net 30 Invoicing',\n  freeFreightThreshold: 10000,\n})\n\nconst emit = defineEmits<{\n  submitOrder: [\n    payload: {\n      poNumber: string\n      items: WholesaleProduct[]\n      subtotal: number\n      totalUnits: number\n      totalCases: number\n      savings: number\n    },\n  ]\n  saveTemplate: [items: WholesaleProduct[]]\n  exportCsv: [items: WholesaleProduct[]]\n}>()\n\nconst products = ref<WholesaleProduct[]>(\n  props.initialProducts\n    ? JSON.parse(JSON.stringify(props.initialProducts))\n    : JSON.parse(JSON.stringify(DEFAULT_WHOLESALE_PRODUCTS)),\n)\n\nconst poRef = ref(props.poNumber)\nconst showCsvBox = ref(false)\nconst csvPasteText = ref('')\nconst pasteFeedback = ref<{ type: 'success' | 'error'; message: string } | null>(null)\nconst templateSaved = ref(false)\nconst orderSubmitted = ref(false)\nconst isSubmitting = ref(false)\n\nconst formatCurrency = (val: number) => {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD',\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  }).format(val)\n}\n\nconst formatNumber = (val: number) => {\n  return new Intl.NumberFormat('en-US').format(val)\n}\n\n// Computations\nconst totalCases = computed(() => products.value.reduce((acc, p) => acc + (Number(p.cases) || 0), 0))\nconst totalUnits = computed(() => products.value.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack, 0))\nconst wholesaleSubtotal = computed(() =>\n  products.value.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.wholesaleUnitPrice, 0),\n)\nconst msrpTotal = computed(() =>\n  products.value.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.msrpUnitPrice, 0),\n)\nconst totalSavings = computed(() => Math.max(0, msrpTotal.value - wholesaleSubtotal.value))\nconst savingsPercent = computed(() => {\n  if (msrpTotal.value <= 0) return props.tierDiscountPercent\n  return Math.round((totalSavings.value / msrpTotal.value) * 100)\n})\n\nconst isFreeFreight = computed(() => wholesaleSubtotal.value >= props.freeFreightThreshold)\nconst freightAmount = computed(() => (isFreeFreight.value ? 0 : 250))\nconst grandTotal = computed(() => wholesaleSubtotal.value + freightAmount.value)\n\nconst nextTierTarget = 50000\nconst nextTierRemaining = computed(() => Math.max(0, nextTierTarget - wholesaleSubtotal.value))\nconst tierProgressPercent = computed(() => Math.min(100, Math.round((wholesaleSubtotal.value / nextTierTarget) * 100)))\n\n// Actions\nconst updateCases = (id: string, delta: number) => {\n  const item = products.value.find((p) => p.id === id)\n  if (item) {\n    const current = Number(item.cases) || 0\n    const next = Math.max(0, Math.min(item.availableCases, current + delta))\n    item.cases = next\n  }\n}\n\nconst setCases = (id: string, val: string | number) => {\n  const item = products.value.find((p) => p.id === id)\n  if (item) {\n    const parsed = parseInt(String(val), 10)\n    if (isNaN(parsed) || parsed < 0) {\n      item.cases = 0\n    } else {\n      item.cases = Math.min(item.availableCases, parsed)\n    }\n  }\n}\n\nconst clearLine = (id: string) => {\n  const item = products.value.find((p) => p.id === id)\n  if (item) {\n    item.cases = 0\n  }\n}\n\nconst resetAllCases = () => {\n  products.value.forEach((p) => {\n    p.cases = 0\n  })\n  pasteFeedback.value = null\n}\n\nconst restoreDefaultCases = () => {\n  products.value = JSON.parse(JSON.stringify(DEFAULT_WHOLESALE_PRODUCTS))\n  pasteFeedback.value = null\n}\n\nconst applyCsvPaste = () => {\n  pasteFeedback.value = null\n  if (!csvPasteText.value.trim()) {\n    pasteFeedback.value = {\n      type: 'error',\n      message: 'Please paste SKU and case quantity rows to parse.',\n    }\n    return\n  }\n\n  const lines = csvPasteText.value.split(/\\r?\\n/)\n  let updatedCount = 0\n  const unknownSkus: string[] = []\n\n  for (const rawLine of lines) {\n    const line = rawLine.trim()\n    if (!line || line.startsWith('#') || line.toLowerCase().startsWith('sku')) continue\n\n    const parts = line.split(/[,;\\t]+/).map((s) => s.trim())\n    if (parts.length >= 2) {\n      const skuQuery = parts[0].toUpperCase()\n      const qty = parseInt(parts[1], 10)\n\n      if (!isNaN(qty)) {\n        const product = products.value.find(\n          (p) => p.sku.toUpperCase() === skuQuery || p.sku.toUpperCase().includes(skuQuery),\n        )\n        if (product) {\n          product.cases = Math.max(0, Math.min(product.availableCases, qty))\n          updatedCount++\n        } else {\n          unknownSkus.push(parts[0])\n        }\n      }\n    }\n  }\n\n  if (updatedCount > 0) {\n    pasteFeedback.value = {\n      type: 'success',\n      message: `Successfully updated ${updatedCount} SKU line items in bulk matrix.${\n        unknownSkus.length > 0\n          ? ` Note: ${unknownSkus.length} SKU(s) not found in catalog (${unknownSkus.slice(0, 3).join(', ')}).`\n          : ''\n      }`,\n    }\n  } else {\n    pasteFeedback.value = {\n      type: 'error',\n      message: 'No matching catalog SKUs found. Verify format: SKU-84920, 10',\n    }\n  }\n}\n\nconst loadSampleCsv = () => {\n  csvPasteText.value = `SKU-84920, 8\\nSKU-49102, 5\\nSKU-77215, 4\\nSKU-10934, 12\\nSKU-63821, 6`\n  applyCsvPaste()\n}\n\nconst handleSaveTemplate = () => {\n  templateSaved.value = true\n  emit('saveTemplate', products.value)\n  setTimeout(() => {\n    templateSaved.value = false\n  }, 4000)\n}\n\nconst handleSubmitOrder = () => {\n  if (totalCases.value === 0) return\n  isSubmitting.value = true\n  setTimeout(() => {\n    isSubmitting.value = false\n    orderSubmitted.value = true\n    emit('submitOrder', {\n      poNumber: poRef.value,\n      items: products.value.filter((p) => p.cases > 0),\n      subtotal: wholesaleSubtotal.value,\n      totalUnits: totalUnits.value,\n      totalCases: totalCases.value,\n      savings: totalSavings.value,\n    })\n  }, 600)\n}\n\nconst handleExportCsv = () => {\n  emit('exportCsv', products.value)\n  const header =\n    'SKU,Product Name,Variant,Case Pack Multiplier,Cases Ordered,Total Units,Wholesale Unit Price,Line Total\\n'\n  const rows = products.value\n    .filter((p) => p.cases > 0)\n    .map(\n      (p) =>\n        `\"${p.sku}\",\"${p.name}\",\"${p.variant}\",${p.casePack},${p.cases},${p.cases * p.casePack},${p.wholesaleUnitPrice},${(p.cases * p.casePack * p.wholesaleUnitPrice).toFixed(2)}`,\n    )\n    .join('\\n')\n  const csvContent = 'data:text/csv;charset=utf-8,' + encodeURIComponent(header + rows)\n  const downloadLink = document.createElement('a')\n  downloadLink.setAttribute('href', csvContent)\n  downloadLink.setAttribute('download', `${poRef.value}-order-matrix.csv`)\n  document.body.appendChild(downloadLink)\n  downloadLink.click()\n  document.body.removeChild(downloadLink)\n}\n</script>\n\n<template>\n  <div data-slot=\"wholesale-b2b-quick-order\" :class=\"cn('bg-background text-foreground w-full space-y-6', props.class)\">\n    <!-- Header & Account Info -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <Building2 class=\"size-3.5\" />\n                <span>{{ accountName }}</span>\n                <span>·</span>\n                <span>{{ accountTier }}</span>\n              </div>\n              <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success font-medium\">\n                <Layers class=\"mr-1 size-3\" />\n                {{ tierDiscountPercent }}% Off MSRP Wholesale Tier\n              </Badge>\n            </div>\n            <CardTitle class=\"text-xl font-bold tracking-tight sm:text-2xl\">\n              Wholesale & B2B Bulk Order Matrix\n            </CardTitle>\n            <CardDescription class=\"text-muted-foreground text-xs sm:text-sm\">\n              Build your purchase order by entering case quantities below or pasting bulk SKU manifests with automated\n              case multipliers.\n            </CardDescription>\n          </div>\n\n          <!-- Header Action Buttons -->\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button\n              aria-label=\"Close CSV paste\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs font-medium\"\n              @click=\"showCsvBox = !showCsvBox\"\n            >\n              <FileSpreadsheet class=\"size-3.5\" />\n              <span>{{ showCsvBox ? 'Hide CSV Paste' : 'Upload CSV Order' }}</span>\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handleSaveTemplate\">\n              <Bookmark class=\"size-3.5\" />\n              <span>Save Order Template</span>\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"pt-0\">\n        <!-- Account Terms & Partner Meta Strip -->\n        <div class=\"bg-muted/40 border-border grid grid-cols-2 gap-3 rounded-lg border p-3 sm:grid-cols-4 sm:gap-4\">\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">PO Reference</div>\n            <div class=\"font-mono text-sm font-semibold\">{{ poRef }}</div>\n          </div>\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Payment Terms</div>\n            <div class=\"text-foreground flex items-center gap-1 text-sm font-semibold\">\n              <CheckCircle2 class=\"text-success size-3.5\" />\n              <span>{{ paymentTerms }}</span>\n            </div>\n          </div>\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Freight Status</div>\n            <div :class=\"cn('text-sm font-semibold tabular-nums', isFreeFreight ? 'text-success' : 'text-foreground')\">\n              {{ isFreeFreight ? 'Free Ground Freight' : '$250 Standard Freight' }}\n            </div>\n          </div>\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Volume Tier Status</div>\n            <div class=\"text-foreground text-sm font-semibold\">\n              Tier 3 <span class=\"text-muted-foreground font-normal\">({{ tierDiscountPercent }}% Margin)</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Volume Tier Margin Incentive Banner -->\n        <div class=\"border-border bg-card/60 mt-3 rounded-lg border p-3\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <TrendingDown class=\"text-success size-4 shrink-0\" />\n              <div class=\"text-xs\">\n                <span class=\"text-foreground font-semibold\">Tier 4 Milestone ($50,000):</span>\n                <span class=\"text-muted-foreground ml-1\">\n                  {{\n                    nextTierRemaining > 0\n                      ? `Add ${formatCurrency(nextTierRemaining)} more to unlock 42% Tier 4 Enterprise Margin.`\n                      : 'Tier 4 Enterprise Margin (42%) Unlocked!'\n                  }}\n                </span>\n              </div>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n              <span>{{ tierProgressPercent }}% to Tier 4</span>\n              <div class=\"bg-muted border-border h-2 w-24 overflow-hidden rounded-full border\">\n                <div\n                  class=\"bg-success h-full transition-[width] duration-300\"\n                  :style=\"{ width: `${tierProgressPercent}%` }\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Template Saved Alert -->\n    <div\n      v-if=\"templateSaved\"\n      class=\"border-success/30 bg-success/10 text-success text-success flex items-center justify-between rounded-lg border p-3 text-xs sm:text-sm\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <Bookmark class=\"text-success size-4 shrink-0\" />\n        <span>Order matrix saved as your primary template. You can re-populate this draft at any time.</span>\n      </div>\n      <Button\n        aria-label=\"Dismiss notification\"\n        variant=\"ghost\"\n        size=\"xs\"\n        class=\"text-success hover:text-success\"\n        @click=\"templateSaved = false\"\n      >\n        <X class=\"size-3.5\" />\n      </Button>\n    </div>\n\n    <!-- Order Submitted Success Alert -->\n    <div\n      v-if=\"orderSubmitted\"\n      class=\"border-success/30 bg-success/10 text-success dark:text-foreground rounded-xl border p-4 sm:p-5\"\n    >\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-start gap-3\">\n          <CheckCircle2 class=\"text-success mt-0.5 size-5 shrink-0\" />\n          <div class=\"space-y-1\">\n            <h3 class=\"text-sm font-semibold sm:text-base\">Purchase Order {{ poRef }} Submitted Successfully!</h3>\n            <p class=\"text-muted-foreground text-xs sm:text-sm\">\n              Your bulk order of\n              <strong class=\"text-foreground\">{{ totalCases }} cases ({{ totalUnits }} units)</strong> totaling\n              <strong class=\"text-foreground\">{{ formatCurrency(grandTotal) }}</strong> has been queued for warehouse\n              dispatch under {{ paymentTerms }}.\n            </p>\n          </div>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"handleExportCsv\">\n            <Download class=\"mr-1.5 size-3.5\" />\n            Download PO PDF\n          </Button>\n          <Button size=\"sm\" class=\"text-xs\" @click=\"orderSubmitted = false\"> Start New Order </Button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Quick SKU & Quantity CSV Paste Box -->\n    <Card v-if=\"showCsvBox\" class=\"border-border bg-card shadow-xs transition-colors duration-200\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <FileSpreadsheet class=\"text-primary size-4\" />\n            <CardTitle class=\"text-sm font-semibold sm:text-base\"> Quick Paste SKU & Quantity Manifest </CardTitle>\n          </div>\n          <Button\n            aria-label=\"Close CSV paste\"\n            variant=\"ghost\"\n            size=\"xs\"\n            class=\"text-muted-foreground hover:text-foreground\"\n            @click=\"showCsvBox = false\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </div>\n        <CardDescription class=\"text-muted-foreground text-xs\">\n          Paste CSV rows with SKU identifier and case quantity (one item per line, e.g.\n          <code class=\"bg-muted rounded px-1 font-mono\">SKU-84920, 10</code>) to auto-populate matrix.\n        </CardDescription>\n      </CardHeader>\n\n      <CardContent class=\"space-y-3\">\n        <Textarea\n          v-model=\"csvPasteText\"\n          placeholder=\"SKU-84920, 8&#10;SKU-49102, 5&#10;SKU-77215, 4&#10;SKU-10934, 12&#10;SKU-63821, 6\"\n          :rows=\"4\"\n          class=\"font-mono text-xs\"\n        />\n\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button size=\"sm\" class=\"text-xs font-medium\" @click=\"applyCsvPaste\">\n              <Upload class=\"mr-1.5 size-3.5\" />\n              Apply SKU List to Matrix\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs font-medium\" @click=\"loadSampleCsv\">\n              Load Sample Data\n            </Button>\n            <Button\n              v-if=\"csvPasteText\"\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground text-xs\"\n              @click=\"csvPasteText = ''\"\n            >\n              Clear Input\n            </Button>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">Supports comma, tab, and semicolon delimited lines</div>\n        </div>\n\n        <!-- Parse Feedback Alert -->\n        <div\n          v-if=\"pasteFeedback\"\n          :class=\"\n            cn(\n              'flex items-center gap-2 rounded-lg border p-2.5 text-xs',\n              pasteFeedback.type === 'success'\n                ? 'border-success/30 bg-success/10 text-success'\n                : 'border-destructive/30 bg-destructive/10 text-destructive',\n            )\n          \"\n        >\n          <CheckCircle2 v-if=\"pasteFeedback.type === 'success'\" class=\"text-success size-4 shrink-0\" />\n          <AlertCircle v-else class=\"size-4 shrink-0\" />\n          <span>{{ pasteFeedback.message }}</span>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Bulk SKU Matrix Table Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"border-border border-b pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Bulk SKU Order Matrix</CardTitle>\n            <CardDescription class=\"text-muted-foreground text-xs\">\n              {{ products.length }} wholesale catalog items available with active case multipliers.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"xs\" class=\"text-muted-foreground text-xs\" @click=\"restoreDefaultCases\">\n              <RefreshCw class=\"mr-1 size-3\" />\n              Reset Defaults\n            </Button>\n            <Button variant=\"outline\" size=\"xs\" class=\"text-muted-foreground text-xs\" @click=\"resetAllCases\">\n              <Trash2 class=\"mr-1 size-3\" />\n              Zero All\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table class=\"w-full max-w-[760px] min-w-full\">\n            <TableHeader>\n              <TableRow class=\"bg-muted/30\">\n                <TableHead class=\"w-[300px] text-xs font-semibold\">Product & SKU Identifier</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Case Multiplier</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Unit Price</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Case Quantity</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Availability</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Line Total</TableHead>\n                <TableHead class=\"w-[50px]\">\n                  <span class=\"sr-only\">Actions</span>\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow\n                v-for=\"product in products\"\n                :key=\"product.id\"\n                :class=\"cn('transition-colors', product.cases > 0 && 'bg-primary/5 dark:bg-primary/5')\"\n              >\n                <!-- Product Thumbnail & Details -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"flex items-center gap-3\">\n                    <img\n                      :src=\"product.image\"\n                      :alt=\"product.name\"\n                      class=\"border-border bg-muted/40 size-12 shrink-0 rounded-lg border object-cover\"\n                      loading=\"lazy\"\n                    />\n                    <div class=\"min-w-0 space-y-0.5\">\n                      <div class=\"text-foreground truncate text-sm font-medium\">\n                        {{ product.name }}\n                      </div>\n                      <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                        <span class=\"font-mono\">{{ product.sku }}</span>\n                        <span>·</span>\n                        <span class=\"truncate\">{{ product.variant }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Case Pack Multiplier -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <Package class=\"text-muted-foreground size-3.5\" />\n                    <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                      {{ product.casePack }} units / case\n                    </span>\n                  </div>\n                </TableCell>\n\n                <!-- Pricing (MSRP vs Wholesale) -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground text-sm font-semibold tabular-nums\">\n                      {{ formatCurrency(product.wholesaleUnitPrice) }}\n                      <span class=\"text-muted-foreground text-xs font-normal\">wholesale</span>\n                    </div>\n                    <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                      <span class=\"tabular-nums line-through\">{{ formatCurrency(product.msrpUnitPrice) }} MSRP</span>\n                      <span class=\"text-success font-medium\">\n                        -{{\n                          Math.round(\n                            ((product.msrpUnitPrice - product.wholesaleUnitPrice) / product.msrpUnitPrice) * 100,\n                          )\n                        }}%\n                      </span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Quantity Stepper Input -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1\">\n                      <Button\n                        aria-label=\"Decrease cases\"\n                        variant=\"outline\"\n                        size=\"xs\"\n                        class=\"size-7 p-0\"\n                        :disabled=\"product.cases <= 0\"\n                        @click=\"updateCases(product.id, -1)\"\n                      >\n                        <Minus class=\"size-3\" />\n                      </Button>\n                      <Input\n                        :model-value=\"product.cases\"\n                        type=\"number\"\n                        min=\"0\"\n                        :max=\"product.availableCases\"\n                        class=\"h-7 w-16 text-center font-mono text-xs tabular-nums\"\n                        @update:model-value=\"(val) => setCases(product.id, val)\"\n                      />\n                      <Button\n                        aria-label=\"Increase cases\"\n                        variant=\"outline\"\n                        size=\"xs\"\n                        class=\"size-7 p-0\"\n                        :disabled=\"product.cases >= product.availableCases\"\n                        @click=\"updateCases(product.id, 1)\"\n                      >\n                        <Plus class=\"size-3\" />\n                      </Button>\n                    </div>\n                    <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                      {{ product.cases }} {{ product.cases === 1 ? 'case' : 'cases' }} =\n                      <strong class=\"text-foreground\">{{ product.cases * product.casePack }}</strong> units\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Stock Status -->\n                <TableCell class=\"py-3.5\">\n                  <Badge\n                    v-if=\"product.availableCases > 50\"\n                    variant=\"outline\"\n                    class=\"border-success/30 bg-success/10 text-success text-xs font-medium\"\n                  >\n                    In Stock · {{ formatNumber(product.availableCases) }} cases\n                  </Badge>\n                  <Badge\n                    v-else\n                    variant=\"outline\"\n                    class=\"border-warning/30 bg-warning/10 text-warning text-xs font-medium\"\n                  >\n                    Low Stock · {{ product.availableCases }} cases\n                  </Badge>\n                </TableCell>\n\n                <!-- Line Total -->\n                <TableCell class=\"py-3.5 text-right\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground font-mono text-sm font-bold tabular-nums\">\n                      {{ formatCurrency(product.cases * product.casePack * product.wholesaleUnitPrice) }}\n                    </div>\n                    <div v-if=\"product.cases > 0\" class=\"text-success text-success font-mono text-xs tabular-nums\">\n                      Save\n                      {{\n                        formatCurrency(\n                          product.cases * product.casePack * (product.msrpUnitPrice - product.wholesaleUnitPrice),\n                        )\n                      }}\n                    </div>\n                    <div v-else class=\"text-muted-foreground text-xs\">0 units</div>\n                  </div>\n                </TableCell>\n\n                <!-- Row Clear Action -->\n                <TableCell class=\"py-3.5 text-center\">\n                  <Button\n                    v-if=\"product.cases > 0\"\n                    variant=\"ghost\"\n                    size=\"xs\"\n                    class=\"text-muted-foreground hover:text-destructive size-7 p-0\"\n                    title=\"Clear row quantity\"\n                    @click=\"clearLine(product.id)\"\n                  >\n                    <Trash2 class=\"size-3.5\" />\n                  </Button>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Sticky Order Summary Footer -->\n    <div\n      class=\"bg-card/95 border-border sticky bottom-4 z-20 rounded-xl border p-4 shadow-lg backdrop-blur-md transition-colors sm:p-5\"\n    >\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Summary Totals Metrics -->\n        <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-6\">\n          <!-- Total Units -->\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Total Units</div>\n            <div class=\"font-mono text-base font-bold tabular-nums sm:text-lg\">\n              {{ formatNumber(totalUnits) }} Units\n            </div>\n            <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ totalCases }} Cases ordered</div>\n          </div>\n\n          <!-- Wholesale Subtotal -->\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Wholesale Subtotal</div>\n            <div class=\"font-mono text-base font-bold tabular-nums sm:text-lg\">\n              {{ formatCurrency(wholesaleSubtotal) }}\n            </div>\n            <div class=\"text-muted-foreground text-xs\">MSRP {{ formatCurrency(msrpTotal) }}</div>\n          </div>\n\n          <!-- Tier Savings -->\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Tier Volume Savings</div>\n            <div class=\"text-success text-success font-mono text-base font-bold tabular-nums sm:text-lg\">\n              -{{ formatCurrency(totalSavings) }}\n            </div>\n            <div class=\"text-success text-xs font-medium\">{{ savingsPercent }}% Margin Savings</div>\n          </div>\n\n          <!-- Freight & Terms -->\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Freight & Terms</div>\n            <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n              <Truck class=\"text-primary size-3.5 shrink-0\" />\n              <span>{{ isFreeFreight ? 'Free Freight (>$10k)' : '$250 Ground' }}</span>\n            </div>\n            <div class=\"text-muted-foreground text-xs\">\n              {{ paymentTerms }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Submit & Secondary Actions -->\n        <div class=\"flex flex-wrap items-center gap-2.5 pt-2 lg:pt-0\">\n          <Button\n            aria-label=\"Download attachment\"\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"text-xs font-medium\"\n            :disabled=\"totalCases === 0\"\n            @click=\"handleExportCsv\"\n          >\n            <Download class=\"mr-1.5 size-3.5\" />\n            Export CSV\n          </Button>\n\n          <Button\n            size=\"default\"\n            class=\"gap-2 text-xs font-semibold sm:text-sm\"\n            :disabled=\"totalCases === 0 || isSubmitting\"\n            @click=\"handleSubmitOrder\"\n          >\n            <Send v-if=\"!isSubmitting\" class=\"size-4\" />\n            <RefreshCw v-else class=\"size-4 animate-spin\" />\n            <span>{{ isSubmitting ? 'Processing PO...' : 'Submit Wholesale Purchase Order' }}</span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/WholesaleB2bQuickOrder.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.",
  "categories": [
    "commerce",
    "ecommerce"
  ]
}