Batch Tracker

Manufacturing batch tracking cards with progress bars, quantity stats, timeline, status badges, QR codes, and list views. Built for ERPlora production workflows.

Batch Card with Progress

Preview

BATCH-2026-0042

ERPlora Hydraulic Valve Assembly

In Progress

Start Date 2026-02-03

Due Date 2026-02-10

Work Order WO-7821

Line Assembly Line 3

Quantity

500 Planned

342 Produced

8 Rejected

97.7% Yield

Operator: M. Torres Updated 12 min ago

<div class="batch-card">
  <div class="batch-card-header">
    <div class="batch-card-title-group">
      <h3 class="batch-card-batch-number">BATCH-2026-0042</h3>
      <p class="batch-card-product-name">ERPlora Hydraulic Valve Assembly</p>
    </div>
    <span class="batch-status batch-status-in-progress">
      <span class="batch-status-dot"></span>
      In Progress
    </span>
  </div>
  <div class="batch-card-body">
    <div class="batch-info">
      <div class="batch-info-item">
        <span class="batch-info-label">Start Date</span>
        <span class="batch-info-value">2026-02-03</span>
      </div>
      <div class="batch-info-item">
        <span class="batch-info-label">Due Date</span>
        <span class="batch-info-value batch-info-value-warning">2026-02-10</span>
      </div>
      <div class="batch-info-item">
        <span class="batch-info-label">Work Order</span>
        <span class="batch-info-value batch-info-value-mono">WO-7821</span>
      </div>
      <div class="batch-info-item">
        <span class="batch-info-label">Line</span>
        <span class="batch-info-value">Assembly Line 3</span>
      </div>
    </div>
    <div class="batch-quantity">
      <div class="batch-quantity-header">
        <span class="batch-quantity-title">Quantity</span>
      </div>
      <div class="batch-quantity-values">
        <div class="batch-quantity-stat">
          <span class="batch-quantity-stat-value batch-quantity-stat-value-initial">500</span>
          <span class="batch-quantity-stat-label">Planned</span>
        </div>
        <div class="batch-quantity-stat">
          <span class="batch-quantity-stat-value batch-quantity-stat-value-current">342</span>
          <span class="batch-quantity-stat-label">Produced</span>
        </div>
        <div class="batch-quantity-stat">
          <span class="batch-quantity-stat-value batch-quantity-stat-value-rejected">8</span>
          <span class="batch-quantity-stat-label">Rejected</span>
        </div>
        <div class="batch-quantity-stat">
          <span class="batch-quantity-stat-value batch-quantity-stat-value-yield">97.7%</span>
          <span class="batch-quantity-stat-label">Yield</span>
        </div>
      </div>
      <div class="batch-quantity-bar">
        <div class="batch-quantity-bar-segment batch-quantity-bar-segment-good" style="width: 66.8%"></div>
        <div class="batch-quantity-bar-segment batch-quantity-bar-segment-rejected" style="width: 1.6%"></div>
        <div class="batch-quantity-bar-segment batch-quantity-bar-segment-remaining" style="width: 31.6%"></div>
      </div>
    </div>
  </div>
  <div class="batch-card-footer">
    <span class="batch-info-label">Operator: M. Torres</span>
    <span class="batch-info-label">Updated 12 min ago</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col bg-base-100 border border-base-300 rounded-box p-6">
  <div class="flex items-start justify-between gap-4 mb-6">
    <div class="flex-1 min-w-0">
      <h3 class="text-xl font-bold font-mono m-0 mb-1 tracking-wide">BATCH-2026-0042</h3>
      <p class="text-sm m-0 text-base-content/60">ERPlora Hydraulic Valve Assembly</p>
    </div>
    <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-primary/15 text-primary tracking-wide">
      <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
      In Progress
    </span>
  </div>
  <div class="flex flex-col gap-4">
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Start Date</span>
        <span class="text-base font-medium">2026-02-03</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Due Date</span>
        <span class="text-base font-medium text-warning">2026-02-10</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Work Order</span>
        <span class="text-base font-medium font-mono">WO-7821</span>
      </div>
      <div class="flex flex-col gap-0.5">
        <span class="text-xs uppercase text-base-content/40 tracking-wide">Line</span>
        <span class="text-base font-medium">Assembly Line 3</span>
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <span class="text-sm font-semibold">Quantity</span>
      <div class="flex gap-6 text-sm">
        <div class="flex flex-col items-center gap-0.5">
          <span class="text-lg font-bold font-mono">500</span>
          <span class="text-xs text-base-content/40">Planned</span>
        </div>
        <div class="flex flex-col items-center gap-0.5">
          <span class="text-lg font-bold font-mono text-primary">342</span>
          <span class="text-xs text-base-content/40">Produced</span>
        </div>
        <div class="flex flex-col items-center gap-0.5">
          <span class="text-lg font-bold font-mono text-error">8</span>
          <span class="text-xs text-base-content/40">Rejected</span>
        </div>
        <div class="flex flex-col items-center gap-0.5">
          <span class="text-lg font-bold font-mono text-success">97.7%</span>
          <span class="text-xs text-base-content/40">Yield</span>
        </div>
      </div>
      <div class="flex h-2 bg-base-200 rounded-full overflow-hidden">
        <div class="h-full bg-success" style="width: 66.8%"></div>
        <div class="h-full bg-error" style="width: 1.6%"></div>
        <div class="h-full bg-base-300" style="width: 31.6%"></div>
      </div>
    </div>
  </div>
  <div class="flex items-center justify-between gap-4 mt-6 pt-4 border-t border-base-300">
    <span class="text-xs uppercase text-base-content/40 tracking-wide">Operator: M. Torres</span>
    <span class="text-xs uppercase text-base-content/40 tracking-wide">Updated 12 min ago</span>
  </div>
