Work Order

Manufacturing work order card with status indicators, priority levels, progress tracking, materials list, and action buttons.

Basic Work Order

Preview

ERPlora Hydraulic Valve Assembly

SKU: ERP-HVA-200

Target 500

Completed 0

Remaining 500

Progress 0%

Due: Feb 15, 2026

<div class="work-order work-order-priority-normal">
  <div class="work-order-header">
    <div class="work-order-header-top">
      <h3 class="work-order-number">WO-2024-0847</h3>
      <span class="work-order-status work-order-status-pending">
        <span class="work-order-status-dot"></span>
        Pending
      </span>
    </div>
    <div class="work-order-product">
      <p class="work-order-product-name">ERPlora Hydraulic Valve Assembly</p>
      <span class="work-order-product-sku">SKU: ERP-HVA-200</span>
    </div>
  </div>
  <div class="work-order-content">
    <div class="work-order-quantities">
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Target</span>
        <span class="work-order-quantity-value">500</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Completed</span>
        <span class="work-order-quantity-value work-order-quantity-value-completed">0</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Remaining</span>
        <span class="work-order-quantity-value work-order-quantity-value-remaining">500</span>
      </div>
    </div>
    <div class="work-order-progress">
      <div class="work-order-progress-header">
        <span class="work-order-progress-label">Progress</span>
        <span class="work-order-progress-value">0%</span>
      </div>
      <div class="work-order-progress-bar">
        <div class="work-order-progress-fill" style="width: 0%"></div>
      </div>
    </div>
    <div class="work-order-due-date">
      <span class="work-order-due-date-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></span>
      Due: Feb 15, 2026
    </div>
  </div>
  <div class="work-order-actions">
    <button class="work-order-action work-order-action-start">
      <span class="work-order-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></span>
      Start
    </button>
    <button class="work-order-action work-order-action-secondary">Details</button>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col w-90 bg-base-100 rounded-box shadow-md hover:shadow-lg transition-shadow overflow-hidden">
  <!-- Priority strip -->
  <div class="absolute top-0 left-0 bottom-0 w-1 bg-primary"></div>
  <!-- Header -->
  <div class="flex flex-col gap-1 p-4 pl-5 border-b border-base-300">
    <div class="flex items-center justify-between gap-2">
      <h3 class="text-lg font-bold m-0 tabular-nums">WO-2024-0847</h3>
      <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2.5 py-1 bg-base-content/10 text-base-content/60 tracking-wide">
        <span class="w-1.5 h-1.5 rounded-full bg-current"></span>
        Pending
      </span>
    </div>
    <div class="flex flex-col gap-0.5 mt-1">
      <p class="text-base font-semibold m-0">ERPlora Hydraulic Valve Assembly</p>
      <span class="text-xs font-mono text-base-content/40">SKU: ERP-HVA-200</span>
    </div>
  </div>
  <!-- Content -->
  <div class="flex flex-col gap-4 p-4 pl-5">
    <div class="flex items-center gap-6">
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Target</span>
        <span class="text-xl font-bold tabular-nums">500</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Completed</span>
        <span class="text-xl font-bold tabular-nums text-success">0</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Remaining</span>
        <span class="text-xl font-bold tabular-nums text-base-content/60">500</span>
      </div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="flex items-center justify-between">
        <span class="text-sm text-base-content/60">Progress</span>
        <span class="text-sm font-semibold tabular-nums">0%</span>
      </div>
      <div class="w-full h-2 bg-base-200 rounded-field overflow-hidden">
        <div class="h-full bg-primary rounded-field" style="width: 0%"></div>
      </div>
    </div>
    <div class="flex items-center gap-1 text-sm text-base-content/60">
      <svg class="w-3.5 h-3.5 opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
      Due: Feb 15, 2026
    </div>
  </div>
  <!-- Actions -->
  <div class="flex items-center gap-2 p-4 pl-5 border-t border-base-300">
    <button class="flex-1 flex items-center justify-center gap-1 py-2 px-4 bg-primary text-white text-sm font-semibold rounded-lg hover:brightness-90 active:scale-98">
      <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      Start
    </button>
    <button class="flex-1 flex items-center justify-center gap-1 py-2 px-4 bg-base-300 text-base-content text-sm font-semibold rounded-lg hover:brightness-95 active:scale-98">Details</button>
  </div>
