{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "store-pickup-curbside",
  "title": "Store Pickup Curbside",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/store-pickup-curbside/StorePickupCurbside.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  Bell,\n  Car,\n  Check,\n  CheckCircle2,\n  Clock,\n  Eye,\n  Layers,\n  MapPin,\n  MessageSquare,\n  MoreHorizontal,\n  Navigation,\n  Package,\n  PackageCheck,\n  Phone,\n  Plus,\n  RefreshCw,\n  Search,\n  Send,\n  Store,\n  X,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport OrderDetailDialog from './OrderDetailDialog.vue'\nimport StorePickupModals from './StorePickupModals.vue'\nimport type { OrderItem, OrderStatus, PickupMode, PickupOrder, StorePickupCurbsideProps } from './store-pickup-types'\nimport { INITIAL_ORDERS } from './store-pickup-data'\n\nexport type { OrderItem, OrderStatus, PickupMode, PickupOrder, StorePickupCurbsideProps }\n\ninterface Props {\n  storeName?: string\n  storeCode?: string\n  initialModeFilter?: 'all' | 'curbside' | 'in_store'\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  storeName: 'Pasadena Flagship Store #02',\n  storeCode: 'STORE-CA-02',\n  initialModeFilter: 'all',\n})\n\n// State\nconst orders = ref<PickupOrder[]>(INITIAL_ORDERS)\nconst searchQuery = ref('')\nconst selectedModeFilter = ref<'all' | 'curbside' | 'in_store'>(props.initialModeFilter)\nconst selectedStatusFilter = ref<'all' | 'arrived' | 'en_route' | 'ready_staging' | 'completed'>('all')\nconst lastRefreshed = ref('Just now')\nconst isLiveSyncing = ref(true)\n\n// Modals State\nconst checkInModalOpen = ref(false)\nconst inspectModalOpen = ref(false)\nconst notifyModalOpen = ref(false)\nconst newOrderModalOpen = ref(false)\nconst selectedOrder = ref<PickupOrder | null>(null)\nconst actionFeedbackToast = ref<string | null>(null)\n\n// Computed\nconst readyInStagingCount = computed(() => orders.value.filter((o) => o.status !== 'completed').length)\nconst arrivedCustomersCount = computed(() => orders.value.filter((o) => o.status === 'arrived').length)\nconst enRouteCount = computed(() => orders.value.filter((o) => o.status === 'en_route').length)\nconst completedCount = computed(() => orders.value.filter((o) => o.status === 'completed').length + 32)\n\nconst filteredOrders = computed(() => {\n  return orders.value.filter((order) => {\n    const matchesSearch =\n      searchQuery.value.trim() === '' ||\n      order.customerName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      order.orderNumber.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      order.customerPhone.includes(searchQuery.value) ||\n      order.stagingLocation.bin.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      (order.vehicleDetails?.makeModel.toLowerCase().includes(searchQuery.value.toLowerCase()) ?? false) ||\n      (order.vehicleDetails?.plate.toLowerCase().includes(searchQuery.value.toLowerCase()) ?? false) ||\n      order.items.some((i) => i.name.toLowerCase().includes(searchQuery.value.toLowerCase()))\n\n    const matchesMode = selectedModeFilter.value === 'all' || order.pickupMode === selectedModeFilter.value\n\n    const matchesStatus = selectedStatusFilter.value === 'all' || order.status === selectedStatusFilter.value\n\n    return matchesSearch && matchesMode && matchesStatus\n  })\n})\n\nfunction triggerToast(msg: string) {\n  actionFeedbackToast.value = msg\n  setTimeout(() => {\n    if (actionFeedbackToast.value === msg) {\n      actionFeedbackToast.value = null\n    }\n  }, 3500)\n}\n\nfunction handleInspect(order: PickupOrder) {\n  selectedOrder.value = order\n  inspectModalOpen.value = true\n}\n\nfunction handleNotify(order: PickupOrder) {\n  selectedOrder.value = order\n  notifyModalOpen.value = true\n}\n\nfunction handleSendNotification(channel: 'sms' | 'push') {\n  if (!selectedOrder.value) return\n  notifyModalOpen.value = false\n  triggerToast(`Sent arrival notification to ${selectedOrder.value?.customerName} via ${channel.toUpperCase()}`)\n}\n\nfunction handleMarkDelivered(orderId: string) {\n  const target = orders.value.find((o) => o.id === orderId)\n  if (target) {\n    target.status = 'completed'\n    target.statusLabel = 'Delivered & Handed Over'\n    triggerToast(`Order #${target.orderNumber} successfully delivered to ${target.customerName}!`)\n    if (inspectModalOpen.value) {\n      inspectModalOpen.value = false\n    }\n  }\n}\n\nfunction handleConfirmArrival(payload: {\n  orderId: string\n  spot: string\n  vehicleModel: string\n  plate: string\n  hazards: boolean\n  notes: string\n}) {\n  const order = orders.value.find((o) => o.id === payload.orderId)\n  if (order) {\n    order.status = 'arrived'\n    order.pickupMode = 'curbside'\n    order.spotNumber = parseInt(payload.spot, 10) || 4\n    order.waitMinutes = 1\n    order.statusLabel = 'Customer Arrived · Waiting 1m'\n    order.vehicleDetails = {\n      makeModel: payload.vehicleModel || 'Vehicle Unspecified',\n      plate: payload.plate || 'N/A',\n      hazardsFlashing: payload.hazards,\n    }\n    order.arrivedAt = 'Just now'\n    checkInModalOpen.value = false\n    triggerToast(`Customer ${order.customerName} checked into Spot #${order.spotNumber}! Runner alerted.`)\n  }\n}\n\nfunction handleCreateNewOrder(payload: {\n  customerName: string\n  customerPhone: string\n  pickupMode: PickupMode\n  spotNumber: string\n  stagingAisle: string\n  stagingBin: string\n  itemSummary: string\n  orderTotal: string\n}) {\n  const idNum = Math.floor(10000 + Math.random() * 90000)\n  const newOrder: PickupOrder = {\n    id: `order-${Date.now()}`,\n    orderNumber: `BOPIS-${idNum}`,\n    customerName: payload.customerName,\n    customerPhone: payload.customerPhone || '(415) 555-0100',\n    customerInitials: payload.customerName\n      .split(' ')\n      .map((n) => n[0])\n      .join('')\n      .toUpperCase()\n      .slice(0, 2),\n    pickupMode: payload.pickupMode,\n    spotNumber: payload.pickupMode === 'curbside' ? parseInt(payload.spotNumber, 10) || 3 : undefined,\n    pickupDeskBay: payload.pickupMode === 'in_store' ? 'Pickup Desk Bay 02' : undefined,\n    vehicleDetails:\n      payload.pickupMode === 'curbside'\n        ? {\n            makeModel: 'Customer Vehicle',\n            plate: 'PENDING',\n            hazardsFlashing: false,\n          }\n        : undefined,\n    status: 'ready_staging',\n    statusLabel: `Ready in ${payload.stagingAisle}`,\n    stagingLocation: {\n      zone: payload.stagingAisle,\n      bin: payload.stagingBin,\n      type: payload.pickupMode === 'in_store' ? 'locker' : 'shelf',\n    },\n    items: [\n      {\n        id: `item-${Date.now()}`,\n        name: payload.itemSummary || 'Selected Retail Merchandise',\n        sku: `SKU-${Math.floor(100 + Math.random() * 900)}`,\n        quantity: 1,\n        price: parseFloat(payload.orderTotal) || 99.0,\n        staged: true,\n        category: 'General',\n      },\n    ],\n    orderTotal: parseFloat(payload.orderTotal) || 99.0,\n    placedAt: '11:45 AM',\n    readyAt: 'Just now',\n    verificationCode: `${Math.floor(1000 + Math.random() * 9000)}`,\n    assignedRunner: 'Pending Handoff',\n  }\n\n  orders.value.unshift(newOrder)\n  newOrderModalOpen.value = false\n  triggerToast(`New Order #${newOrder.orderNumber} staged in ${newOrder.stagingLocation.bin}!`)\n}\n\nfunction handleRefresh() {\n  lastRefreshed.value = 'Just now'\n  triggerToast('Refreshed pickup staging queue & curbside telemetry')\n}\n</script>\n\n<template>\n  <div :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Live Toast Notification Banner -->\n    <div\n      v-if=\"actionFeedbackToast\"\n      class=\"border-success/30 bg-success/10 text-success flex items-center justify-between rounded-md border px-4 py-2.5 text-xs font-medium shadow-xs transition-colors duration-200\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n        <span>{{ actionFeedbackToast }}</span>\n      </div>\n      <button\n        aria-label=\"Dismiss notification\"\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground inline-flex size-4 items-center justify-center\"\n        @click=\"actionFeedbackToast = null\"\n      >\n        <X class=\"size-3.5\" />\n      </button>\n    </div>\n\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n      <div>\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div\n            class=\"bg-primary/10 text-primary border-primary/20 flex size-8 items-center justify-center rounded-lg border\"\n          >\n            <Car class=\"size-4\" />\n          </div>\n          <h1 class=\"text-xl font-bold tracking-tight md:text-2xl\">Store Pickup & Curbside Coordination</h1>\n          <Badge wrap variant=\"outline\" class=\"gap-1.5 font-medium\">\n            <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n            <span class=\"text-xs\">Live Staging Radar</span>\n          </Badge>\n        </div>\n        <div class=\"text-muted-foreground mt-1.5 flex flex-wrap items-center gap-2 text-xs\">\n          <span class=\"text-foreground flex items-center gap-1 font-medium\">\n            <MapPin class=\"text-muted-foreground size-3.5\" />\n            {{ props.storeName }}\n          </span>\n          <span class=\"font-mono text-xs\">{{ props.storeCode }}</span>\n          <span class=\"text-foreground font-medium tabular-nums\">\n            {{ readyInStagingCount }} Ready · {{ enRouteCount }} En Route · {{ completedCount }} Completed\n          </span>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" class=\"h-9 gap-1.5 text-xs shadow-xs\" @click=\"checkInModalOpen = true\">\n          <Car class=\"text-warning size-3.5\" />\n          <span>Customer \"I'm Here\" Check-In</span>\n        </Button>\n\n        <Button size=\"sm\" class=\"h-9 gap-1.5 text-xs shadow-xs\" @click=\"newOrderModalOpen = true\">\n          <Plus class=\"size-3.5\" />\n          <span>New Pickup Order</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Fulfillment Health Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Ready in Staging -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row flex-wrap items-center justify-between gap-2 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Ready for Customer\n          </CardTitle>\n          <div class=\"bg-muted text-muted-foreground flex size-7 items-center justify-center rounded-md\">\n            <PackageCheck class=\"text-foreground size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"text-2xl font-bold tracking-tight tabular-nums\">8 Orders in Staging</div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 gap-y-1 text-xs\">\n            <span>6 Bins · 2 Secured Lockers</span>\n            <Badge wrap variant=\"success\" class=\"h-5 px-1.5 text-xs font-medium\"> 100% Pick Accuracy </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Arrived in Curbside Bay (Amber Alert) -->\n      <Card class=\"border-warning/30 bg-warning/5 shadow-xs\">\n        <CardHeader class=\"flex flex-row flex-wrap items-center justify-between gap-2 pb-2\">\n          <CardTitle\n            class=\"text-warning text-warning min-w-0 text-xs font-semibold tracking-wider break-words uppercase\"\n          >\n            Customers in Parking Bays\n          </CardTitle>\n          <div class=\"bg-warning/15 text-warning flex size-7 items-center justify-center rounded-md\">\n            <Car class=\"text-warning size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"text-foreground dark:text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n            {{ arrivedCustomersCount }} Customers Arrived\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 gap-y-1 text-xs\">\n            <span class=\"text-warning/80 text-warning/80\">Bay #4 (2m) · Bay #2 (4m)</span>\n            <Badge wrap variant=\"warning\" class=\"h-5 gap-1 px-1.5 text-xs font-medium\">\n              <span class=\"bg-warning bg-warning size-1.5 rounded-full\" />\n              Action Required\n            </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Avg Fulfillment Time -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row flex-wrap items-center justify-between gap-2 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Avg Fulfillment Time\n          </CardTitle>\n          <div class=\"bg-muted text-muted-foreground flex size-7 items-center justify-center rounded-md\">\n            <Clock class=\"text-foreground size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"text-2xl font-bold tracking-tight tabular-nums\">1m 45s</div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 gap-y-1 text-xs\">\n            <span>Goal &lt; 3m 00s (-18s vs target)</span>\n            <Badge wrap variant=\"info\" class=\"h-5 px-1.5 text-xs font-medium\"> Fastest: 52s </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Today's Completed Pickups -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row flex-wrap items-center justify-between gap-2 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Today's Pickups\n          </CardTitle>\n          <div class=\"bg-muted text-muted-foreground flex size-7 items-center justify-center rounded-md\">\n            <CheckCircle2 class=\"text-foreground size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"text-2xl font-bold tracking-tight tabular-nums\">{{ completedCount }} Orders</div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-x-2 gap-y-1 text-xs\">\n            <span>$5,240 Fulfilled Volume</span>\n            <Badge wrap variant=\"success\" class=\"h-5 px-1.5 text-xs font-medium\"> 97.2% On-Time SLA </Badge>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Active Pickup Orders Board / Table Card -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"space-y-4 pb-4\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Active Pickup Orders Board</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Live queue of customers arriving curbside and checking in at in-store fulfillment stations.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs shadow-xs\" @click=\"handleRefresh\">\n              <RefreshCw class=\"text-muted-foreground size-3\" />\n              <span>Refresh</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Filter & Search Controls -->\n        <div class=\"flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"relative max-w-sm flex-1\">\n            <Search class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n            <Input\n              v-model=\"searchQuery\"\n              placeholder=\"Search customer, order #, spot, or items...\"\n              class=\"h-8 pl-8 text-xs\"\n            />\n            <button\n              aria-label=\"Clear search\"\n              v-if=\"searchQuery\"\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-2.5 -translate-y-1/2\"\n              @click=\"searchQuery = ''\"\n            >\n              <X class=\"size-3\" />\n            </button>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-muted-foreground text-xs\">Mode:</span>\n              <Select v-model=\"selectedModeFilter\">\n                <SelectTrigger class=\"h-8 w-32 text-xs\">\n                  <SelectValue placeholder=\"Pickup Mode\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All Modes</SelectItem>\n                  <SelectItem value=\"curbside\">Curbside Bay</SelectItem>\n                  <SelectItem value=\"in_store\">In-Store Desk</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-muted-foreground text-xs\">Status:</span>\n              <Select v-model=\"selectedStatusFilter\">\n                <SelectTrigger class=\"h-8 w-36 text-xs\">\n                  <SelectValue placeholder=\"Status\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All Statuses</SelectItem>\n                  <SelectItem value=\"arrived\">Customer Arrived</SelectItem>\n                  <SelectItem value=\"en_route\">En Route</SelectItem>\n                  <SelectItem value=\"ready_staging\">Ready in Staging</SelectItem>\n                  <SelectItem value=\"completed\">Completed</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow>\n                <TableHead class=\"w-[200px] text-xs font-semibold\">Customer & Contact</TableHead>\n                <TableHead class=\"w-[180px] text-xs font-semibold\">Order & Items</TableHead>\n                <TableHead class=\"w-[220px] text-xs font-semibold\">Pickup Mode & Bay</TableHead>\n                <TableHead class=\"w-[200px] text-xs font-semibold\">Customer Status</TableHead>\n                <TableHead class=\"w-[160px] text-xs font-semibold\">Staging Location</TableHead>\n                <TableHead class=\"w-[180px] text-right text-xs font-semibold\">Fulfillment Actions</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow\n                v-for=\"order in filteredOrders\"\n                :key=\"order.id\"\n                :class=\"\n                  cn(\n                    'transition-colors duration-150',\n                    order.status === 'arrived' && 'bg-warning/[0.04] bg-warning/[0.08]',\n                  )\n                \"\n              >\n                <!-- Customer Name & Phone -->\n                <TableCell class=\"py-3\">\n                  <div class=\"flex items-center gap-2.5\">\n                    <Avatar class=\"border-border size-8 rounded-full border\">\n                      <AvatarFallback class=\"bg-muted text-xs font-medium\">\n                        {{ order.customerInitials }}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"space-y-0.5\">\n                      <div class=\"text-foreground text-xs leading-tight font-semibold\">\n                        {{ order.customerName }}\n                      </div>\n                      <div class=\"text-muted-foreground flex items-center gap-1 font-mono text-xs tabular-nums\">\n                        <Phone class=\"text-muted-foreground/70 size-3\" />\n                        {{ order.customerPhone }}\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Order Number & Items Summary -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"text-foreground font-mono text-xs font-bold\"> #{{ order.orderNumber }} </span>\n                      <span class=\"text-muted-foreground text-xs tabular-nums\">\n                        (${{ order.orderTotal.toFixed(2) }})\n                      </span>\n                    </div>\n                    <div\n                      class=\"text-muted-foreground max-w-[170px] min-w-0 truncate text-xs\"\n                      :title=\"order.items.map((i) => `${i.quantity}x ${i.name}`).join(', ')\"\n                    >\n                      {{ order.items.length }} {{ order.items.length === 1 ? 'item' : 'items' }}:\n                      {{ order.items.map((i) => i.name).join(', ') }}\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Pickup Mode Badge -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <template v-if=\"order.pickupMode === 'curbside'\">\n                      <Badge\n                        wrap\n                        variant=\"outline\"\n                        class=\"border-success/30 bg-success/10 text-success gap-1 font-medium\"\n                      >\n                        <Car class=\"text-success size-3 shrink-0\" />\n                        <span>Curbside Spot #{{ order.spotNumber }}</span>\n                      </Badge>\n                      <div v-if=\"order.vehicleDetails\" class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                        <span class=\"max-w-[180px] truncate\">{{ order.vehicleDetails.makeModel }}</span>\n                        <span class=\"text-foreground font-mono font-medium\">· {{ order.vehicleDetails.plate }}</span>\n                      </div>\n                    </template>\n                    <template v-else>\n                      <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-info gap-1 font-medium\">\n                        <Store class=\"text-info size-3 shrink-0\" />\n                        <span>In-Store Desk</span>\n                      </Badge>\n                      <div class=\"text-muted-foreground text-xs\">\n                        {{ order.pickupDeskBay || 'Front Pickup Counter' }}\n                      </div>\n                    </template>\n                  </div>\n                </TableCell>\n\n                <!-- Customer Status -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <template v-if=\"order.status === 'arrived'\">\n                      <Badge wrap variant=\"warning\" class=\"gap-1.5 px-2 py-0.5 font-medium\">\n                        <span class=\"bg-warning size-1.5 rounded-full\" />\n                        <Clock class=\"size-3\" />\n                        <span class=\"tabular-nums\">Customer Arrived · Waiting {{ order.waitMinutes || 2 }}m</span>\n                      </Badge>\n                      <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                        <span>Check-in: {{ order.arrivedAt || '11:40 AM' }}</span>\n                        <span v-if=\"order.vehicleDetails?.hazardsFlashing\" class=\"text-warning font-medium\"\n                          >· Hazards On</span\n                        >\n                      </div>\n                    </template>\n\n                    <template v-else-if=\"order.status === 'en_route'\">\n                      <Badge wrap variant=\"info\" class=\"gap-1.5 px-2 py-0.5 font-medium\">\n                        <Navigation class=\"text-info size-3\" />\n                        <span class=\"tabular-nums\">En Route · {{ order.etaMinutes }} min ETA</span>\n                      </Badge>\n                      <div class=\"text-muted-foreground text-xs\">\n                        <span class=\"tabular-nums\">{{ order.distanceMiles }} miles away</span>\n                      </div>\n                    </template>\n\n                    <template v-else-if=\"order.status === 'ready_staging'\">\n                      <Badge wrap variant=\"secondary\" class=\"gap-1.5 px-2 py-0.5 font-medium\">\n                        <Package class=\"size-3\" />\n                        <span>Ready in Staging</span>\n                      </Badge>\n                      <div class=\"text-muted-foreground text-xs\">Staged at {{ order.readyAt }}</div>\n                    </template>\n\n                    <template v-else>\n                      <Badge wrap variant=\"success\" class=\"gap-1.5 px-2 py-0.5 font-medium\">\n                        <CheckCircle2 class=\"size-3\" />\n                        <span>Delivered</span>\n                      </Badge>\n                      <div class=\"text-muted-foreground text-xs\">Completed Handoff</div>\n                    </template>\n                  </div>\n                </TableCell>\n\n                <!-- Staging Location -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                      <Layers class=\"text-muted-foreground size-3.5\" />\n                      <span>{{ order.stagingLocation.zone }}</span>\n                      <span class=\"text-primary font-mono font-bold\">{{ order.stagingLocation.bin }}</span>\n                    </div>\n                    <div v-if=\"order.stagingLocation.lockerPin\" class=\"text-muted-foreground font-mono text-xs\">\n                      PIN Code: <span class=\"text-foreground font-bold\">{{ order.stagingLocation.lockerPin }}</span>\n                    </div>\n                    <div v-else class=\"text-muted-foreground text-xs capitalize\">\n                      Type: {{ order.stagingLocation.type }} staging\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Fulfillment Actions -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"flex items-center justify-end gap-1.5\">\n                    <!-- Primary Mark Delivered Action (For Arrived Orders) -->\n                    <Button\n                      v-if=\"order.status === 'arrived'\"\n                      size=\"sm\"\n                      class=\"bg-success hover:bg-success/90 bg-success dark:hover:bg-success/90 h-8 gap-1 px-2.5 text-xs font-medium text-white shadow-xs\"\n                      @click=\"handleMarkDelivered(order.id)\"\n                    >\n                      <Check class=\"size-3.5\" />\n                      <span>Mark Delivered</span>\n                    </Button>\n\n                    <!-- Notify Customer Action -->\n                    <Button\n                      v-else-if=\"order.status !== 'completed'\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      class=\"h-8 gap-1 px-2.5 text-xs shadow-xs\"\n                      @click=\"handleNotify(order)\"\n                    >\n                      <Bell class=\"text-muted-foreground size-3\" />\n                      <span>Notify</span>\n                    </Button>\n\n                    <Button v-else variant=\"outline\" size=\"sm\" disabled class=\"h-8 text-xs opacity-60\">\n                      <CheckCircle2 class=\"text-success size-3\" />\n                      <span>Fulfilled</span>\n                    </Button>\n\n                    <!-- Dropdown for Inspect & Details -->\n                    <DropdownMenu>\n                      <DropdownMenuTrigger as-child>\n                        <Button variant=\"ghost\" size=\"icon\" class=\"text-muted-foreground hover:text-foreground size-8\">\n                          <MoreHorizontal class=\"size-4\" />\n                          <span class=\"sr-only\">Actions</span>\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" class=\"w-48 text-xs\">\n                        <DropdownMenuLabel>Order #{{ order.orderNumber }}</DropdownMenuLabel>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem class=\"cursor-pointer gap-2\" @click=\"handleInspect(order)\">\n                          <Eye class=\"text-muted-foreground size-3.5\" />\n                          <span>Inspect Order Details</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem class=\"cursor-pointer gap-2\" @click=\"handleNotify(order)\">\n                          <MessageSquare class=\"text-muted-foreground size-3.5\" />\n                          <span>Send SMS / Push Alert</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem\n                          v-if=\"order.status !== 'completed'\"\n                          class=\"text-success cursor-pointer gap-2 font-medium\"\n                          @click=\"handleMarkDelivered(order.id)\"\n                        >\n                          <CheckCircle2 class=\"size-3.5\" />\n                          <span>Complete Handoff</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </div>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredOrders.length === 0\">\n                <TableCell colspan=\"6\" class=\"text-muted-foreground h-32 text-center text-xs\">\n                  No pickup orders match your search or filter criteria.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n      <CardFooter\n        class=\"border-border text-muted-foreground flex items-center justify-between border-t px-6 py-3 text-xs\"\n      >\n        <div>\n          Showing <span class=\"text-foreground font-medium tabular-nums\">{{ filteredOrders.length }}</span> of\n          <span class=\"text-foreground font-medium tabular-nums\">{{ orders.length }}</span> active pickup orders\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-success size-2 rounded-full\" />\n            <span>Curbside Bays (Spots 1-6)</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-info size-2 rounded-full\" />\n            <span>In-Store Pickup Desk</span>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n\n    <!-- Modal 1: Inspect Order Details Dialog -->\n    <OrderDetailDialog\n      v-model:open=\"inspectModalOpen\"\n      :selected-order=\"selectedOrder\"\n      @mark-delivered=\"handleMarkDelivered\"\n    />\n\n    <!-- Action Modals (Check-In, Notify, New Order) -->\n    <StorePickupModals\n      v-model:check-in-modal-open=\"checkInModalOpen\"\n      v-model:notify-modal-open=\"notifyModalOpen\"\n      v-model:new-order-modal-open=\"newOrderModalOpen\"\n      :orders=\"orders\"\n      :selected-order=\"selectedOrder\"\n      :store-name=\"props.storeName\"\n      @confirm-arrival=\"handleConfirmArrival\"\n      @send-notification=\"handleSendNotification\"\n      @create-order=\"handleCreateNewOrder\"\n    />\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StorePickupCurbside.vue"
    },
    {
      "path": "packages/registry-vue/blocks/store-pickup-curbside/OrderDetailDialog.vue",
      "content": "<script setup lang=\"ts\">\nimport { Car, Check, CheckCircle2, Layers } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\nimport type { PickupOrder } from './store-pickup-types'\n\ninterface Props {\n  open: boolean\n  selectedOrder: PickupOrder | null\n}\n\ndefineProps<Props>()\n\ndefineEmits<{\n  'update:open': [value: boolean]\n  'mark-delivered': [orderId: string]\n}>()\n</script>\n\n<template>\n  <Dialog :open=\"open\" @update:open=\"$emit('update:open', $event)\">\n    <DialogContent class=\"sm:max-w-lg\">\n      <DialogHeader v-if=\"selectedOrder\">\n        <div class=\"flex items-start justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <DialogTitle class=\"text-base font-bold\"> Order #{{ selectedOrder.orderNumber }} </DialogTitle>\n              <Badge\n                :variant=\"selectedOrder.pickupMode === 'curbside' ? 'success' : 'info'\"\n                class=\"text-xs font-medium whitespace-normal\"\n              >\n                {{\n                  selectedOrder.pickupMode === 'curbside'\n                    ? `Curbside Bay #${selectedOrder.spotNumber}`\n                    : 'In-Store Desk'\n                }}\n              </Badge>\n            </div>\n            <DialogDescription class=\"mt-1 text-xs\">\n              Placed at {{ selectedOrder.placedAt }} · Staged at {{ selectedOrder.readyAt }}\n            </DialogDescription>\n          </div>\n        </div>\n      </DialogHeader>\n\n      <div v-if=\"selectedOrder\" class=\"space-y-4 py-2 text-xs\">\n        <!-- Customer & Contact Strip -->\n        <div class=\"border-border bg-muted/30 flex items-center justify-between rounded-lg border p-3\">\n          <div class=\"flex items-center gap-2.5\">\n            <Avatar class=\"border-border size-9 border\">\n              <AvatarFallback class=\"text-xs font-bold\">{{ selectedOrder.customerInitials }}</AvatarFallback>\n            </Avatar>\n            <div>\n              <div class=\"text-foreground text-xs font-semibold\">{{ selectedOrder.customerName }}</div>\n              <div class=\"text-muted-foreground font-mono text-xs\">{{ selectedOrder.customerPhone }}</div>\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"text-muted-foreground text-xs\">Pickup Verification PIN</div>\n            <div class=\"text-primary font-mono text-sm font-bold tracking-widest\">\n              {{ selectedOrder.verificationCode }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Staging & Bay Location Details -->\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div class=\"border-border space-y-1 rounded-md border p-2.5\">\n            <div class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium\">\n              <Layers class=\"size-3.5\" />\n              <span>Staging Bin Location</span>\n            </div>\n            <div class=\"text-foreground text-xs font-bold\">\n              {{ selectedOrder.stagingLocation.zone }} ·\n              <span class=\"text-primary font-mono\">{{ selectedOrder.stagingLocation.bin }}</span>\n            </div>\n            <div class=\"text-muted-foreground text-xs capitalize\">\n              {{ selectedOrder.stagingLocation.type }} unit storage\n            </div>\n          </div>\n\n          <div class=\"border-border space-y-1 rounded-md border p-2.5\">\n            <div class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium\">\n              <Car class=\"size-3.5\" />\n              <span>Vehicle & Bay</span>\n            </div>\n            <template v-if=\"selectedOrder.pickupMode === 'curbside' && selectedOrder.vehicleDetails\">\n              <div class=\"text-foreground truncate text-xs font-bold\">\n                Spot #{{ selectedOrder.spotNumber }} · {{ selectedOrder.vehicleDetails.makeModel }}\n              </div>\n              <div class=\"text-muted-foreground font-mono text-xs\">Plate: {{ selectedOrder.vehicleDetails.plate }}</div>\n            </template>\n            <template v-else>\n              <div class=\"text-foreground text-xs font-bold\">\n                {{ selectedOrder.pickupDeskBay || 'Pickup Counter' }}\n              </div>\n              <div class=\"text-muted-foreground text-xs\">\n                Locker PIN: {{ selectedOrder.stagingLocation.lockerPin || 'N/A' }}\n              </div>\n            </template>\n          </div>\n        </div>\n\n        <!-- Staged Items Checklist -->\n        <div class=\"space-y-2\">\n          <div class=\"text-foreground flex items-center justify-between text-xs font-medium\">\n            <span>Order Items Checklist ({{ selectedOrder.items.length }} items)</span>\n            <span class=\"text-muted-foreground\">Total: ${{ selectedOrder.orderTotal.toFixed(2) }}</span>\n          </div>\n          <div class=\"border-border max-h-40 space-y-1.5 overflow-y-auto rounded-md border p-2\">\n            <div\n              v-for=\"item in selectedOrder.items\"\n              :key=\"item.id\"\n              class=\"bg-muted/40 flex items-center justify-between rounded p-2 text-xs\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n                <div>\n                  <div class=\"text-foreground font-medium\">{{ item.name }}</div>\n                  <div class=\"text-muted-foreground font-mono text-xs\">\n                    SKU: {{ item.sku }} · Qty: {{ item.quantity }}\n                  </div>\n                </div>\n              </div>\n              <div class=\"text-foreground font-mono text-xs font-medium\">\n                ${{ (item.price * item.quantity).toFixed(2) }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <DialogFooter class=\"gap-2 sm:gap-0\">\n        <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"$emit('update:open', false)\"> Close </Button>\n        <Button\n          v-if=\"selectedOrder?.status !== 'completed'\"\n          size=\"sm\"\n          class=\"bg-success hover:bg-success/90 gap-1.5 text-xs text-white\"\n          @click=\"selectedOrder && $emit('mark-delivered', selectedOrder.id)\"\n        >\n          <Check class=\"size-3.5\" />\n          <span>Mark Delivered & Close</span>\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/OrderDetailDialog.vue"
    },
    {
      "path": "packages/registry-vue/blocks/store-pickup-curbside/StorePickupModals.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Bell, Car, CheckCircle2, MessageSquare, Send } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport type { PickupMode, PickupOrder } from './store-pickup-types'\n\ninterface Props {\n  checkInModalOpen: boolean\n  notifyModalOpen: boolean\n  newOrderModalOpen: boolean\n  orders: PickupOrder[]\n  selectedOrder: PickupOrder | null\n  storeName: string\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:checkInModalOpen': [value: boolean]\n  'update:notifyModalOpen': [value: boolean]\n  'update:newOrderModalOpen': [value: boolean]\n  'confirm-arrival': [\n    payload: {\n      orderId: string\n      spot: string\n      vehicleModel: string\n      plate: string\n      hazards: boolean\n      notes: string\n    },\n  ]\n  'send-notification': [channel: 'sms' | 'push']\n  'create-order': [\n    payload: {\n      customerName: string\n      customerPhone: string\n      pickupMode: PickupMode\n      spotNumber: string\n      stagingAisle: string\n      stagingBin: string\n      itemSummary: string\n      orderTotal: string\n    },\n  ]\n}>()\n\n// Check-in state\nconst checkInOrderId = ref('order-3')\nconst checkInSpot = ref('4')\nconst checkInVehicleModel = ref('Silver Tesla Model 3')\nconst checkInPlate = ref('7XYZ892')\nconst checkInHazards = ref(true)\nconst checkInNotes = ref('Parked in bay 4, trunk unlocked for contactless placement.')\n\n// Notify state\nconst notifyChannel = ref<'sms' | 'push'>('sms')\nconst notifyMessageSent = ref(false)\n\n// New Order state\nconst newCustomerName = ref('')\nconst newCustomerPhone = ref('')\nconst newPickupMode = ref<PickupMode>('curbside')\nconst newSpotNumber = ref('3')\nconst newStagingAisle = ref('Aisle 01')\nconst newStagingBin = ref('Bin A-12')\nconst newItemSummary = ref('')\nconst newOrderTotal = ref('120.00')\n\nfunction handleCheckInSubmit() {\n  emit('confirm-arrival', {\n    orderId: checkInOrderId.value,\n    spot: checkInSpot.value,\n    vehicleModel: checkInVehicleModel.value,\n    plate: checkInPlate.value,\n    hazards: checkInHazards.value,\n    notes: checkInNotes.value,\n  })\n}\n\nfunction handleSendNotification() {\n  if (!props.selectedOrder) return\n  notifyMessageSent.value = true\n  setTimeout(() => {\n    emit('send-notification', notifyChannel.value)\n    notifyMessageSent.value = false\n  }, 1000)\n}\n\nfunction handleCreateOrder() {\n  if (!newCustomerName.value) return\n  emit('create-order', {\n    customerName: newCustomerName.value,\n    customerPhone: newCustomerPhone.value,\n    pickupMode: newPickupMode.value,\n    spotNumber: newSpotNumber.value,\n    stagingAisle: newStagingAisle.value,\n    stagingBin: newStagingBin.value,\n    itemSummary: newItemSummary.value,\n    orderTotal: newOrderTotal.value,\n  })\n  newCustomerName.value = ''\n  newCustomerPhone.value = ''\n  newItemSummary.value = ''\n}\n</script>\n\n<template>\n  <div>\n    <!-- Modal 1: Customer \"I'm Here\" Parking Spot Check-in Dialog -->\n    <Dialog :open=\"checkInModalOpen\" @update:open=\"$emit('update:checkInModalOpen', $event)\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader>\n          <div class=\"flex items-center gap-2\">\n            <div\n              class=\"border-warning/20 bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <Car class=\"size-4\" />\n            </div>\n            <div>\n              <DialogTitle class=\"text-base font-bold\">Customer Parking Arrival Check-In</DialogTitle>\n              <DialogDescription class=\"text-xs\">\n                Check in customer arriving at the curbside pickup bay or simulate customer mobile app check-in.\n              </DialogDescription>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <div class=\"space-y-4 py-2 text-xs\">\n          <!-- Select Order to Check In -->\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Select Customer Order</label>\n            <Select v-model=\"checkInOrderId\">\n              <SelectTrigger class=\"h-9 text-xs\">\n                <SelectValue placeholder=\"Select active order\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem v-for=\"o in orders.filter((x) => x.status !== 'completed')\" :key=\"o.id\" :value=\"o.id\">\n                  {{ o.customerName }} · #{{ o.orderNumber }} ({{ o.items.length }} items)\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <!-- Select Parking Spot -->\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Curbside Parking Bay</label>\n            <div class=\"grid grid-cols-6 gap-1.5\">\n              <button\n                v-for=\"spot in ['1', '2', '3', '4', '5', '6']\"\n                :key=\"spot\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'flex flex-col items-center justify-center rounded-md border py-2 text-xs font-semibold transition-colors duration-150',\n                    checkInSpot === spot\n                      ? 'border-success bg-success/10 text-success ring-success/30 text-success ring-2'\n                      : 'border-border bg-card text-muted-foreground hover:border-foreground/20 hover:text-foreground',\n                  )\n                \"\n                @click=\"checkInSpot = spot\"\n              >\n                <span>Bay</span>\n                <span class=\"text-sm font-bold\">#{{ spot }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- Vehicle Information -->\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Vehicle Make & Model</label>\n              <Input v-model=\"checkInVehicleModel\" placeholder=\"e.g. Silver Tesla Model 3\" class=\"h-8 text-xs\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">License Plate</label>\n              <Input v-model=\"checkInPlate\" placeholder=\"e.g. 7XYZ892\" class=\"h-8 font-mono text-xs uppercase\" />\n            </div>\n          </div>\n\n          <!-- Arrival Notes -->\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Arrival Instructions & Bay Notes</label>\n            <Input v-model=\"checkInNotes\" placeholder=\"e.g. Trunk unlocked, hazard lights on\" class=\"h-8 text-xs\" />\n          </div>\n\n          <!-- Hazard Lights Checkbox Simulation -->\n          <div class=\"border-border bg-muted/40 flex items-center gap-2 rounded-md border p-2.5\">\n            <input\n              id=\"hazards-checkbox\"\n              v-model=\"checkInHazards\"\n              type=\"checkbox\"\n              class=\"border-border text-primary focus:ring-primary size-4 rounded\"\n            />\n            <label for=\"hazards-checkbox\" class=\"text-foreground cursor-pointer text-xs\">\n              Vehicle hazard lights are actively flashing for runner identification\n            </label>\n          </div>\n        </div>\n\n        <DialogFooter class=\"gap-2 sm:gap-0\">\n          <DialogClose as-child>\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\">Cancel</Button>\n          </DialogClose>\n          <Button\n            size=\"sm\"\n            class=\"bg-success hover:bg-success/90 gap-1.5 text-xs text-white\"\n            @click=\"handleCheckInSubmit\"\n          >\n            <CheckCircle2 class=\"size-3.5\" />\n            <span>Confirm Arrival & Alert Runner</span>\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- Modal 2: Notify Customer Dialog -->\n    <Dialog :open=\"notifyModalOpen\" @update:open=\"$emit('update:notifyModalOpen', $event)\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader v-if=\"selectedOrder\">\n          <DialogTitle class=\"text-base font-bold\">Notify Customer</DialogTitle>\n          <DialogDescription class=\"text-xs\">\n            Send real-time pickup status alert to {{ selectedOrder.customerName }} ({{ selectedOrder.customerPhone }}).\n          </DialogDescription>\n        </DialogHeader>\n\n        <div v-if=\"selectedOrder\" class=\"space-y-4 py-2 text-xs\">\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Notification Channel</label>\n            <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'flex items-center justify-center gap-1.5 rounded-md border py-2 text-xs font-semibold transition-colors',\n                    notifyChannel === 'sms'\n                      ? 'border-primary bg-primary/10 text-primary'\n                      : 'border-border bg-card text-muted-foreground',\n                  )\n                \"\n                @click=\"notifyChannel = 'sms'\"\n              >\n                <MessageSquare class=\"size-3.5\" />\n                <span>SMS Text Message</span>\n              </button>\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'flex items-center justify-center gap-1.5 rounded-md border py-2 text-xs font-semibold transition-colors',\n                    notifyChannel === 'push'\n                      ? 'border-primary bg-primary/10 text-primary'\n                      : 'border-border bg-card text-muted-foreground',\n                  )\n                \"\n                @click=\"notifyChannel = 'push'\"\n              >\n                <Bell class=\"size-3.5\" />\n                <span>Mobile App Push</span>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"border-border bg-muted/40 space-y-1.5 rounded-md border p-3 text-xs\">\n            <div class=\"text-foreground flex items-center justify-between font-medium\">\n              <span>Message Preview</span>\n              <span class=\"text-muted-foreground font-mono\">160 chars</span>\n            </div>\n            <p class=\"text-muted-foreground text-xs leading-relaxed\">\n              \"Hi {{ selectedOrder.customerName }}, your Order #{{ selectedOrder.orderNumber }} is ready at\n              {{ storeName }}! Pull into Curbside Spot #{{ selectedOrder.spotNumber || '1-6' }} and tap 'I'm Here' for\n              runner delivery.\"\n            </p>\n          </div>\n        </div>\n\n        <DialogFooter class=\"gap-2 sm:gap-0\">\n          <DialogClose as-child>\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\">Cancel</Button>\n          </DialogClose>\n          <Button size=\"sm\" class=\"gap-1.5 text-xs\" :disabled=\"notifyMessageSent\" @click=\"handleSendNotification\">\n            <Send class=\"size-3.5\" />\n            <span>{{ notifyMessageSent ? 'Notification Sent!' : 'Send Alert' }}</span>\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- Modal 3: New Pickup Order Staging Dialog -->\n    <Dialog :open=\"newOrderModalOpen\" @update:open=\"$emit('update:newOrderModalOpen', $event)\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle class=\"text-base font-bold\">Stage New Pickup Order</DialogTitle>\n          <DialogDescription class=\"text-xs\">\n            Register an incoming online BOPIS order into retail staging shelves or lockers.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div class=\"space-y-3.5 py-2 text-xs\">\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Customer Name</label>\n              <Input v-model=\"newCustomerName\" placeholder=\"e.g. Alex Morgan\" class=\"h-8 text-xs\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Customer Phone</label>\n              <Input v-model=\"newCustomerPhone\" placeholder=\"e.g. (415) 555-0199\" class=\"h-8 font-mono text-xs\" />\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Pickup Mode</label>\n              <Select v-model=\"newPickupMode\">\n                <SelectTrigger class=\"h-8 text-xs\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"curbside\">Curbside Bay</SelectItem>\n                  <SelectItem value=\"in_store\">In-Store Desk</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Preferred Bay / Desk</label>\n              <Select v-model=\"newSpotNumber\">\n                <SelectTrigger class=\"h-8 text-xs\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"1\">Bay #1</SelectItem>\n                  <SelectItem value=\"2\">Bay #2</SelectItem>\n                  <SelectItem value=\"3\">Bay #3</SelectItem>\n                  <SelectItem value=\"4\">Bay #4</SelectItem>\n                  <SelectItem value=\"5\">Bay #5</SelectItem>\n                  <SelectItem value=\"6\">Bay #6</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Staging Aisle</label>\n              <Input v-model=\"newStagingAisle\" placeholder=\"e.g. Aisle 01\" class=\"h-8 text-xs\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground font-medium\">Staging Bin</label>\n              <Input v-model=\"newStagingBin\" placeholder=\"e.g. Bin B-05\" class=\"h-8 text-xs\" />\n            </div>\n          </div>\n\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Items Summary</label>\n            <Input\n              v-model=\"newItemSummary\"\n              placeholder=\"e.g. Noise Cancelling Earbuds, Travel Case\"\n              class=\"h-8 text-xs\"\n            />\n          </div>\n\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground font-medium\">Order Total ($)</label>\n            <Input v-model=\"newOrderTotal\" placeholder=\"120.00\" class=\"h-8 font-mono text-xs\" />\n          </div>\n        </div>\n\n        <DialogFooter class=\"gap-2 sm:gap-0\">\n          <DialogClose as-child>\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\">Cancel</Button>\n          </DialogClose>\n          <Button size=\"sm\" class=\"text-xs\" :disabled=\"!newCustomerName\" @click=\"handleCreateOrder\">\n            <span>Stage & Assign Bin</span>\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StorePickupModals.vue"
    },
    {
      "path": "packages/registry-vue/blocks/store-pickup-curbside/store-pickup-types.ts",
      "content": "import type { HTMLAttributes } from 'vue'\n\nexport type PickupMode = 'curbside' | 'in_store'\nexport type OrderStatus = 'arrived' | 'en_route' | 'ready_staging' | 'completed'\n\nexport interface OrderItem {\n  id: string\n  name: string\n  sku: string\n  quantity: number\n  price: number\n  staged: boolean\n  category: string\n}\n\nexport interface PickupOrder {\n  id: string\n  orderNumber: string\n  customerName: string\n  customerPhone: string\n  customerInitials: string\n  avatar?: string\n  pickupMode: PickupMode\n  spotNumber?: number\n  vehicleDetails?: {\n    makeModel: string\n    plate: string\n    hazardsFlashing?: boolean\n  }\n  pickupDeskBay?: string\n  status: OrderStatus\n  statusLabel: string\n  etaMinutes?: number\n  distanceMiles?: number\n  waitMinutes?: number\n  stagingLocation: {\n    zone: string\n    bin: string\n    lockerPin?: string\n    type: 'shelf' | 'locker' | 'bulky'\n  }\n  items: OrderItem[]\n  orderTotal: number\n  placedAt: string\n  readyAt: string\n  arrivedAt?: string\n  verificationCode: string\n  assignedRunner?: string\n}\n\nexport interface StorePickupCurbsideProps {\n  storeName?: string\n  storeCode?: string\n  initialModeFilter?: 'all' | 'curbside' | 'in_store'\n  class?: HTMLAttributes['class']\n}\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/store-pickup-types.ts"
    },
    {
      "path": "packages/registry-vue/blocks/store-pickup-curbside/store-pickup-data.ts",
      "content": "import type { PickupOrder } from './store-pickup-types'\n\nexport const INITIAL_ORDERS: PickupOrder[] = [\n  {\n    id: 'order-1',\n    orderNumber: 'BOPIS-84920',\n    customerName: 'Elena Rostova',\n    customerPhone: '(415) 555-0192',\n    customerInitials: 'ER',\n    pickupMode: 'curbside',\n    spotNumber: 4,\n    vehicleDetails: {\n      makeModel: 'Silver Tesla Model 3',\n      plate: '7XYZ892',\n      hazardsFlashing: true,\n    },\n    status: 'arrived',\n    statusLabel: 'Customer Arrived · Waiting 2m',\n    waitMinutes: 2,\n    stagingLocation: {\n      zone: 'Aisle 02',\n      bin: 'Bin B-14',\n      type: 'shelf',\n    },\n    items: [\n      {\n        id: 'item-1',\n        name: 'Studio Pro Wireless Headphones',\n        sku: 'AUD-902-BLK',\n        quantity: 1,\n        price: 249.0,\n        staged: true,\n        category: 'Audio',\n      },\n      {\n        id: 'item-2',\n        name: 'Carbon Runner Wind Jacket',\n        sku: 'APP-410-MED',\n        quantity: 1,\n        price: 100.0,\n        staged: true,\n        category: 'Apparel',\n      },\n    ],\n    orderTotal: 349.0,\n    placedAt: '11:20 AM',\n    readyAt: '11:35 AM',\n    arrivedAt: '11:42 AM',\n    verificationCode: '4920',\n    assignedRunner: 'Jordan Miller',\n  },\n  {\n    id: 'order-2',\n    orderNumber: 'BOPIS-84919',\n    customerName: 'David Chen',\n    customerPhone: '(415) 555-0841',\n    customerInitials: 'DC',\n    pickupMode: 'curbside',\n    spotNumber: 2,\n    vehicleDetails: {\n      makeModel: 'Midnight Blue Rivian R1T',\n      plate: '8ABC104',\n      hazardsFlashing: true,\n    },\n    status: 'arrived',\n    statusLabel: 'Customer Arrived · Waiting 4m',\n    waitMinutes: 4,\n    stagingLocation: {\n      zone: 'Aisle 01',\n      bin: 'Bin A-08',\n      type: 'bulky',\n    },\n    items: [\n      {\n        id: 'item-3',\n        name: '4K Ultra HD Smart Monitor 27\"',\n        sku: 'DIS-270-4K',\n        quantity: 1,\n        price: 380.0,\n        staged: true,\n        category: 'Displays',\n      },\n      {\n        id: 'item-4',\n        name: 'Ergonomic Desk Stand',\n        sku: 'ACC-110-SLV',\n        quantity: 1,\n        price: 110.0,\n        staged: true,\n        category: 'Accessories',\n      },\n      {\n        id: 'item-5',\n        name: '100W USB-C Thunderbolt Dock',\n        sku: 'DOK-090-BLK',\n        quantity: 1,\n        price: 90.0,\n        staged: true,\n        category: 'Power',\n      },\n    ],\n    orderTotal: 580.0,\n    placedAt: '10:45 AM',\n    readyAt: '11:10 AM',\n    arrivedAt: '11:40 AM',\n    verificationCode: '8419',\n    assignedRunner: 'Marcus Lee',\n  },\n  {\n    id: 'order-3',\n    orderNumber: 'BOPIS-84918',\n    customerName: 'Marcus Vance',\n    customerPhone: '(415) 555-0329',\n    customerInitials: 'MV',\n    pickupMode: 'in_store',\n    pickupDeskBay: 'Pickup Desk Bay 01',\n    status: 'en_route',\n    statusLabel: 'En Route · 6 min ETA',\n    etaMinutes: 6,\n    distanceMiles: 1.4,\n    stagingLocation: {\n      zone: 'Locker #12',\n      bin: 'Bin L-12',\n      lockerPin: '8491',\n      type: 'locker',\n    },\n    items: [\n      {\n        id: 'item-6',\n        name: 'Pro Max Mirrorless Camera Kit',\n        sku: 'CAM-800-PRO',\n        quantity: 1,\n        price: 1299.0,\n        staged: true,\n        category: 'Photography',\n      },\n    ],\n    orderTotal: 1299.0,\n    placedAt: '11:05 AM',\n    readyAt: '11:28 AM',\n    verificationCode: '9182',\n    assignedRunner: 'Staging Auto-Lock',\n  },\n  {\n    id: 'order-4',\n    orderNumber: 'BOPIS-84917',\n    customerName: 'Aisha Patel',\n    customerPhone: '(415) 555-0782',\n    customerInitials: 'AP',\n    pickupMode: 'in_store',\n    pickupDeskBay: 'Pickup Desk Bay 03',\n    status: 'ready_staging',\n    statusLabel: 'Ready in Staging Locker #04',\n    stagingLocation: {\n      zone: 'Aisle 03',\n      bin: 'Bin C-02',\n      lockerPin: '3719',\n      type: 'locker',\n    },\n    items: [\n      {\n        id: 'item-7',\n        name: 'Organic Single-Origin Espresso Blend',\n        sku: 'COF-012-ESP',\n        quantity: 2,\n        price: 38.0,\n        staged: true,\n        category: 'Beverage',\n      },\n      {\n        id: 'item-8',\n        name: 'Precision Gooseneck Pour-Over Kettle',\n        sku: 'KET-044-SS',\n        quantity: 1,\n        price: 74.5,\n        staged: true,\n        category: 'Kitchen',\n      },\n      {\n        id: 'item-9',\n        name: 'Digital Barista Gram Scale',\n        sku: 'SCL-019-DIG',\n        quantity: 1,\n        price: 30.0,\n        staged: true,\n        category: 'Kitchen',\n      },\n    ],\n    orderTotal: 142.5,\n    placedAt: '10:15 AM',\n    readyAt: '10:50 AM',\n    verificationCode: '1742',\n    assignedRunner: 'Desk Associate',\n  },\n  {\n    id: 'order-5',\n    orderNumber: 'BOPIS-84916',\n    customerName: 'Sarah Jenkins',\n    customerPhone: '(415) 555-0453',\n    customerInitials: 'SJ',\n    pickupMode: 'curbside',\n    spotNumber: 1,\n    vehicleDetails: {\n      makeModel: 'White Toyota RAV4',\n      plate: '6MNO451',\n      hazardsFlashing: false,\n    },\n    status: 'en_route',\n    statusLabel: 'En Route · 12 min ETA',\n    etaMinutes: 12,\n    distanceMiles: 3.8,\n    stagingLocation: {\n      zone: 'Aisle 02',\n      bin: 'Bin B-03',\n      type: 'shelf',\n    },\n    items: [\n      {\n        id: 'item-10',\n        name: 'Ultra Hydration 20L Trail Backpack',\n        sku: 'OUT-220-BLU',\n        quantity: 1,\n        price: 130.0,\n        staged: true,\n        category: 'Outdoors',\n      },\n      {\n        id: 'item-11',\n        name: 'Carbon Composite Trekking Poles (Pair)',\n        sku: 'OUT-771-CAR',\n        quantity: 1,\n        price: 80.0,\n        staged: true,\n        category: 'Outdoors',\n      },\n    ],\n    orderTotal: 210.0,\n    placedAt: '11:15 AM',\n    readyAt: '11:38 AM',\n    verificationCode: '9160',\n    assignedRunner: 'Unassigned',\n  },\n]\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/store-pickup-data.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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/dialog.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Buy Online Pick Up in Store (BOPIS) & curbside pickup coordination board with customer arrival parking check-in, real-time staging bin tracking, runner fulfillment dispatch, and SLA monitoring.",
  "categories": [
    "commerce",
    "app",
    "ecommerce",
    "logistics"
  ]
}