</div>

Requires: tw.min.css

// Update batch progress dynamically
function updateBatchProgress(batchEl, produced, rejected, planned) {
  const goodPct = ((produced - rejected) / planned * 100).toFixed(1);
  const rejPct = (rejected / planned * 100).toFixed(1);
  const remPct = (100 - parseFloat(goodPct) - parseFloat(rejPct)).toFixed(1);

  const segments = batchEl.querySelectorAll('.batch-quantity-bar-segment');
  segments[0].style.width = goodPct + '%';
  segments[1].style.width = rejPct + '%';
  segments[2].style.width = remPct + '%';
}

Batch Timeline

Preview

BATCH-2026-0039

ERPlora Precision Bearing Kit

QC Review

Materials Received

Feb 1, 2026 - 08:15

Raw steel and polymer compounds verified by warehouse

Production Started

Feb 2, 2026 - 06:00

Production Completed

Feb 5, 2026 - 17:30

1,200 units produced, 15 rejected during machining

Quality Control

Feb 6, 2026 - 09:00

Dimensional inspection in progress - 60% complete

Packaging

Estimated: Feb 7, 2026

Shipment

Estimated: Feb 8, 2026

<div class="batch-card">
  <div class="batch-card-header">
    <div class="batch-card-title-group">
      <h3 class="batch-card-batch-number">BATCH-2026-0039</h3>
      <p class="batch-card-product-name">ERPlora Precision Bearing Kit</p>
    </div>
    <span class="batch-status batch-status-qc">
      <span class="batch-status-dot"></span>
      QC Review
    </span>
  </div>
  <div class="batch-card-body">
    <div class="batch-timeline">
      <div class="batch-timeline-item batch-timeline-item-completed">
        <div class="batch-timeline-marker">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Materials Received</h4>
          <span class="batch-timeline-time">Feb 1, 2026 - 08:15</span>
          <p class="batch-timeline-description">Raw steel and polymer compounds verified by warehouse</p>
        </div>
      </div>
      <div class="batch-timeline-item batch-timeline-item-completed">
        <div class="batch-timeline-marker">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Production Started</h4>
          <span class="batch-timeline-time">Feb 2, 2026 - 06:00</span>
        </div>
      </div>
      <div class="batch-timeline-item batch-timeline-item-completed">
        <div class="batch-timeline-marker">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Production Completed</h4>
          <span class="batch-timeline-time">Feb 5, 2026 - 17:30</span>
          <p class="batch-timeline-description">1,200 units produced, 15 rejected during machining</p>
        </div>
      </div>
      <div class="batch-timeline-item batch-timeline-item-active">
        <div class="batch-timeline-marker">
          <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="3"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Quality Control</h4>
          <span class="batch-timeline-time">Feb 6, 2026 - 09:00</span>
          <p class="batch-timeline-description">Dimensional inspection in progress - 60% complete</p>
        </div>
      </div>
      <div class="batch-timeline-item batch-timeline-item-pending">
        <div class="batch-timeline-marker">
          <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="1"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Packaging</h4>
          <span class="batch-timeline-time">Estimated: Feb 7, 2026</span>
        </div>
      </div>
      <div class="batch-timeline-item batch-timeline-item-pending">
        <div class="batch-timeline-marker">
          <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="1"/></svg>
        </div>
        <div class="batch-timeline-content">
          <h4 class="batch-timeline-title">Shipment</h4>
          <span class="batch-timeline-time">Estimated: Feb 8, 2026</span>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col bg-base-100 border border-base-300 rounded-box p-6">
  <div class="flex items-start justify-between gap-4 mb-6">
    <div class="flex-1 min-w-0">
      <h3 class="text-xl font-bold font-mono m-0 mb-1 tracking-wide">BATCH-2026-0039</h3>
      <p class="text-sm m-0 text-base-content/60">ERPlora Precision Bearing Kit</p>
    </div>
    <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-warning/15 text-warning tracking-wide">
      <span class="w-2 h-2 rounded-full bg-warning animate-pulse"></span>
      QC Review
    </span>
  </div>
  <div class="relative pl-10">
    <div class="absolute left-[11px] top-6 bottom-6 w-0.5 bg-base-300"></div>
    <!-- Completed step -->
    <div class="relative pb-6">
      <div class="absolute -left-10 top-0 w-6 h-6 rounded-full bg-success border-2 border-success flex items-center justify-center z-[1]">
        <svg class="w-3.5 h-3.5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg>
      </div>
      <div class="flex flex-col gap-0.5">
        <h4 class="text-sm font-semibold m-0">Materials Received</h4>
        <span class="text-xs text-base-content/40">Feb 1, 2026 - 08:15</span>
        <p class="text-xs text-base-content/60 mt-1 m-0">Raw steel and polymer compounds verified by warehouse</p>
      </div>
    </div>
    <!-- Active step -->
    <div class="relative pb-6">
      <div class="absolute -left-10 top-0 w-6 h-6 rounded-full bg-primary border-2 border-primary flex items-center justify-center z-[1] shadow-[0_0_0_4px_rgba(59,130,246,0.2)]">
        <svg class="w-3.5 h-3.5 text-white" 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="3"/></svg>
      </div>
      <div class="flex flex-col gap-0.5">
        <h4 class="text-sm font-semibold m-0">Quality Control</h4>
        <span class="text-xs text-base-content/40">Feb 6, 2026 - 09:00</span>
        <p class="text-xs text-base-content/60 mt-1 m-0">Dimensional inspection in progress - 60% complete</p>
      </div>
    </div>
    <!-- Pending step -->
    <div class="relative">
      <div class="absolute -left-10 top-0 w-6 h-6 rounded-full bg-base-100 border-2 border-base-300 flex items-center justify-center z-[1]">
        <svg class="w-3.5 h-3.5 text-base-content/40" 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="1"/></svg>
      </div>
      <div class="flex flex-col gap-0.5">
        <h4 class="text-sm font-semibold m-0 text-base-content/40">Shipment</h4>
        <span class="text-xs text-base-content/40">Estimated: Feb 8, 2026</span>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Advance timeline to next step