</div>

Requires: tw.min.css

// Toggle work order status
const wo = document.querySelector('.work-order');
const statusEl = wo.querySelector('.work-order-status');
const startBtn = wo.querySelector('.work-order-action-start');

startBtn.addEventListener('click', () => {
  statusEl.className = 'work-order-status work-order-status-in-progress work-order-status-pulse';
  statusEl.innerHTML = '<span class="work-order-status-dot"></span> In Progress';
  startBtn.textContent = 'Pause';
  startBtn.className = 'work-order-action work-order-action-pause';
});

In-Progress with Materials

Preview

ERPlora Servo Motor Controller

SKU: ERP-SMC-150

Target 200

Completed 134

Remaining 66

Progress 67%

Materials 3 items

PCB Board v3.2 134 / 200
Capacitor 100uF 268 / 400
Heat Sink AL-40 50 / 200 (shortage)

Started 2h ago

J. Martinez

<div class="work-order work-order-priority-normal">
  <div class="work-order-header">
    <div class="work-order-header-top">
      <h3 class="work-order-number">WO-2024-0912</h3>
      <span class="work-order-status work-order-status-in-progress work-order-status-pulse">
        <span class="work-order-status-dot"></span>
        In Progress
      </span>
    </div>
    <div class="work-order-product">
      <p class="work-order-product-name">ERPlora Servo Motor Controller</p>
      <span class="work-order-product-sku">SKU: ERP-SMC-150</span>
    </div>
  </div>
  <div class="work-order-content">
    <div class="work-order-quantities">
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Target</span>
        <span class="work-order-quantity-value">200</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Completed</span>
        <span class="work-order-quantity-value work-order-quantity-value-completed">134</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Remaining</span>
        <span class="work-order-quantity-value work-order-quantity-value-remaining">66</span>
      </div>
    </div>
    <div class="work-order-progress">
      <div class="work-order-progress-header">
        <span class="work-order-progress-label">Progress</span>
        <span class="work-order-progress-value">67%</span>
      </div>
      <div class="work-order-progress-bar">
        <div class="work-order-progress-fill" style="width: 67%"></div>
      </div>
    </div>
    <div class="work-order-materials">
      <div class="work-order-materials-header">
        Materials <span class="work-order-materials-count">3 items</span>
      </div>
      <ul class="work-order-materials-list">
        <li class="work-order-material">
          <span class="work-order-material-name">PCB Board v3.2</span>
          <span class="work-order-material-qty">134 / 200</span>
        </li>
        <li class="work-order-material">
          <span class="work-order-material-name">Capacitor 100uF</span>
          <span class="work-order-material-qty">268 / 400</span>
        </li>
        <li class="work-order-material work-order-material-shortage">
          <span class="work-order-material-name">Heat Sink AL-40</span>
          <span class="work-order-material-qty">50 / 200 (shortage)</span>
        </li>
      </ul>
    </div>
    <div class="work-order-meta">
      <div class="work-order-meta-item">
        <span class="work-order-meta-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span>
        Started 2h ago
      </div>
      <div class="work-order-meta-item">
        <span class="work-order-meta-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
        J. Martinez
      </div>
    </div>
  </div>
  <div class="work-order-actions">
    <button class="work-order-action work-order-action-pause">
      <span class="work-order-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></span>
      Pause
    </button>
    <button class="work-order-action work-order-action-complete">
      <span class="work-order-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></span>
      Complete
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex flex-col w-90 bg-base-100 rounded-box shadow-md overflow-hidden">
  <div class="absolute top-0 left-0 bottom-0 w-1 bg-primary"></div>
  <div class="flex flex-col gap-1 p-4 pl-5 border-b border-base-300">
    <div class="flex items-center justify-between gap-2">
      <h3 class="text-lg font-bold m-0 tabular-nums">WO-2024-0912</h3>
      <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2.5 py-1 bg-primary/10 text-primary tracking-wide">
        <span class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></span>
        In Progress
      </span>
    </div>
    <div class="flex flex-col gap-0.5 mt-1">
      <p class="text-base font-semibold m-0">ERPlora Servo Motor Controller</p>
      <span class="text-xs font-mono text-base-content/40">SKU: ERP-SMC-150</span>
    </div>
  </div>
  <div class="flex flex-col gap-4 p-4 pl-5">
    <div class="flex items-center gap-6">
      <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Target</span><span class="text-xl font-bold tabular-nums">200</span></div>
      <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Completed</span><span class="text-xl font-bold tabular-nums text-success">134</span></div>
      <div class="flex flex-col gap-0.5"><span class="text-xs uppercase text-base-content/40 tracking-wide">Remaining</span><span class="text-xl font-bold tabular-nums text-base-content/60">66</span></div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="flex items-center justify-between"><span class="text-sm text-base-content/60">Progress</span><span class="text-sm font-semibold tabular-nums">67%</span></div>
      <div class="w-full h-2 bg-base-200 rounded-field overflow-hidden"><div class="h-full bg-primary rounded-field" style="width: 67%"></div></div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="flex items-center justify-between text-sm font-semibold">Materials <span class="text-xs font-normal text-base-content/40">3 items</span></div>
      <div class="flex items-center justify-between text-sm p-1 px-2 bg-base-200 rounded-field"><span>PCB Board v3.2</span><span class="text-base-content/60 tabular-nums">134 / 200</span></div>
      <div class="flex items-center justify-between text-sm p-1 px-2 bg-base-200 rounded-field"><span>Capacitor 100uF</span><span class="text-base-content/60 tabular-nums">268 / 400</span></div>
      <div class="flex items-center justify-between text-sm p-1 px-2 bg-error/10 rounded-field"><span>Heat Sink AL-40</span><span class="text-error font-semibold tabular-nums">50 / 200</span></div>
    </div>
  </div>
  <div class="flex items-center gap-2 p-4 pl-5 border-t border-base-300">
    <button class="flex-1 flex items-center justify-center gap-1 py-2 px-4 bg-warning text-white text-sm font-semibold rounded-lg hover:brightness-90 active:scale-98">Pause</button>
    <button class="flex-1 flex items-center justify-center gap-1 py-2 px-4 bg-success text-white text-sm font-semibold rounded-lg hover:brightness-90 active:scale-98">Complete</button>
  </div>
