Patient Medical Record

blockhealthcare
Epic/Cerner-style EHR patient chart and clinical summary: patient demographics header with allergy alerts, latest vitals strip, active diagnoses and ICD-10 problem list, active medications table, recent clinical encounter notes (HPI and Assessment & Plan), upcoming appointments schedule, care team directory, and emergency contacts.
Installation

$pnpm dlx uipkge-ng@latest add patient-medical-record
$npx uipkge-ng@latest add patient-medical-record
$yarn dlx uipkge-ng@latest add patient-medical-record
$bunx uipkge-ng@latest add patient-medical-record
Manifest:https://uipkge.dev/r/angular/patient-medical-record.jsonInstalls to:src/app/components/blocks/patient-medical-record/
Variants

Loading interactive previews…
npm dependencies

lucide-angular
Includes

avatar badge button card separator table
Files installed (2)

src/app/components/blocks/patient-medical-record/patient-medical-record.component.ts34.8 kB
// Epic / Cerner style EHR patient chart and clinical summary: demographics header with a
// severe-allergy banner, latest vitals strip, ICD-10 problem list, active medications table,
// encounter notes (HPI + Assessment & Plan), upcoming schedule, care team directory and
// emergency contact. Port of the React block 1:1 (static clinical surface, no local state).
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import {
  Activity,
  AlertTriangle,
  Calendar,
  CheckCircle2,
  Clock,
  Droplets,
  FileText,
  FlaskConical,
  HeartPulse,
  LucideAngularModule,
  MapPin,
  Phone,
  Pill,
  Printer,
  Scale,
  Stethoscope,
  Thermometer,
  UserCheck,
  Wind,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'
import {
  UiTableBodyComponent,
  UiTableCellComponent,
  UiTableComponent,
  UiTableHeadComponent,
  UiTableHeaderComponent,
  UiTableRowComponent,
} from '@/ui/table/table.component'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-patient-medical-record, [ui-patient-medical-record]',
  standalone: true,
  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiAvatarImageComponent,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiSeparatorComponent,
    UiTableBodyComponent,
    UiTableCellComponent,
    UiTableComponent,
    UiTableHeadComponent,
    UiTableHeaderComponent,
    UiTableRowComponent,
  ],
  template: `
    <div data-slot="patient-medical-record" [class]="rootClass">
      <!-- Patient Header Card -->
      <header class="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6">
        <div class="flex flex-col gap-5">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex flex-wrap items-start gap-4 sm:items-center">
              <ui-avatar class="ring-border size-14 ring-2 sm:size-16">
                <ui-avatar-image
                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80"
                  alt="David Chen"
                />
                <ui-avatar-fallback class="bg-primary/10 text-primary text-base font-semibold">DC</ui-avatar-fallback>
              </ui-avatar>
              <div class="space-y-1">
                <div class="flex flex-wrap items-center gap-2">
                  <h1 class="text-foreground text-xl font-bold tracking-tight sm:text-2xl">David Chen</h1>
                  <span class="text-muted-foreground text-sm font-medium">48 yrs · Male</span>
                  <span
                    ui-badge
                    variant="outline"
                    class="border-success/30 bg-success/10 text-success gap-1.5 font-medium"
                  >
                    <span class="bg-success size-1.5 animate-pulse rounded-full"></span>
                    Active Inpatient · Room 412B
                  </span>
                </div>

                <div class="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
                  <span class="text-foreground flex items-center gap-1 font-mono font-medium"> #MRN-849201 </span>
                  <span class="flex items-center gap-1">
                    <lucide-icon [img]="Calendar" class="size-3.5" />
                    DOB: <strong class="text-foreground font-medium tabular-nums">Oct 14, 1978</strong>
                  </span>
                  <span class="flex items-center gap-1">
                    <lucide-icon [img]="Droplets" class="text-destructive size-3.5" />
                    Blood: <strong class="text-foreground font-medium">O+</strong>
                  </span>
                  <span class="flex items-center gap-1">
                    <lucide-icon [img]="Stethoscope" class="text-primary size-3.5" />
                    PCP: <strong class="text-foreground font-medium">Dr. Emily Vance, MD</strong>
                  </span>
                </div>
              </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
              <button ui-button variant="outline" size="sm" class="gap-1.5 text-xs font-medium">
                <lucide-icon [img]="FlaskConical" class="text-primary size-3.5" />
                Order Labs
              </button>
              <button ui-button variant="outline" size="sm" class="gap-1.5 text-xs font-medium">
                <lucide-icon [img]="Pill" class="text-primary size-3.5" />
                Write Prescription
              </button>
              <button ui-button variant="outline" size="sm" class="gap-1.5 text-xs font-medium">
                <lucide-icon [img]="Printer" class="size-3.5" />
                Print Summary
              </button>
            </div>
          </div>

          <!-- Severe Allergy Banner -->
          <div
            class="border-destructive/30 bg-destructive/10 text-destructive dark:bg-destructive/20 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-2.5 text-xs font-medium sm:text-sm"
          >
            <div class="flex items-center gap-2">
              <lucide-icon [img]="AlertTriangle" class="text-destructive size-4 shrink-0" />
              <span>
                Severe Allergies: <strong class="font-semibold underline">Penicillin</strong> (Anaphylaxis),
                <strong class="font-semibold underline">Sulfa drugs</strong> (Severe Rash)
              </span>
            </div>
            <span ui-badge variant="destructive" class="text-xs font-semibold tracking-wider uppercase">
              High Alert
            </span>
          </div>
        </div>
      </header>

      <!-- 2-Column Clinical Layout -->
      <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
        <main class="space-y-6 lg:col-span-8">
          <!-- Latest Vitals Strip -->
          <div ui-card>
            <div ui-card-header class="flex-row items-center justify-between space-y-0 pb-3">
              <div>
                <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                  <lucide-icon [img]="Activity" class="text-primary size-4" />
                  Latest Vitals Strip
                </h3>
                <p ui-card-description class="text-xs">
                  Recorded today at 08:30 AM EDT · Nurse J. Miller, RN (Floor 4 East)
                </p>
              </div>
              <span ui-badge variant="secondary" class="text-xs font-normal">Within Normal Limits</span>
            </div>
            <div ui-card-content>
              <div class="grid grid-cols-2 gap-3 sm:grid-cols-5">
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center justify-between">
                    <span class="text-xs font-medium tracking-wider uppercase">Blood Pressure</span>
                    <lucide-icon [img]="HeartPulse" class="text-destructive size-3.5" />
                  </div>
                  <div class="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">124/82</div>
                  <p class="text-muted-foreground text-xs">mmHg · Normal</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center justify-between">
                    <span class="text-xs font-medium tracking-wider uppercase">Heart Rate</span>
                    <lucide-icon [img]="Activity" class="text-destructive size-3.5" />
                  </div>
                  <div class="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">72</div>
                  <p class="text-muted-foreground text-xs">bpm · Resting</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center justify-between">
                    <span class="text-xs font-medium tracking-wider uppercase">Temp (Oral)</span>
                    <lucide-icon [img]="Thermometer" class="text-warning size-3.5" />
                  </div>
                  <div class="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">98.6</div>
                  <p class="text-muted-foreground text-xs">°F · Afebrile</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center justify-between">
                    <span class="text-xs font-medium tracking-wider uppercase">Oxygen SpO2</span>
                    <lucide-icon [img]="Wind" class="text-info size-3.5" />
                  </div>
                  <div class="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">98%</div>
                  <p class="text-muted-foreground text-xs">Room air</p>
                </div>
                <div class="bg-muted/30 border-border space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center justify-between">
                    <span class="text-xs font-medium tracking-wider uppercase">BMI</span>
                    <lucide-icon [img]="Scale" class="text-success size-3.5" />
                  </div>
                  <div class="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">24.2</div>
                  <p class="text-muted-foreground text-xs">kg/m² · Normal</p>
                </div>
              </div>
            </div>
          </div>

          <!-- Active Diagnoses & Problem List -->
          <div ui-card>
            <div ui-card-header class="flex-row items-center justify-between space-y-0 pb-3">
              <div>
                <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                  <lucide-icon [img]="FileText" class="text-primary size-4" />
                  Active Diagnoses & Problem List
                </h3>
                <p ui-card-description class="text-xs">Chronic and active conditions under clinical management</p>
              </div>
              <span ui-badge variant="secondary" class="text-xs font-normal">3 Active Conditions</span>
            </div>
            <div ui-card-content class="space-y-3">
              <div
                class="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"
              >
                <div class="space-y-1">
                  <div class="flex flex-wrap items-center gap-2">
                    <span class="text-foreground text-sm font-semibold">Type 2 Diabetes Mellitus</span>
                    <span ui-badge variant="outline" class="font-mono text-xs">ICD-10 E11.9</span>
                    <span ui-badge variant="secondary" class="text-xs">Chronic</span>
                  </div>
                  <p class="text-muted-foreground text-xs">
                    Onset: <span class="text-foreground font-medium">March 2019</span> · Managed with oral hypoglycemics
                    · Last HbA1c: <span class="text-foreground font-medium">7.2%</span>
                  </p>
                </div>
                <div class="text-left sm:text-right">
                  <span class="text-muted-foreground block text-xs">Diagnosed by</span>
                  <span class="text-foreground text-xs font-medium">Dr. Emily Vance, MD</span>
                </div>
              </div>

              <div
                class="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"
              >
                <div class="space-y-1">
                  <div class="flex flex-wrap items-center gap-2">
                    <span class="text-foreground text-sm font-semibold">Essential (Primary) Hypertension</span>
                    <span ui-badge variant="outline" class="font-mono text-xs">ICD-10 I10</span>
                    <span ui-badge variant="secondary" class="text-xs">Controlled</span>
                  </div>
                  <p class="text-muted-foreground text-xs">
                    Onset: <span class="text-foreground font-medium">November 2021</span> · ACE inhibitor therapy ·
                    Monitored daily
                  </p>
                </div>
                <div class="text-left sm:text-right">
                  <span class="text-muted-foreground block text-xs">Diagnosed by</span>
                  <span class="text-foreground text-xs font-medium">Dr. Emily Vance, MD</span>
                </div>
              </div>

              <div
                class="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"
              >
                <div class="space-y-1">
                  <div class="flex flex-wrap items-center gap-2">
                    <span class="text-foreground text-sm font-semibold">Moderate Persistent Asthma</span>
                    <span ui-badge variant="outline" class="font-mono text-xs">ICD-10 J45.40</span>
                    <span ui-badge variant="secondary" class="text-xs">Intermittent</span>
                  </div>
                  <p class="text-muted-foreground text-xs">
                    Onset: <span class="text-foreground font-medium">June 2015</span> · Bronchodilator PRN · No
                    hospitalizations in past 12m
                  </p>
                </div>
                <div class="text-left sm:text-right">
                  <span class="text-muted-foreground block text-xs">Diagnosed by</span>
                  <span class="text-foreground text-xs font-medium">Dr. Marcus Vance, MD</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Active Medications Table -->
          <div ui-card>
            <div ui-card-header class="flex-row items-center justify-between space-y-0 pb-3">
              <div>
                <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                  <lucide-icon [img]="Pill" class="text-primary size-4" />
                  Active Medications Table
                </h3>
                <p ui-card-description class="text-xs">Current inpatient and outpatient pharmacotherapy regimen</p>
              </div>
              <span ui-badge variant="secondary" class="text-xs font-normal">4 Prescriptions</span>
            </div>
            <div ui-card-content>
              <div class="border-border overflow-x-auto rounded-lg border">
                <table ui-table>
                  <thead ui-table-header>
                    <tr ui-table-row>
                      <th ui-table-head class="text-xs">Medication & Brand</th>
                      <th ui-table-head class="text-xs">Dosage & Route</th>
                      <th ui-table-head class="hidden text-xs md:table-cell">Instructions</th>
                      <th ui-table-head class="text-xs">Prescribed By</th>
                      <th ui-table-head class="text-right text-xs">Status</th>
                    </tr>
                  </thead>
                  <tbody ui-table-body>
                    <tr ui-table-row>
                      <td ui-table-cell>
                        <div class="text-foreground text-sm font-medium">Metformin HCl</div>
                        <div class="text-muted-foreground text-xs">Glucophage · Biguanide</div>
                      </td>
                      <td ui-table-cell class="text-foreground font-mono text-xs font-medium">500mg PO BID</td>
                      <td ui-table-cell class="text-muted-foreground hidden text-xs md:table-cell">
                        Take with morning & evening meals
                      </td>
                      <td ui-table-cell class="text-foreground text-xs">Dr. Emily Vance, MD</td>
                      <td ui-table-cell class="text-right">
                        <span ui-badge variant="default" class="text-xs font-medium">Active</span>
                      </td>
                    </tr>
                    <tr ui-table-row>
                      <td ui-table-cell>
                        <div class="text-foreground text-sm font-medium">Lisinopril</div>
                        <div class="text-muted-foreground text-xs">Prinivil · ACE Inhibitor</div>
                      </td>
                      <td ui-table-cell class="text-foreground font-mono text-xs font-medium">10mg PO Daily</td>
                      <td ui-table-cell class="text-muted-foreground hidden text-xs md:table-cell">
                        Take once daily in morning with water
                      </td>
                      <td ui-table-cell class="text-foreground text-xs">Dr. Emily Vance, MD</td>
                      <td ui-table-cell class="text-right">
                        <span ui-badge variant="default" class="text-xs font-medium">Active</span>
                      </td>
                    </tr>
                    <tr ui-table-row>
                      <td ui-table-cell>
                        <div class="text-foreground text-sm font-medium">Albuterol Sulfate</div>
                        <div class="text-muted-foreground text-xs">ProAir HFA · SABA</div>
                      </td>
                      <td ui-table-cell class="text-foreground font-mono text-xs font-medium">
                        90mcg Inhalation Q4H PRN
                      </td>
                      <td ui-table-cell class="text-muted-foreground hidden text-xs md:table-cell">
                        1–2 puffs every 4–6 hrs as needed
                      </td>
                      <td ui-table-cell class="text-foreground text-xs">Dr. Emily Vance, MD</td>
                      <td ui-table-cell class="text-right">
                        <span ui-badge variant="default" class="text-xs font-medium">Active</span>
                      </td>
                    </tr>
                    <tr ui-table-row>
                      <td ui-table-cell>
                        <div class="text-foreground text-sm font-medium">Atorvastatin Calcium</div>
                        <div class="text-muted-foreground text-xs">Lipitor · Statin</div>
                      </td>
                      <td ui-table-cell class="text-foreground font-mono text-xs font-medium">20mg PO QHS</td>
                      <td ui-table-cell class="text-muted-foreground hidden text-xs md:table-cell">
                        Take once daily at bedtime
                      </td>
                      <td ui-table-cell class="text-foreground text-xs">Dr. Marcus Vance, MD</td>
                      <td ui-table-cell class="text-right">
                        <span ui-badge variant="default" class="text-xs font-medium">Active</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- Recent Clinical Encounter Notes -->
          <div ui-card>
            <div ui-card-header class="pb-3">
              <div class="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                    <lucide-icon [img]="FileText" class="text-primary size-4" />
                    Recent Clinical Encounter Notes
                  </h3>
                  <p ui-card-description class="text-xs">Inpatient Daily Progress Note · General Internal Medicine</p>
                </div>
                <span ui-badge variant="outline" class="font-mono text-xs">Encounter #ENC-91823</span>
              </div>
            </div>
            <div ui-card-content class="space-y-4">
              <div
                class="bg-muted/30 border-border flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 text-xs"
              >
                <div class="flex items-center gap-2">
                  <span class="text-muted-foreground">Provider:</span>
                  <span class="text-foreground font-medium">Dr. Emily Vance, MD (Attending)</span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-muted-foreground">Date:</span>
                  <span class="text-foreground font-medium tabular-nums">Oct 24, 2026 · 09:30 AM EDT</span>
                </div>
              </div>

              <div class="space-y-2">
                <h4
                  class="text-muted-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"
                >
                  <span class="bg-primary size-1.5 rounded-full"></span>
                  History of Present Illness (HPI)
                </h4>
                <div
                  class="border-border bg-card text-foreground/90 space-y-2 rounded-lg border p-3.5 text-sm leading-relaxed"
                >
                  <p>
                    Patient is a 48-year-old male with a documented history of Type 2 Diabetes Mellitus and Essential
                    Hypertension, currently admitted to Inpatient Floor 4 East (Room 412B) for glycemic optimization
                    following mild erratic home glucose readings.
                  </p>
                  <p>
                    This morning, patient reports feeling well with notable improvement in energy levels. Denies
                    episodes of dizziness, diaphoresis, chest pain, palpitations, or acute dyspnea. Fasting blood
                    glucose at 07:00 was 118 mg/dL on Metformin 500mg BID. Vital signs remain within normal
                    physiological parameters. Tolerating scheduled diabetic meal plan without gastrointestinal distress.
                  </p>
                </div>
              </div>

              <div class="space-y-2">
                <h4
                  class="text-muted-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"
                >
                  <span class="bg-primary size-1.5 rounded-full"></span>
                  Assessment & Plan (A&P)
                </h4>
                <div
                  class="border-border bg-card text-foreground/90 space-y-3 rounded-lg border p-3.5 text-sm leading-relaxed"
                >
                  <div>
                    <div class="text-foreground text-xs font-semibold tracking-wide uppercase">
                      1. Type 2 Diabetes Mellitus (E11.9) — Controlled
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs sm:text-sm">
                      Glycemic control stabilized. Continue Metformin HCl 500mg PO BID with meals. Re-check fasting
                      blood sugar tomorrow at 07:00. HbA1c stable at 7.2%. No need for supplementary sliding-scale
                      insulin at this time.
                    </p>
                  </div>
                  <ui-separator />
                  <div>
                    <div class="text-foreground text-xs font-semibold tracking-wide uppercase">
                      2. Essential Hypertension (I10) — Stable
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs sm:text-sm">
                      Normotensive on Lisinopril 10mg PO Daily (today BP 124/82 mmHg). Maintain current dosage. Continue
                      routine Q8H vital signs monitoring.
                    </p>
                  </div>
                  <ui-separator />
                  <div>
                    <div class="text-foreground text-xs font-semibold tracking-wide uppercase">
                      3. Bronchial Asthma (J45.40) — Quiescent
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs sm:text-sm">
                      Bilateral breath sounds clear to auscultation without wheeze or crackles. Continue Albuterol 90mcg
                      MDI PRN.
                    </p>
                  </div>
                  <ui-separator />
                  <div>
                    <div class="text-foreground text-xs font-semibold tracking-wide uppercase">
                      4. Disposition & Discharge Planning
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs sm:text-sm">
                      Anticipate discharge tomorrow morning pending afternoon CMP and final attending evaluation.
                      Outpatient follow-up with PCP in 2 weeks.
                    </p>
                  </div>
                </div>
              </div>

              <div
                class="border-border text-muted-foreground flex flex-wrap items-center justify-between border-t pt-3 text-xs"
              >
                <div class="flex items-center gap-1.5">
                  <lucide-icon [img]="CheckCircle2" class="text-success size-4" />
                  <span>
                    Electronically Signed by: <strong class="text-foreground font-medium">Dr. Emily Vance, MD</strong>
                  </span>
                </div>
                <span class="tabular-nums">Signed: Oct 24, 2026 at 10:15 AM EDT</span>
              </div>
            </div>
          </div>
        </main>

        <!-- Right Side Panel (35%) -->
        <aside class="space-y-6 lg:col-span-4">
          <div ui-card>
            <div ui-card-header class="flex-row items-center justify-between space-y-0 pb-3">
              <div>
                <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                  <lucide-icon [img]="Calendar" class="text-primary size-4" />
                  Upcoming Schedule & Labs
                </h3>
                <p ui-card-description class="text-xs">Pending orders and scheduled consultations</p>
              </div>
            </div>
            <div ui-card-content class="space-y-3">
              <div class="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3">
                <div class="flex items-center justify-between gap-2">
                  <span class="text-foreground text-xs font-semibold">Comprehensive Metabolic Panel</span>
                  <span ui-badge variant="secondary" class="text-xs">Today</span>
                </div>
                <div class="text-muted-foreground flex items-center gap-2 text-xs">
                  <lucide-icon [img]="Clock" class="size-3.5" />
                  <span class="text-foreground font-medium tabular-nums">02:00 PM EDT</span>
                  <span>· Main Clinical Lab</span>
                </div>
                <div class="text-muted-foreground text-xs">Order #LAB-4819 · Stat processing</div>
              </div>

              <div class="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3">
                <div class="flex items-center justify-between gap-2">
                  <span class="text-foreground text-xs font-semibold">Transthoracic Echocardiogram</span>
                  <span ui-badge variant="outline" class="text-xs">Tomorrow</span>
                </div>
                <div class="text-muted-foreground flex items-center gap-2 text-xs">
                  <lucide-icon [img]="Clock" class="size-3.5" />
                  <span class="text-foreground font-medium tabular-nums">10:30 AM EDT</span>
                  <span>· Cardiology Suite 2B</span>
                </div>
                <div class="text-muted-foreground text-xs">Non-invasive Doppler evaluation</div>
              </div>

              <div class="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3">
                <div class="flex items-center justify-between gap-2">
                  <span class="text-foreground text-xs font-semibold">Endocrinology Follow-Up</span>
                  <span ui-badge variant="outline" class="text-xs">Nov 02</span>
                </div>
                <div class="text-muted-foreground flex items-center gap-2 text-xs">
                  <lucide-icon [img]="Clock" class="size-3.5" />
                  <span class="text-foreground font-medium tabular-nums">11:00 AM EDT</span>
                  <span>· Outpatient Clinic Rm 304</span>
                </div>
                <div class="text-muted-foreground text-xs">Dr. Robert Chen, MD · Glycemic review</div>
              </div>
            </div>
          </div>

          <div ui-card>
            <div ui-card-header class="pb-3">
              <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                <lucide-icon [img]="UserCheck" class="text-primary size-4" />
                Care Team Directory
              </h3>
              <p ui-card-description class="text-xs">Assigned inpatient clinical providers</p>
            </div>
            <div ui-card-content class="space-y-3.5">
              <div class="flex items-center justify-between gap-3">
                <div class="flex min-w-0 items-center gap-3">
                  <ui-avatar class="size-9">
                    <ui-avatar-fallback class="bg-primary/10 text-primary text-xs font-semibold">EV</ui-avatar-fallback>
                  </ui-avatar>
                  <div class="min-w-0">
                    <div class="text-foreground truncate text-sm font-semibold">Dr. Emily Vance, MD</div>
                    <div class="text-muted-foreground truncate text-xs">Attending Physician · Internal Med</div>
                  </div>
                </div>
                <span ui-badge variant="secondary" class="shrink-0 font-mono text-xs">ext. 2940</span>
              </div>

              <ui-separator />

              <div class="flex items-center justify-between gap-3">
                <div class="flex min-w-0 items-center gap-3">
                  <ui-avatar class="size-9">
                    <ui-avatar-fallback class="bg-primary/10 text-primary text-xs font-semibold">JM</ui-avatar-fallback>
                  </ui-avatar>
                  <div class="min-w-0">
                    <div class="text-foreground truncate text-sm font-semibold">Jason Miller, BSN, RN</div>
                    <div class="text-muted-foreground truncate text-xs">Charge Nurse · Floor 4 East</div>
                  </div>
                </div>
                <span ui-badge variant="secondary" class="shrink-0 font-mono text-xs">ext. 4802</span>
              </div>

              <ui-separator />

              <div class="flex items-center justify-between gap-3">
                <div class="flex min-w-0 items-center gap-3">
                  <ui-avatar class="size-9">
                    <ui-avatar-fallback class="bg-primary/10 text-primary text-xs font-semibold">SL</ui-avatar-fallback>
                  </ui-avatar>
                  <div class="min-w-0">
                    <div class="text-foreground truncate text-sm font-semibold">Sarah Lin, PharmD</div>
                    <div class="text-muted-foreground truncate text-xs">Clinical Pharmacist · Inpatient</div>
                  </div>
                </div>
                <span ui-badge variant="secondary" class="shrink-0 font-mono text-xs">ext. 3319</span>
              </div>
            </div>
          </div>

          <div ui-card>
            <div ui-card-header class="flex-row items-center justify-between space-y-0 pb-3">
              <div>
                <h3 ui-card-title class="flex items-center gap-2 text-base font-semibold">
                  <lucide-icon [img]="Phone" class="text-primary size-4" />
                  Emergency Contact
                </h3>
                <p ui-card-description class="text-xs">Designated healthcare surrogate</p>
              </div>
              <span ui-badge variant="secondary" class="text-xs font-medium">Primary</span>
            </div>
            <div ui-card-content class="space-y-3 text-xs">
              <div class="space-y-1">
                <div class="text-foreground text-sm font-semibold">Elena Chen</div>
                <div class="text-muted-foreground text-xs">Spouse · Full Medical Power of Attorney</div>
              </div>

              <ui-separator />

              <div class="text-muted-foreground space-y-2">
                <div class="flex items-center justify-between gap-2">
                  <span class="text-foreground flex items-center gap-1.5 font-medium">
                    <lucide-icon [img]="Phone" class="text-primary size-3.5" />
                    Primary Mobile
                  </span>
                  <span class="text-foreground font-mono font-medium tabular-nums">+1 (555) 234-8901</span>
                </div>
                <div class="flex items-center justify-between gap-2">
                  <span class="flex items-center gap-1.5">
                    <lucide-icon [img]="Phone" class="size-3.5" />
                    Secondary Work
                  </span>
                  <span class="font-mono tabular-nums">+1 (555) 234-8902</span>
                </div>
                <div class="flex items-start justify-between gap-2 pt-1">
                  <span class="flex shrink-0 items-center gap-1.5">
                    <lucide-icon [img]="MapPin" class="size-3.5" />
                    Home
                  </span>
                  <span class="text-foreground text-right">742 Evergreen Terrace, Seattle, WA 98101</span>
                </div>
              </div>

              <ui-separator />

              <button ui-button variant="outline" size="sm" class="w-full justify-center gap-1.5 text-xs font-medium">
                <lucide-icon [img]="Phone" class="size-3.5" />
                Call Emergency Contact
              </button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  `,
})
export class UiPatientMedicalRecordComponent {
  protected readonly Activity = Activity
  protected readonly AlertTriangle = AlertTriangle
  protected readonly Calendar = Calendar
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Clock = Clock
  protected readonly Droplets = Droplets
  protected readonly FileText = FileText
  protected readonly FlaskConical = FlaskConical
  protected readonly HeartPulse = HeartPulse
  protected readonly MapPin = MapPin
  protected readonly Phone = Phone
  protected readonly Pill = Pill
  protected readonly Printer = Printer
  protected readonly Scale = Scale
  protected readonly Stethoscope = Stethoscope
  protected readonly Thermometer = Thermometer
  protected readonly UserCheck = UserCheck
  protected readonly Wind = Wind

  @Input('class') className?: string

  get rootClass(): string {
    return cn('bg-background text-foreground w-full space-y-6', this.className)
  }
}
src/app/components/blocks/patient-medical-record/index.ts0.1 kB
Raw manifest:https://uipkge.dev/r/angular/patient-medical-record.json
Change language