function advanceTimeline(batchEl) {
  const items = batchEl.querySelectorAll('.batch-timeline-item');
  const active = batchEl.querySelector('.batch-timeline-item-active');
  if (!active) return;

  active.classList.remove('batch-timeline-item-active');
  active.classList.add('batch-timeline-item-completed');

  const next = active.nextElementSibling;
  if (next) {
    next.classList.remove('batch-timeline-item-pending');
    next.classList.add('batch-timeline-item-active');
  }
}

Batch List View

Preview

Done

BATCH-2026-0038

ERPlora Motor Housing - Aluminum

2,000 units Completed Feb 1

Active

BATCH-2026-0042

ERPlora Hydraulic Valve Assembly

342 / 500 Due Feb 10

BATCH-2026-0039

ERPlora Precision Bearing Kit

1,185 units QC since Feb 6

Rejected

BATCH-2026-0035

ERPlora Sensor Module PCB

0 / 800 Rejected Jan 29

Created

BATCH-2026-0045

ERPlora Cooling Fan Blade Set

750 units Scheduled Feb 12

<div class="batch-list">
  <div class="batch-list-item">
    <span class="batch-status batch-status-completed">
      <span class="batch-status-dot"></span>
      Done
    </span>
    <div class="batch-list-item-main">
      <div class="batch-list-item-batch">BATCH-2026-0038</div>
      <div class="batch-list-item-product">ERPlora Motor Housing - Aluminum</div>
    </div>
    <div class="batch-list-item-meta">
      <span class="batch-list-item-qty">2,000 units</span>
      <span class="batch-list-item-date">Completed Feb 1</span>
    </div>
  </div>
  <div class="batch-list-item">
    <span class="batch-status batch-status-in-progress">
      <span class="batch-status-dot"></span>
      Active
    </span>
    <div class="batch-list-item-main">
      <div class="batch-list-item-batch">BATCH-2026-0042</div>
      <div class="batch-list-item-product">ERPlora Hydraulic Valve Assembly</div>
    </div>
    <div class="batch-list-item-meta">
      <span class="batch-list-item-qty">342 / 500</span>
      <span class="batch-list-item-date">Due Feb 10</span>
    </div>
  </div>
  <div class="batch-list-item">
    <span class="batch-status batch-status-qc">
      <span class="batch-status-dot"></span>
      QC
    </span>
    <div class="batch-list-item-main">
      <div class="batch-list-item-batch">BATCH-2026-0039</div>
      <div class="batch-list-item-product">ERPlora Precision Bearing Kit</div>
    </div>
    <div class="batch-list-item-meta">
      <span class="batch-list-item-qty">1,185 units</span>
      <span class="batch-list-item-date">QC since Feb 6</span>
    </div>
  </div>
  <div class="batch-list-item">
    <span class="batch-status batch-status-rejected">
      <span class="batch-status-dot"></span>
      Rejected
    </span>
    <div class="batch-list-item-main">
      <div class="batch-list-item-batch">BATCH-2026-0035</div>
      <div class="batch-list-item-product">ERPlora Sensor Module PCB</div>
    </div>
    <div class="batch-list-item-meta">
      <span class="batch-list-item-qty">0 / 800</span>
      <span class="batch-list-item-date">Rejected Jan 29</span>
    </div>
  </div>
  <div class="batch-list-item">
    <span class="batch-status batch-status-created">
      <span class="batch-status-dot"></span>
      Created
    </span>
    <div class="batch-list-item-main">
      <div class="batch-list-item-batch">BATCH-2026-0045</div>
      <div class="batch-list-item-product">ERPlora Cooling Fan Blade Set</div>
    </div>
    <div class="batch-list-item-meta">
      <span class="batch-list-item-qty">750 units</span>
      <span class="batch-list-item-date">Scheduled Feb 12</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-4 p-4 bg-base-100 border border-base-300 rounded-field cursor-pointer hover:border-primary hover:shadow-sm transition-all">
    <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-success/15 text-success tracking-wide">
      <span class="w-2 h-2 rounded-full bg-success"></span>
      Done
    </span>
    <div class="flex-1 min-w-0">
      <div class="text-base font-semibold font-mono">BATCH-2026-0038</div>
      <div class="text-sm text-base-content/60">ERPlora Motor Housing - Aluminum</div>
    </div>
    <div class="flex flex-col items-end gap-0.5">
      <span class="text-sm font-medium">2,000 units</span>
      <span class="text-xs text-base-content/40">Completed Feb 1</span>
    </div>
  </div>
  <div class="flex items-center gap-4 p-4 bg-base-100 border border-base-300 rounded-field cursor-pointer hover:border-primary hover:shadow-sm transition-all">
    <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-primary/15 text-primary tracking-wide">
      <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
      Active
    </span>
    <div class="flex-1 min-w-0">
      <div class="text-base font-semibold font-mono">BATCH-2026-0042</div>
      <div class="text-sm text-base-content/60">ERPlora Hydraulic Valve Assembly</div>
    </div>
    <div class="flex flex-col items-end gap-0.5">
      <span class="text-sm font-medium">342 / 500</span>
      <span class="text-xs text-base-content/40">Due Feb 10</span>
    </div>
  </div>
  <div class="flex items-center gap-4 p-4 bg-base-100 border border-base-300 rounded-field cursor-pointer hover:border-primary hover:shadow-sm transition-all">
    <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-error/15 text-error tracking-wide">
      <span class="w-2 h-2 rounded-full bg-error"></span>
      Rejected
    </span>
    <div class="flex-1 min-w-0">
      <div class="text-base font-semibold font-mono">BATCH-2026-0035</div>
      <div class="text-sm text-base-content/60">ERPlora Sensor Module PCB</div>
    </div>
    <div class="flex flex-col items-end gap-0.5">
      <span class="text-sm font-medium">0 / 800</span>
      <span class="text-xs text-base-content/40">Rejected Jan 29</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// Filter batch list by status