</div>

Requires: tw.min.css

// Update progress dynamically
function updateProgress(woEl, completed, target) {
  const pct = Math.round((completed / target) * 100);
  woEl.querySelector('.work-order-progress-fill').style.width = pct + '%';
  woEl.querySelector('.work-order-progress-value').textContent = pct + '%';
  woEl.querySelector('.work-order-quantity-value-completed').textContent = completed;
  woEl.querySelector('.work-order-quantity-value-remaining').textContent = target - completed;
}

Priority Variants

Preview

ERPlora Rubber Gasket Set

Target 1000

LOW

ERPlora Precision Gear Assembly

Target 150

Completed 90

HIGH

ERPlora Emergency Brake Caliper

Target 50

Completed 12

Overdue: Jan 30, 2026

URGENT

<!-- Low Priority -->
<div class="work-order work-order-priority-low work-order-compact work-order-full">
  <div class="work-order-header">
    <div class="work-order-header-top">
      <h3 class="work-order-number">WO-2024-0801</h3>
      <span class="work-order-status work-order-status-pending">
        <span class="work-order-status-dot"></span>
        Pending
      </span>
    </div>
    <div class="work-order-product">
      <p class="work-order-product-name">ERPlora Rubber Gasket Set</p>
    </div>
  </div>
  <div class="work-order-content">
    <div class="work-order-quantities">
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Target</span>
        <span class="work-order-quantity-value">1000</span>
      </div>
    </div>
    <span class="work-order-priority work-order-priority-badge-low">LOW</span>
  </div>
</div>

<!-- High Priority -->
<div class="work-order work-order-priority-high work-order-compact work-order-full" style="margin-top: 0.75rem;">
  <div class="work-order-header">
    <div class="work-order-header-top">
      <h3 class="work-order-number">WO-2024-0830</h3>
      <span class="work-order-status work-order-status-in-progress work-order-status-pulse">
        <span class="work-order-status-dot"></span>
        In Progress
      </span>
    </div>
    <div class="work-order-product">
      <p class="work-order-product-name">ERPlora Precision Gear Assembly</p>
    </div>
  </div>
  <div class="work-order-content">
    <div class="work-order-quantities">
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Target</span>
        <span class="work-order-quantity-value">150</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Completed</span>
        <span class="work-order-quantity-value work-order-quantity-value-completed">90</span>
      </div>
    </div>
    <span class="work-order-priority work-order-priority-badge-high">
      <span class="work-order-priority-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></span>
      HIGH
    </span>
  </div>
