{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "asset-tracking-map",
  "title": "Asset Tracking Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/asset-tracking-map/AssetTrackingMap.tsx",
      "content": "'use client'\n\nimport { useState, useRef } from 'react'\nimport { Map, MapMarker, type MapRef } from '@/components/ui/map'\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nexport interface ContainerAsset {\n  id: string\n  containerNo: string\n  type: 'Reefer' | 'Dry Cargo' | 'Hazardous'\n  location: string\n  coords: [number, number]\n  temp?: string\n  humidity?: string\n  battery: string\n  geofence: 'Inside Zone' | 'In Transit' | 'Exited Perimeter'\n  status: 'Nominal' | 'Alert' | 'Secured'\n}\n\nexport interface AssetTrackingMapProps {\n  accessToken?: string\n}\n\nexport function AssetTrackingMap({ accessToken }: AssetTrackingMapProps) {\n  const mapRef = useRef<MapRef | null>(null)\n\n  const assets: ContainerAsset[] = [\n    {\n      id: 'c-1',\n      containerNo: 'MSKU-948102',\n      type: 'Reefer',\n      location: 'Port of Long Beach, Pier G',\n      coords: [-118.216, 33.754],\n      temp: '-18.4°C',\n      humidity: '84%',\n      battery: '92%',\n      geofence: 'Inside Zone',\n      status: 'Nominal',\n    },\n    {\n      id: 'c-2',\n      containerNo: 'CMAU-310892',\n      type: 'Dry Cargo',\n      location: 'Barstow Rail Yard, Track 4',\n      coords: [-117.022, 34.898],\n      battery: '78%',\n      geofence: 'In Transit',\n      status: 'Nominal',\n    },\n    {\n      id: 'c-3',\n      containerNo: 'HLXU-772901',\n      type: 'Reefer',\n      location: 'Inland Empire Logistics Depot',\n      coords: [-117.585, 34.062],\n      temp: '+4.2°C',\n      humidity: '62%',\n      battery: '64%',\n      geofence: 'Inside Zone',\n      status: 'Alert',\n    },\n    {\n      id: 'c-4',\n      containerNo: 'OOLU-550183',\n      type: 'Hazardous',\n      location: 'Pacific Intermodal Terminal',\n      coords: [-118.243, 33.974],\n      battery: '95%',\n      geofence: 'Inside Zone',\n      status: 'Secured',\n    },\n  ]\n\n  const [activeAsset, setActiveAsset] = useState<ContainerAsset>(assets[0])\n\n  const selectAsset = (a: ContainerAsset) => {\n    setActiveAsset(a)\n    mapRef.current?.flyTo({ center: a.coords, zoom: 11.5 })\n  }\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-[1fr_320px]\">\n      <div className=\"border-border bg-card relative h-[480px] overflow-hidden rounded-xl border\">\n        <Map\n          ref={mapRef}\n          accessToken={accessToken}\n          variant=\"light\"\n          center={activeAsset.coords}\n          zoom={9.2}\n          className=\"h-full w-full\"\n        >\n          {assets.map((a) => (\n            <MapMarker key={a.id} lngLat={a.coords} anchor=\"bottom\" onClick={() => selectAsset(a)}>\n              <div className=\"group relative flex cursor-pointer flex-col items-center\">\n                <div\n                  className={`flex size-7 items-center justify-center rounded-md font-mono text-xs font-bold shadow-md ring-2 ${\n                    a.status === 'Alert'\n                      ? 'bg-warning text-white ring-amber-400'\n                      : 'bg-primary text-primary-foreground ring-primary/25'\n                  }`}\n                >\n                  📦\n                </div>\n                <span className=\"border-border bg-background/90 mt-1 rounded border px-1 py-0.5 font-mono text-xs font-bold shadow-xs\">\n                  {a.containerNo.split('-')[1]}\n                </span>\n              </div>\n            </MapMarker>\n          ))}\n        </Map>\n      </div>\n\n      {/* Asset Telemetry & Sensor Card */}\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <Badge variant=\"outline\" className=\"font-mono text-xs\">\n              {activeAsset.type}\n            </Badge>\n            <Badge\n              className={\n                activeAsset.status === 'Alert'\n                  ? 'border-warning/20 bg-warning/10 text-warning'\n                  : 'border-success/20 bg-success/10 text-success'\n              }\n            >\n              {activeAsset.status}\n            </Badge>\n          </div>\n          <CardTitle className=\"mt-2 font-mono text-lg\">{activeAsset.containerNo}</CardTitle>\n          <CardDescription className=\"text-xs\">{activeAsset.location}</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"border-border bg-muted/40 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs\">\n            {activeAsset.temp && (\n              <div>\n                <div className=\"text-muted-foreground text-xs uppercase\">Cold Chain Temp</div>\n                <div\n                  className={`text-sm font-bold ${activeAsset.status === 'Alert' ? 'text-warning' : 'text-foreground'}`}\n                >\n                  {activeAsset.temp}\n                </div>\n              </div>\n            )}\n            {activeAsset.humidity && (\n              <div>\n                <div className=\"text-muted-foreground text-xs uppercase\">Humidity</div>\n                <div className=\"text-foreground text-sm font-bold\">{activeAsset.humidity}</div>\n              </div>\n            )}\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">IoT Battery</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeAsset.battery}</div>\n            </div>\n            <div>\n              <div className=\"text-muted-foreground text-xs uppercase\">Geofence</div>\n              <div className=\"text-foreground text-sm font-bold\">{activeAsset.geofence}</div>\n            </div>\n          </div>\n\n          <div className=\"border-border space-y-1 border-t pt-3\">\n            <div className=\"text-muted-foreground mb-1 font-mono text-xs tracking-wider uppercase\">\n              Tracked Cargo Units\n            </div>\n            {assets.map((a) => (\n              <button\n                key={a.id}\n                type=\"button\"\n                className={`flex w-full items-center justify-between rounded-md px-2 py-1 text-xs transition-colors ${\n                  activeAsset.id === a.id\n                    ? 'bg-accent text-accent-foreground font-semibold'\n                    : 'hover:bg-muted text-muted-foreground'\n                }`}\n                onClick={() => selectAsset(a)}\n              >\n                <span className=\"font-mono\">{a.containerNo}</span>\n                <span className={`font-mono text-xs ${a.status === 'Alert' ? 'text-warning font-bold' : 'opacity-70'}`}>\n                  {a.type}\n                </span>\n              </button>\n            ))}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"w-full font-mono text-xs\"\n            onClick={() => selectAsset(activeAsset)}\n          >\n            Center on Container\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/AssetTrackingMap.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Intermodal cargo container tracking with cold-chain sensor status, geofence perimeter rings, and battery levels.",
  "categories": [
    "logistics",
    "supply-chain",
    "map"
  ]
}