function filterBatches(status) {
  document.querySelectorAll('.batch-list-item').forEach(item => {
    const badge = item.querySelector('.batch-status');
    const matches = !status || badge.classList.contains('batch-status-' + status);
    item.style.display = matches ? '' : 'none';
  });
}

Status Badges

Preview

Created In Progress QC Review Completed Shipped Rejected Quarantine

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
  <span class="batch-status batch-status-created">
    <span class="batch-status-dot"></span>
    Created
  </span>
  <span class="batch-status batch-status-in-progress">
    <span class="batch-status-dot"></span>
    In Progress
  </span>
  <span class="batch-status batch-status-qc">
    <span class="batch-status-dot"></span>
    QC Review
  </span>
  <span class="batch-status batch-status-completed">
    <span class="batch-status-dot"></span>
    Completed
  </span>
  <span class="batch-status batch-status-shipped">
    <span class="batch-status-dot"></span>
    Shipped
  </span>
  <span class="batch-status batch-status-rejected">
    <span class="batch-status-dot"></span>
    Rejected
  </span>
  <span class="batch-status batch-status-quarantine">
    <span class="batch-status-dot"></span>
    Quarantine
  </span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-base-content/10 text-base-content/60 tracking-wide">
    <span class="w-2 h-2 rounded-full bg-base-content/50"></span>
    Created
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-primary/15 text-primary tracking-wide">
    <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
    In Progress
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-warning/15 text-warning tracking-wide">
    <span class="w-2 h-2 rounded-full bg-warning animate-pulse"></span>
    QC Review
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-success/15 text-success tracking-wide">
    <span class="w-2 h-2 rounded-full bg-success"></span>
    Completed
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-info/15 text-info tracking-wide">
    <span class="w-2 h-2 rounded-full bg-info"></span>
    Shipped
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-error/15 text-error tracking-wide">
    <span class="w-2 h-2 rounded-full bg-error"></span>
    Rejected
  </span>
  <span class="inline-flex items-center gap-1 text-xs font-semibold uppercase rounded-full px-2 py-1 bg-accent/15 text-accent tracking-wide">
    <span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
    Quarantine
  </span>