</div>

<!-- Urgent Priority -->
<div class="work-order work-order-priority-urgent work-order-compact work-order-full" style="margin-top: 0.75rem;">
  <div class="work-order-header">
    <div class="work-order-header-top">
      <h3 class="work-order-number">WO-2024-0899</h3>
      <span class="work-order-status work-order-status-on-hold">
        <span class="work-order-status-dot"></span>
        On Hold
      </span>
    </div>
    <div class="work-order-product">
      <p class="work-order-product-name">ERPlora Emergency Brake Caliper</p>
    </div>
  </div>
  <div class="work-order-content">
    <div class="work-order-quantities">
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Target</span>
        <span class="work-order-quantity-value">50</span>
      </div>
      <div class="work-order-quantity">
        <span class="work-order-quantity-label">Completed</span>
        <span class="work-order-quantity-value work-order-quantity-value-completed">12</span>
      </div>
    </div>
    <div class="work-order-due-date work-order-due-date-overdue">
      <span class="work-order-due-date-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></span>
      Overdue: Jan 30, 2026
    </div>
    <span class="work-order-priority work-order-priority-badge-urgent">
      <span class="work-order-priority-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></span>
      URGENT
    </span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-3">
  <!-- Low -->
  <div class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-base-300 text-xs font-semibold text-base-content/50">
    <span class="w-3 h-3 rounded-full bg-base-300"></span>
    LOW
  </div>
  <!-- Normal -->
  <div class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-primary/30 text-xs font-semibold text-primary bg-primary/5">
    <span class="w-3 h-3 rounded-full bg-primary"></span>
    NORMAL
  </div>
  <!-- High -->
  <div class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-warning/30 text-xs font-semibold text-warning bg-warning/5">
    <span class="w-3 h-3 rounded-full bg-warning"></span>
    HIGH
  </div>
  <!-- Urgent -->
  <div class="flex items-center gap-2 px-3 py-1.5 rounded-full border border-error/30 text-xs font-semibold text-error bg-error/5">
    <span class="w-3 h-3 rounded-full bg-error animate-pulse"></span>
    URGENT
  </div>
</div>

Requires: tw.min.css

// No JS needed — priority is controlled by CSS classes:
// .work-order-priority-low, .work-order-priority-normal,
// .work-order-priority-high, .work-order-priority-urgent

Glass Variant

Preview

ERPlora Titanium Shaft

SKU: ERP-TS-080

Target 300

Completed 240

Progress 80%

Materials 2 items

Titanium Rod Ti-6Al 240 / 300
Bearing Sleeve SS 240 / 300

