{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "triage-queue-dashboard",
  "title": "Triage Queue Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/triage-queue-dashboard/triage-queue-dashboard.component.ts",
      "content": "// Emergency Department (ED) triage queue and room allocation board: live unit header,\n// 4 clickable ESI overview cards with target wait thresholds, searchable patient queue\n// table with vitals snapshot, assigned room, attending care team, and quick clinical\n// actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n  Bed,\n  Clock,\n  DoorOpen,\n  HeartPulse,\n  LucideAngularModule,\n  MoreHorizontal,\n  Plus,\n  RefreshCw,\n  Search,\n  Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n  UiDropdownMenuComponent,\n  UiDropdownMenuContentComponent,\n  UiDropdownMenuItemComponent,\n  UiDropdownMenuLabelComponent,\n  UiDropdownMenuSeparatorComponent,\n  UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n  UiSelectComponent,\n  UiSelectContentComponent,\n  UiSelectItemComponent,\n  UiSelectTriggerComponent,\n  UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTableBodyComponent,\n  UiTableCellComponent,\n  UiTableComponent,\n  UiTableHeadComponent,\n  UiTableHeaderComponent,\n  UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type EsiLevel = 'esi-1' | 'esi-2' | 'esi-3' | 'esi-4'\nexport type TriageRoomType = 'trauma' | 'acute' | 'fast_track' | 'waiting'\nexport type TriageSortBy = 'wait-desc' | 'wait-asc' | 'acuity'\n\nexport interface PatientVitals {\n  bp: string\n  hr: number\n  spo2: number\n  temp: string\n  respRate: number\n}\n\nexport interface Caregiver {\n  name: string\n  role: 'RN' | 'MD' | 'PA' | 'NP'\n  initials: string\n  avatar?: string\n}\n\nexport interface TriagePatient {\n  id: string\n  mrn: string\n  name: string\n  age: number\n  gender: 'M' | 'F' | 'Other'\n  acuity: EsiLevel\n  acuityCode: string\n  acuityLabel: string\n  chiefComplaint: string\n  symptoms: string\n  waitTime: string\n  waitMinutes: number\n  vitals: PatientVitals\n  assignedRoom: string\n  roomType: TriageRoomType\n  primaryNurse: Caregiver\n  attendingPhysician: Caregiver\n  clinicalStatus: string\n}\n\nexport interface AcuitySummaryCard {\n  level: EsiLevel\n  title: string\n  subtitle: string\n  activeCount: number\n  targetWait: string\n  targetWindow: string\n  badgeVariantClass: string\n  indicatorDot?: string\n  pulse: boolean\n  description: string\n}\n\nconst acuityCards: AcuitySummaryCard[] = [\n  {\n    level: 'esi-1',\n    title: 'ESI 1 · Resuscitation',\n    subtitle: 'Immediate Life Threat',\n    activeCount: 1,\n    targetWait: 'Immediate',\n    targetWindow: '0 min wait',\n    badgeVariantClass: 'border-destructive/30 bg-destructive/10 text-destructive',\n    indicatorDot: 'bg-destructive',\n    pulse: true,\n    description: 'Hemodynamic instability, active airway compromise',\n  },\n  {\n    level: 'esi-2',\n    title: 'ESI 2 · Emergent',\n    subtitle: 'High Risk / Severe Pain',\n    activeCount: 3,\n    targetWait: '< 15m wait',\n    targetWindow: 'Max 15 min',\n    badgeVariantClass: 'border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-400',\n    indicatorDot: 'bg-orange-500',\n    pulse: false,\n    description: 'Confused, lethargic, severe respiratory distress',\n  },\n  {\n    level: 'esi-3',\n    title: 'ESI 3 · Urgent',\n    subtitle: 'Multiple Resources Needed',\n    activeCount: 8,\n    targetWait: '< 30m wait',\n    targetWindow: 'Max 30 min',\n    badgeVariantClass: 'border-warning/30 bg-warning/10 text-warning',\n    indicatorDot: 'bg-warning',\n    pulse: false,\n    description: 'Stable vitals, 2+ diagnostic or lab orders needed',\n  },\n  {\n    level: 'esi-4',\n    title: 'ESI 4/5 · Non-Urgent',\n    subtitle: 'Low Resource / Fast Track',\n    activeCount: 6,\n    targetWait: '< 60m wait',\n    targetWindow: 'Max 60 min',\n    badgeVariantClass: 'border-success/30 bg-success/10 text-success',\n    indicatorDot: 'bg-success',\n    pulse: false,\n    description: 'Simple lacerations, routine medication re-eval',\n  },\n]\n\nconst defaultPatients: TriagePatient[] = [\n  {\n    id: 'pt-1',\n    mrn: 'MRN-94021',\n    name: 'James Wilson',\n    age: 62,\n    gender: 'M',\n    acuity: 'esi-1',\n    acuityCode: 'ESI 1',\n    acuityLabel: 'ESI 1 - Resuscitation',\n    chiefComplaint: 'Severe Crushing Chest Pain',\n    symptoms: 'Diaphoresis, radiating left jaw pain, dyspnea. STAT STEMI protocol initiated.',\n    waitTime: '2 min',\n    waitMinutes: 2,\n    vitals: { bp: '88/54', hr: 124, spo2: 91, temp: '98.4°F', respRate: 28 },\n    assignedRoom: 'Trauma Bay 2',\n    roomType: 'trauma',\n    primaryNurse: {\n      name: 'Sarah Jenkins, RN',\n      role: 'RN',\n      initials: 'SJ',\n      avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Marcus Chen, MD',\n      role: 'MD',\n      initials: 'MC',\n      avatar: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'Cath Lab Alert · In Bay',\n  },\n  {\n    id: 'pt-2',\n    mrn: 'MRN-88319',\n    name: 'Maria Garcia',\n    age: 34,\n    gender: 'F',\n    acuity: 'esi-2',\n    acuityCode: 'ESI 2',\n    acuityLabel: 'ESI 2 - Emergent',\n    chiefComplaint: 'Compound Tibia Fracture',\n    symptoms: 'Post-motorcycle collision, visible bone deformity, uncontrolled bleeding controlled by tourniquet.',\n    waitTime: '9 min',\n    waitMinutes: 9,\n    vitals: { bp: '138/86', hr: 106, spo2: 97, temp: '99.1°F', respRate: 22 },\n    assignedRoom: 'Trauma Bay 4',\n    roomType: 'trauma',\n    primaryNurse: {\n      name: 'Kevin Vance, RN',\n      role: 'RN',\n      initials: 'KV',\n      avatar: 'https://images.unsplash.com/photo-1537368910025-700350fe46c7?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Lisa Thorne, MD',\n      role: 'MD',\n      initials: 'LT',\n      avatar: 'https://images.unsplash.com/photo-1594824813637-e54e44e26210?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'Ortho Paged · IV Analgesia',\n  },\n  {\n    id: 'pt-3',\n    mrn: 'MRN-72915',\n    name: 'Noah Miller',\n    age: 8,\n    gender: 'M',\n    acuity: 'esi-2',\n    acuityCode: 'ESI 2',\n    acuityLabel: 'ESI 2 - Emergent',\n    chiefComplaint: 'Acute Asthma Exacerbation',\n    symptoms: 'Inspiratory and expiratory stridor, intercostal retractions, refractory to home albuterol.',\n    waitTime: '14 min',\n    waitMinutes: 14,\n    vitals: { bp: '104/68', hr: 132, spo2: 92, temp: '99.8°F', respRate: 34 },\n    assignedRoom: 'Bed 06 (Peds Acute)',\n    roomType: 'acute',\n    primaryNurse: {\n      name: 'Angela Ray, RN',\n      role: 'RN',\n      initials: 'AR',\n      avatar: 'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Marcus Chen, MD',\n      role: 'MD',\n      initials: 'MC',\n      avatar: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'Duoneb #2 · Continuous O2',\n  },\n  {\n    id: 'pt-4',\n    mrn: 'MRN-51829',\n    name: 'Sarah Lee',\n    age: 45,\n    gender: 'F',\n    acuity: 'esi-3',\n    acuityCode: 'ESI 3',\n    acuityLabel: 'ESI 3 - Urgent',\n    chiefComplaint: 'Right Lower Quadrant Abdominal Pain',\n    symptoms: 'Severe pain x 14h, focal McBurney point tenderness, nausea, low-grade fever.',\n    waitTime: '28 min',\n    waitMinutes: 28,\n    vitals: { bp: '126/82', hr: 92, spo2: 98, temp: '101.4°F', respRate: 18 },\n    assignedRoom: 'Bed 14',\n    roomType: 'acute',\n    primaryNurse: {\n      name: 'David Park, RN',\n      role: 'RN',\n      initials: 'DP',\n      avatar: 'https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Sophia Adams, MD',\n      role: 'MD',\n      initials: 'SA',\n      avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'CT Scan Queued · NPO',\n  },\n  {\n    id: 'pt-5',\n    mrn: 'MRN-63910',\n    name: 'Robert Chen',\n    age: 58,\n    gender: 'M',\n    acuity: 'esi-3',\n    acuityCode: 'ESI 3',\n    acuityLabel: 'ESI 3 - Urgent',\n    chiefComplaint: 'Suspected Renal Colic & Flank Pain',\n    symptoms: 'Sudden onset severe right flank pain radiating to groin, gross hematuria, pain score 8/10.',\n    waitTime: '42 min',\n    waitMinutes: 42,\n    vitals: { bp: '146/94', hr: 88, spo2: 99, temp: '98.4°F', respRate: 16 },\n    assignedRoom: 'Bed 18',\n    roomType: 'acute',\n    primaryNurse: {\n      name: 'Rachel Torres, RN',\n      role: 'RN',\n      initials: 'RT',\n      avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Sophia Adams, MD',\n      role: 'MD',\n      initials: 'SA',\n      avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'Ultrasound Ordered · IV Fluids',\n  },\n  {\n    id: 'pt-6',\n    mrn: 'MRN-90423',\n    name: 'Marcus Vance',\n    age: 22,\n    gender: 'M',\n    acuity: 'esi-4',\n    acuityCode: 'ESI 4',\n    acuityLabel: 'ESI 4 - Non-Urgent',\n    chiefComplaint: 'Forearm Deep Glass Laceration',\n    symptoms: '4cm clean linear laceration, hemostasis achieved, neurovascular sensation intact distally.',\n    waitTime: '54 min',\n    waitMinutes: 54,\n    vitals: { bp: '120/78', hr: 74, spo2: 100, temp: '98.6°F', respRate: 14 },\n    assignedRoom: 'Fast Track 02',\n    roomType: 'fast_track',\n    primaryNurse: {\n      name: 'Kevin Vance, RN',\n      role: 'RN',\n      initials: 'KV',\n      avatar: 'https://images.unsplash.com/photo-1537368910025-700350fe46c7?w=120&auto=format&fit=crop&q=80',\n    },\n    attendingPhysician: {\n      name: 'Dr. Emily Watson, MD',\n      role: 'MD',\n      initials: 'EW',\n      avatar: 'https://images.unsplash.com/photo-1594824813637-e54e44e26210?w=120&auto=format&fit=crop&q=80',\n    },\n    clinicalStatus: 'Wound Irrigated · Suture Tray Ready',\n  },\n]\n\nconst acuityOrder: Record<EsiLevel, number> = { 'esi-1': 1, 'esi-2': 2, 'esi-3': 3, 'esi-4': 4 }\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-triage-queue-dashboard, [ui-triage-queue-dashboard]',\n  standalone: true,\n  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiAvatarImageComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiDropdownMenuComponent,\n    UiDropdownMenuContentComponent,\n    UiDropdownMenuItemComponent,\n    UiDropdownMenuLabelComponent,\n    UiDropdownMenuSeparatorComponent,\n    UiDropdownMenuTriggerComponent,\n    UiInputComponent,\n    UiSelectComponent,\n    UiSelectContentComponent,\n    UiSelectItemComponent,\n    UiSelectTriggerComponent,\n    UiSelectValueComponent,\n    UiSeparatorComponent,\n    UiTableBodyComponent,\n    UiTableCellComponent,\n    UiTableComponent,\n    UiTableHeadComponent,\n    UiTableHeaderComponent,\n    UiTableRowComponent,\n  ],\n  template: `\n    <div data-slot=\"triage-queue-dashboard\" [class]=\"rootClass\">\n      <!-- Live ED Header -->\n      <header class=\"bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6\">\n        <div class=\"flex flex-col gap-5 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.5\">\n              <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n                <lucide-icon [img]=\"HeartPulse\" class=\"size-5\" />\n              </div>\n              <div>\n                <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                  Emergency Department Triage Queue\n                </h1>\n                <p class=\"text-muted-foreground text-xs font-medium sm:text-sm\">{{ facilityName }}</p>\n              </div>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 pt-1 text-xs\">\n              <span ui-badge variant=\"outline\" class=\"border-border bg-muted/50 text-foreground gap-1.5 font-medium\">\n                <lucide-icon [img]=\"Bed\" class=\"text-primary size-3.5\" />\n                {{ unitName }}\n              </span>\n\n              <span ui-badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5 font-medium\">\n                <span class=\"bg-success size-1.5 animate-pulse rounded-full\"></span>\n                18 In Unit · 4 Awaiting Triage\n              </span>\n\n              <span class=\"text-muted-foreground hidden items-center gap-1 sm:inline-flex\">\n                <lucide-icon [img]=\"Clock\" class=\"size-3\" />\n                Live Sync · Updated seconds ago\n              </span>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <button ui-button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n              <lucide-icon [img]=\"RefreshCw\" class=\"text-muted-foreground size-3.5\" />\n              Refresh Queue\n            </button>\n\n            <button ui-button size=\"sm\" class=\"gap-1.5 text-xs font-semibold shadow-xs\">\n              <lucide-icon [img]=\"Plus\" class=\"size-4\" />\n              Admit New Patient\n            </button>\n          </div>\n        </div>\n      </header>\n\n      <!-- 4 Acuity Overview Cards (ESI 1 to ESI 4/5) -->\n      <section aria-label=\"Acuity Overview Cards\" class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        @for (card of acuityCards; track card.level) {\n          <div ui-card [class]=\"acuityCardClass(card)\" (click)=\"handleAcuityCardClick(card.level)\">\n            <div ui-card-content class=\"p-4 sm:p-5\">\n              <div class=\"flex items-start justify-between gap-2\">\n                <div class=\"space-y-1\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <span [class]=\"acuityDotClass(card)\"></span>\n                    <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                      {{ card.subtitle }}\n                    </span>\n                  </div>\n                  <h2 class=\"text-foreground text-sm font-semibold sm:text-base\">{{ card.title }}</h2>\n                </div>\n\n                <span\n                  ui-badge\n                  variant=\"outline\"\n                  [class]=\"'gap-1 px-2 py-0.5 text-xs font-semibold ' + card.badgeVariantClass\"\n                >\n                  @if (card.pulse) {\n                    <span class=\"bg-destructive size-1.5 animate-pulse rounded-full\"></span>\n                  }\n                  {{ card.targetWait }}\n                </span>\n              </div>\n\n              <div class=\"mt-4 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <div class=\"flex items-baseline gap-1.5\">\n                  <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n                    {{ card.activeCount }}\n                  </span>\n                  <span class=\"text-muted-foreground text-xs font-medium\">active in queue</span>\n                </div>\n\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{{ card.targetWindow }}</span>\n              </div>\n\n              <p class=\"text-muted-foreground mt-2 text-xs leading-relaxed\">{{ card.description }}</p>\n            </div>\n          </div>\n        }\n      </section>\n\n      <!-- Patient Queue Table Card -->\n      <div ui-card class=\"border-border shadow-xs\">\n        <div ui-card-header class=\"border-border border-b p-4 sm:p-5\">\n          <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n            <div>\n              <div class=\"flex items-center gap-2\">\n                <h3 ui-card-title class=\"text-foreground text-base font-semibold sm:text-lg\">\n                  Patient Triage & Allocation Board\n                </h3>\n                <span ui-badge variant=\"secondary\" class=\"font-mono text-xs tabular-nums\">\n                  {{ filteredPatients().length }} Patients\n                </span>\n              </div>\n              <p ui-card-description class=\"text-muted-foreground mt-0.5 text-xs\">\n                Continuous monitoring of emergency severity index, vital signs, and room throughput.\n              </p>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <div class=\"relative w-full min-w-[200px] sm:w-60\">\n                <lucide-icon\n                  [img]=\"Search\"\n                  class=\"text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2\"\n                />\n                <ui-input\n                  [value]=\"search()\"\n                  (valueChange)=\"search.set($event)\"\n                  type=\"text\"\n                  placeholder=\"Search patient, MRN, bay...\"\n                  class=\"h-8 pl-8 text-xs sm:text-sm\"\n                />\n              </div>\n\n              <div class=\"w-36 sm:w-40\">\n                <ui-select [value]=\"acuityFilter()\" (valueChange)=\"setAcuityFilter($event)\">\n                  <button ui-select-trigger class=\"h-8 text-xs\">\n                    <ui-select-value placeholder=\"All Acuities\" />\n                  </button>\n                  <ui-select-content>\n                    <ui-select-item value=\"all\">All Acuities</ui-select-item>\n                    <ui-select-item value=\"esi-1\">ESI 1 - Resuscitation</ui-select-item>\n                    <ui-select-item value=\"esi-2\">ESI 2 - Emergent</ui-select-item>\n                    <ui-select-item value=\"esi-3\">ESI 3 - Urgent</ui-select-item>\n                    <ui-select-item value=\"esi-4\">ESI 4/5 - Non-Urgent</ui-select-item>\n                  </ui-select-content>\n                </ui-select>\n              </div>\n\n              <div class=\"w-32 sm:w-36\">\n                <ui-select [value]=\"locationFilter()\" (valueChange)=\"setLocationFilter($event)\">\n                  <button ui-select-trigger class=\"h-8 text-xs\">\n                    <ui-select-value placeholder=\"All Locations\" />\n                  </button>\n                  <ui-select-content>\n                    <ui-select-item value=\"all\">All Locations</ui-select-item>\n                    <ui-select-item value=\"trauma\">Trauma Bays</ui-select-item>\n                    <ui-select-item value=\"acute\">Acute Beds</ui-select-item>\n                    <ui-select-item value=\"fast_track\">Fast Track</ui-select-item>\n                  </ui-select-content>\n                </ui-select>\n              </div>\n\n              @if (isFiltered()) {\n                <button ui-button variant=\"ghost\" size=\"sm\" class=\"h-8 px-2 text-xs\" (click)=\"resetFilters()\">\n                  Clear\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div ui-card-content class=\"p-0\">\n          <div class=\"overflow-x-auto\">\n            <table ui-table>\n              <thead ui-table-header>\n                <tr ui-table-row class=\"hover:bg-transparent\">\n                  <th ui-table-head class=\"w-[140px] text-xs font-semibold\">Acuity (ESI)</th>\n                  <th ui-table-head class=\"min-w-[200px] text-xs font-semibold\">Patient Demographics</th>\n                  <th ui-table-head class=\"min-w-[240px] text-xs font-semibold\">Chief Complaint & Symptoms</th>\n                  <th ui-table-head class=\"w-[110px] text-xs font-semibold\">Wait Time</th>\n                  <th ui-table-head class=\"min-w-[190px] text-xs font-semibold\">Vitals Snapshot</th>\n                  <th ui-table-head class=\"w-[150px] text-xs font-semibold\">Bed / Room</th>\n                  <th ui-table-head class=\"min-w-[160px] text-xs font-semibold\">Attending Staff</th>\n                  <th ui-table-head class=\"w-[60px] text-right text-xs font-semibold\">\n                    <span class=\"sr-only\">Actions</span>\n                  </th>\n                </tr>\n              </thead>\n\n              <tbody ui-table-body>\n                @if (filteredPatients().length === 0) {\n                  <tr ui-table-row>\n                    <td ui-table-cell [attr.colspan]=\"8\" class=\"h-48 text-center\">\n                      <div class=\"flex flex-col items-center justify-center gap-2\">\n                        <div class=\"bg-muted flex size-10 items-center justify-center rounded-full\">\n                          <lucide-icon [img]=\"Search\" class=\"text-muted-foreground size-5\" />\n                        </div>\n                        <p class=\"text-foreground text-sm font-semibold\">No patients match current filters</p>\n                        <p class=\"text-muted-foreground text-xs\">\n                          Try clearing your search query or selecting \"All Acuities\".\n                        </p>\n                        <button ui-button variant=\"outline\" size=\"sm\" class=\"mt-2 text-xs\" (click)=\"resetFilters()\">\n                          Reset Filters\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n\n                @for (pt of filteredPatients(); track pt.id) {\n                  <tr ui-table-row [class]=\"patientRowClass(pt)\">\n                    <td ui-table-cell class=\"align-top font-medium\">\n                      <div class=\"flex flex-col items-start gap-1\">\n                        <span ui-badge variant=\"outline\" [class]=\"acuityBadgeClass(pt)\">\n                          @if (pt.acuity === 'esi-1') {\n                            <span class=\"bg-destructive size-1.5 animate-pulse rounded-full\"></span>\n                          }\n                          {{ pt.acuityCode }}\n                        </span>\n                        <span class=\"text-muted-foreground text-xs font-medium\">{{ acuityLabel(pt.acuity) }}</span>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"space-y-1\">\n                        <div class=\"flex items-center gap-1.5\">\n                          <span class=\"text-foreground text-sm font-semibold tracking-tight\">{{ pt.name }}</span>\n                          <span class=\"text-muted-foreground text-xs font-medium\">({{ pt.age }}{{ pt.gender }})</span>\n                        </div>\n                        <div class=\"text-muted-foreground flex items-center gap-2 font-mono text-xs\">\n                          <span>{{ pt.mrn }}</span>\n                        </div>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"space-y-1\">\n                        <p class=\"text-foreground text-xs font-semibold\">{{ pt.chiefComplaint }}</p>\n                        <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ pt.symptoms }}</p>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"flex items-center gap-1.5 pt-0.5\">\n                        <lucide-icon [img]=\"Clock\" [class]=\"waitIconClass(pt)\" />\n                        <span [class]=\"waitTextClass(pt)\">{{ pt.waitTime }}</span>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"grid grid-cols-2 gap-x-3 gap-y-1 text-xs\">\n                        <div class=\"flex items-center justify-between gap-1 font-mono\">\n                          <span class=\"text-muted-foreground\">BP:</span>\n                          <span [class]=\"bpClass(pt)\">{{ pt.vitals.bp }}</span>\n                        </div>\n                        <div class=\"flex items-center justify-between gap-1 font-mono\">\n                          <span class=\"text-muted-foreground\">HR:</span>\n                          <span [class]=\"hrClass(pt)\">{{ pt.vitals.hr }} bpm</span>\n                        </div>\n                        <div class=\"flex items-center justify-between gap-1 font-mono\">\n                          <span class=\"text-muted-foreground\">SpO2:</span>\n                          <span [class]=\"spo2Class(pt)\">{{ pt.vitals.spo2 }}%</span>\n                        </div>\n                        <div class=\"flex items-center justify-between gap-1 font-mono\">\n                          <span class=\"text-muted-foreground\">Temp:</span>\n                          <span class=\"text-foreground font-semibold tabular-nums\">{{ pt.vitals.temp }}</span>\n                        </div>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"space-y-1\">\n                        <span\n                          ui-badge\n                          variant=\"outline\"\n                          class=\"border-border bg-muted/40 text-foreground gap-1 text-xs font-medium\"\n                        >\n                          <lucide-icon [img]=\"Bed\" class=\"text-primary size-3\" />\n                          {{ pt.assignedRoom }}\n                        </span>\n                        <p class=\"text-muted-foreground text-xs\">{{ pt.clinicalStatus }}</p>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"align-top\">\n                      <div class=\"space-y-1.5\">\n                        <div class=\"flex items-center gap-2\">\n                          <ui-avatar class=\"size-6\">\n                            <ui-avatar-image [src]=\"pt.primaryNurse.avatar\" [alt]=\"pt.primaryNurse.name\" />\n                            <ui-avatar-fallback class=\"bg-primary/10 text-primary text-xs font-medium\">\n                              {{ pt.primaryNurse.initials }}\n                            </ui-avatar-fallback>\n                          </ui-avatar>\n                          <span\n                            class=\"text-foreground max-w-[130px] truncate text-xs leading-none font-medium\"\n                            [attr.title]=\"pt.primaryNurse.name\"\n                          >\n                            {{ pt.primaryNurse.name }}\n                          </span>\n                        </div>\n                        <div class=\"flex items-center gap-2\">\n                          <ui-avatar class=\"size-6\">\n                            <ui-avatar-image [src]=\"pt.attendingPhysician.avatar\" [alt]=\"pt.attendingPhysician.name\" />\n                            <ui-avatar-fallback class=\"bg-secondary text-secondary-foreground text-xs font-medium\">\n                              {{ pt.attendingPhysician.initials }}\n                            </ui-avatar-fallback>\n                          </ui-avatar>\n                          <span\n                            class=\"text-muted-foreground max-w-[130px] truncate text-xs leading-none\"\n                            [attr.title]=\"pt.attendingPhysician.name\"\n                          >\n                            {{ pt.attendingPhysician.name }}\n                          </span>\n                        </div>\n                      </div>\n                    </td>\n\n                    <td ui-table-cell class=\"text-right align-top\">\n                      <ui-dropdown-menu>\n                        <button ui-button ui-dropdown-menu-trigger variant=\"ghost\" size=\"icon-sm\" class=\"size-8\">\n                          <lucide-icon [img]=\"MoreHorizontal\" class=\"size-4\" />\n                          <span class=\"sr-only\">Patient actions</span>\n                        </button>\n                        <ui-dropdown-menu-content align=\"end\" class=\"w-48\">\n                          <ui-dropdown-menu-label>Triage Actions</ui-dropdown-menu-label>\n                          <ui-dropdown-menu-item>\n                            <lucide-icon [img]=\"Bed\" class=\"size-4\" />\n                            <span>Assign Room</span>\n                          </ui-dropdown-menu-item>\n                          <ui-dropdown-menu-item>\n                            <lucide-icon [img]=\"HeartPulse\" class=\"size-4\" />\n                            <span>Re-triage Acuity</span>\n                          </ui-dropdown-menu-item>\n                          <ui-dropdown-menu-item>\n                            <lucide-icon [img]=\"Zap\" class=\"size-4\" />\n                            <span>Order STAT Labs</span>\n                          </ui-dropdown-menu-item>\n                          <ui-dropdown-menu-separator />\n                          <ui-dropdown-menu-item>\n                            <lucide-icon [img]=\"DoorOpen\" class=\"size-4\" />\n                            <span>Discharge / Transfer</span>\n                          </ui-dropdown-menu-item>\n                        </ui-dropdown-menu-content>\n                      </ui-dropdown-menu>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <div\n            class=\"border-border bg-muted/20 text-muted-foreground flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-xs\"\n          >\n            <div class=\"flex items-center gap-3 font-medium\">\n              <span>Level 1 Trauma Alert Protocol Active</span>\n              <div ui-separator orientation=\"vertical\" class=\"h-3.5\"></div>\n              <span class=\"tabular-nums\">Average Door-to-Triage: 4.2 min</span>\n            </div>\n\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-foreground font-medium\">ED Occupancy:</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">88% (22/25 Beds)</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class UiTriageQueueDashboardComponent {\n  protected readonly Bed = Bed\n  protected readonly Clock = Clock\n  protected readonly DoorOpen = DoorOpen\n  protected readonly HeartPulse = HeartPulse\n  protected readonly MoreHorizontal = MoreHorizontal\n  protected readonly Plus = Plus\n  protected readonly RefreshCw = RefreshCw\n  protected readonly Search = Search\n  protected readonly Zap = Zap\n\n  protected readonly acuityCards = acuityCards\n\n  @Input('class') className?: string\n  @Input() unitName = 'Level 1 Trauma Center · Bay 4'\n  @Input() facilityName = 'St. Jude Metropolitan Academic Medical Center'\n  @Input() set initialSearch(v: string | undefined) {\n    this.search.set(v ?? '')\n  }\n  @Input() set initialAcuity(v: string | undefined) {\n    if (v) this.acuityFilter.set(v)\n  }\n  @Input() set initialLocation(v: string | undefined) {\n    if (v) this.locationFilter.set(v)\n  }\n  @Input() set initialPatients(v: TriagePatient[] | undefined) {\n    if (v) this.patients.set(v)\n  }\n\n  readonly patients = signal<TriagePatient[]>(defaultPatients.map((p) => ({ ...p })))\n  readonly search = signal('')\n  readonly acuityFilter = signal<string>('all')\n  readonly locationFilter = signal<string>('all')\n  readonly sortBy = signal<TriageSortBy>('acuity')\n\n  readonly filteredPatients = computed(() => {\n    const q = this.search().trim().toLowerCase()\n    const acuity = this.acuityFilter()\n    const location = this.locationFilter()\n    const sort = this.sortBy()\n    return this.patients()\n      .filter((pt) => {\n        if (q) {\n          const matchesName = pt.name.toLowerCase().includes(q)\n          const matchesMrn = pt.mrn.toLowerCase().includes(q)\n          const matchesComplaint = pt.chiefComplaint.toLowerCase().includes(q)\n          const matchesRoom = pt.assignedRoom.toLowerCase().includes(q)\n          if (!matchesName && !matchesMrn && !matchesComplaint && !matchesRoom) return false\n        }\n        if (acuity !== 'all' && pt.acuity !== acuity) return false\n        if (location !== 'all' && pt.roomType !== location) return false\n        return true\n      })\n      .sort((a, b) => {\n        if (sort === 'wait-desc') return b.waitMinutes - a.waitMinutes\n        if (sort === 'wait-asc') return a.waitMinutes - b.waitMinutes\n        return acuityOrder[a.acuity] - acuityOrder[b.acuity]\n      })\n  })\n\n  readonly isFiltered = computed(\n    () => !!this.search() || this.acuityFilter() !== 'all' || this.locationFilter() !== 'all',\n  )\n\n  get rootClass(): string {\n    return cn('bg-background text-foreground flex w-full flex-col gap-6 font-sans', this.className)\n  }\n\n  acuityCardClass(card: AcuitySummaryCard): string {\n    return cn(\n      'border-border relative cursor-pointer transition-colors duration-150 select-none hover:shadow-sm',\n      this.acuityFilter() === card.level && 'ring-primary/40 bg-accent/40 ring-2',\n    )\n  }\n\n  acuityDotClass(card: AcuitySummaryCard): string {\n    return cn('size-2 shrink-0 rounded-full', card.indicatorDot, card.pulse && 'animate-pulse')\n  }\n\n  acuityBadgeClass(pt: TriagePatient): string {\n    return cn(\n      'gap-1.5 px-2.5 py-1 text-xs font-semibold whitespace-nowrap',\n      pt.acuity === 'esi-1' && 'border-destructive/30 bg-destructive/10 text-destructive',\n      pt.acuity === 'esi-2' && 'border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-400',\n      pt.acuity === 'esi-3' && 'border-warning/30 bg-warning/10 text-warning',\n      pt.acuity === 'esi-4' && 'border-success/30 bg-success/10 text-success',\n    )\n  }\n\n  acuityLabel(level: EsiLevel): string {\n    if (level === 'esi-1') return 'Resuscitation'\n    if (level === 'esi-2') return 'Emergent'\n    if (level === 'esi-3') return 'Urgent'\n    return 'Non-Urgent'\n  }\n\n  patientRowClass(pt: TriagePatient): string {\n    return cn('transition-colors', pt.acuity === 'esi-1' && 'bg-destructive/[0.03] dark:bg-destructive/10]')\n  }\n\n  waitIconClass(pt: TriagePatient): string {\n    return cn('size-3.5 shrink-0', pt.waitMinutes > 30 ? 'text-warning' : 'text-muted-foreground')\n  }\n\n  waitTextClass(pt: TriagePatient): string {\n    return cn('text-xs font-semibold tabular-nums', pt.waitMinutes > 40 ? 'text-warning' : 'text-foreground')\n  }\n\n  bpClass(pt: TriagePatient): string {\n    return cn('font-semibold tabular-nums', pt.acuity === 'esi-1' ? 'text-destructive' : 'text-foreground')\n  }\n\n  hrClass(pt: TriagePatient): string {\n    return cn('font-semibold tabular-nums', pt.vitals.hr > 110 ? 'text-destructive' : 'text-foreground')\n  }\n\n  spo2Class(pt: TriagePatient): string {\n    return cn('font-semibold tabular-nums', pt.vitals.spo2 < 95 ? 'text-destructive' : 'text-foreground')\n  }\n\n  handleAcuityCardClick(level: EsiLevel): void {\n    this.acuityFilter.set(this.acuityFilter() === level ? 'all' : level)\n  }\n\n  setAcuityFilter(value: string): void {\n    this.acuityFilter.set(value)\n  }\n\n  setLocationFilter(value: string): void {\n    this.locationFilter.set(value)\n  }\n\n  setSortBy(value: TriageSortBy): void {\n    this.sortBy.set(value)\n  }\n\n  resetFilters(): void {\n    this.search.set('')\n    this.acuityFilter.set('all')\n    this.locationFilter.set('all')\n    this.sortBy.set('acuity')\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/triage-queue-dashboard/triage-queue-dashboard.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/triage-queue-dashboard/index.ts",
      "content": "export {\n  UiTriageQueueDashboardComponent,\n  type AcuitySummaryCard,\n  type Caregiver,\n  type EsiLevel,\n  type PatientVitals,\n  type TriagePatient,\n  type TriageRoomType,\n  type TriageSortBy,\n} from './triage-queue-dashboard.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/triage-queue-dashboard/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/dropdown-menu.json",
    "https://uipkge.dev/r/angular/input.json",
    "https://uipkge.dev/r/angular/select.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/table.json"
  ],
  "description": "Emergency Department (ED) and Urgent Care patient acuity triage queue and room allocation board: live unit header, 4 ESI overview cards with target wait thresholds, searchable patient queue table with vitals snapshot, assigned room, attending care team, and quick clinical actions.",
  "categories": [
    "healthcare",
    "app"
  ]
}