</div>

Requires: tw.min.css

// No JS needed — status badges are CSS-only

Classes Reference

Class	Description
`.batch-card`	Main batch card container
`.batch-card-header`	Header row with title and status
`.batch-card-title-group`	Wrapper for batch number and product name
`.batch-card-batch-number`	Monospace batch ID heading
`.batch-card-product-name`	Secondary product name text
`.batch-card-qr`	QR code placeholder area
`.batch-card-body`	Main content area
`.batch-card-footer`	Footer with border-top separator
`.batch-status`	Status badge base class
`.batch-status-dot`	Animated dot inside status badge
`.batch-status-created`	Gray status for created batches
`.batch-status-in-progress`	Primary color, pulsing dot
`.batch-status-qc`	Warning color for QC review
`.batch-status-completed`	Success color, static dot
`.batch-status-shipped`	Info/cyan color for shipped
`.batch-status-rejected`	Error color for rejected batches
`.batch-status-quarantine`	Accent/purple color, pulsing dot
`.batch-info`	Auto-fit grid for info key-value pairs
`.batch-info-item`	Single info item container
`.batch-info-label`	Uppercase label text
`.batch-info-value`	Value text
`.batch-info-value-mono`	Monospace value modifier
`.batch-info-value-danger`	Error-colored value
`.batch-info-value-warning`	Warning-colored value
`.batch-info-value-success`	Success-colored value
`.batch-quantity`	Quantity section container
`.batch-quantity-bar`	Stacked progress bar track
`.batch-quantity-bar-segment-good`	Green segment (produced)
`.batch-quantity-bar-segment-rejected`	Red segment (rejected)
`.batch-quantity-bar-segment-remaining`	Gray segment (remaining)
`.batch-timeline`	Vertical timeline container
`.batch-timeline-item`	Single timeline step
`.batch-timeline-item-completed`	Green marker for completed steps
`.batch-timeline-item-active`	Primary color marker with glow ring
`.batch-timeline-item-error`	Red marker for error steps
`.batch-timeline-item-pending`	Dimmed text for pending steps
`.batch-timeline-marker`	Circle marker on the timeline
`.batch-list`	Batch list container
`.batch-list-item`	Clickable list row with hover effect
`.batch-list-item-main`	Main content area of list row
`.batch-list-item-batch`	Batch number in list row
`.batch-list-item-product`	Product name in list row
`.batch-list-item-meta`	Right-aligned quantity and date