<div style="background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1a4a6e 100%); padding: 2rem; border-radius: 1rem;">
  <div class="work-order work-order-priority-normal glass">
    <div class="work-order-header">
      <div class="work-order-header-top">
        <h3 class="work-order-number">WO-2024-0955</h3>
        <span class="work-order-status work-order-status-in-progress work-order-status-pulse">
          <span class="work-order-status-dot"></span>
          In Progress
        </span>
      </div>
      <div class="work-order-product">
        <p class="work-order-product-name">ERPlora Titanium Shaft</p>
        <span class="work-order-product-sku">SKU: ERP-TS-080</span>
      </div>
    </div>
    <div class="work-order-content">
      <div class="work-order-quantities">
        <div class="work-order-quantity">
          <span class="work-order-quantity-label">Target</span>
          <span class="work-order-quantity-value">300</span>
        </div>
        <div class="work-order-quantity">
          <span class="work-order-quantity-label">Completed</span>
          <span class="work-order-quantity-value work-order-quantity-value-completed">240</span>
        </div>
      </div>
      <div class="work-order-progress">
        <div class="work-order-progress-header">
          <span class="work-order-progress-label">Progress</span>
          <span class="work-order-progress-value">80%</span>
        </div>
        <div class="work-order-progress-bar">
          <div class="work-order-progress-fill work-order-progress-fill-success" style="width: 80%"></div>
        </div>
      </div>
      <div class="work-order-materials">
        <div class="work-order-materials-header">
          Materials <span class="work-order-materials-count">2 items</span>
        </div>
        <ul class="work-order-materials-list">
          <li class="work-order-material">
            <span class="work-order-material-name">Titanium Rod Ti-6Al</span>
            <span class="work-order-material-qty">240 / 300</span>
          </li>
          <li class="work-order-material">
            <span class="work-order-material-name">Bearing Sleeve SS</span>
            <span class="work-order-material-qty">240 / 300</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="work-order-actions">
      <button class="work-order-action work-order-action-complete">
        <span class="work-order-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></span>
        Complete
      </button>
      <button class="work-order-action work-order-action-secondary">Details</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1a4a6e 100%); padding: 2rem; border-radius: 1rem;">
  <div class="glass rounded-box overflow-hidden flex flex-col" style="border-left: 4px solid var(--color-primary);">
    <div class="p-5 border-b" style="border-color: rgba(255,255,255,0.12);">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold text-lg text-white m-0">WO-2024-0955</h3>
        <span class="inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/20 text-primary">
          <span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
          In Progress
        </span>
      </div>
      <p class="font-medium text-white/90 text-sm m-0">ERPlora Titanium Shaft</p>
      <span class="text-xs text-white/50">SKU: ERP-TS-080</span>
    </div>
    <div class="p-5 flex flex-col gap-4">
      <div class="flex gap-6">
        <div><span class="text-xs text-white/50 block">Target</span><span class="text-lg font-bold text-white">300</span></div>
        <div><span class="text-xs text-white/50 block">Completed</span><span class="text-lg font-bold text-success">240</span></div>
      </div>
      <div>
        <div class="flex justify-between text-xs text-white/60 mb-1"><span>Progress</span><span>80%</span></div>
        <div class="h-2 rounded-full overflow-hidden" style="background: rgba(255,255,255,0.15);"><div class="h-full bg-success rounded-full" style="width: 80%;"></div></div>
      </div>
    </div>
    <div class="flex gap-2 p-4 border-t" style="border-color: rgba(255,255,255,0.12);">
      <button class="btn btn-sm color-success flex-1">Complete</button>
      <button class="btn btn-sm flex-1" style="color: white;">Details</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JS needed — glass is a CSS-only variant

Classes Reference

Class	Description
`.work-order`	Main container with card styling and left priority strip
`.work-order-priority-low`	Low priority (muted strip)
`.work-order-priority-normal`	Normal priority (primary color strip)
`.work-order-priority-high`	High priority (warning color strip)
`.work-order-priority-urgent`	Urgent priority (error color strip with pulse animation and outer ring)
`.work-order-header`	Header section with number, status, and product info
`.work-order-number`	Work order number heading
`.work-order-status`	Status badge pill
`.work-order-status-pending`	Pending state styling
`.work-order-status-in-progress`	In-progress state styling (primary color)
`.work-order-status-completed`	Completed state styling (success color)
`.work-order-status-on-hold`	On-hold state styling (warning color)
`.work-order-status-pulse`	Adds pulse animation to the status dot
`.work-order-content`	Main content area
`.work-order-quantities`	Row of target / completed / remaining values
`.work-order-progress`	Progress section with bar
`.work-order-progress-fill-success`	Green progress bar fill
`.work-order-progress-fill-warning`	Yellow progress bar fill
`.work-order-materials`	Materials / BOM section
`.work-order-material-shortage`	Highlights a material row with shortage
`.work-order-due-date`	Due date display
`.work-order-due-date-overdue`	Overdue styling (error color)
`.work-order-due-date-warning`	Due soon styling (warning color)
`.work-order-actions`	Footer action buttons row
`.work-order-action-start`	Start button (primary)
`.work-order-action-pause`	Pause button (warning)
`.work-order-action-complete`	Complete button (success)
`.work-order-action-secondary`	Secondary action button
`.work-order-compact`	Compact variant with reduced padding and hidden materials
`.work-order-detailed`	Wider detailed variant (420px)
`.work-order-full`	Full-width variant
`.work-order.glass`	Glass morphism variant
`.work-order-grid`	Auto-fill responsive grid for multiple work orders
`.work-order-column`	Kanban-style column container