Machine Status

Industrial equipment monitoring card with real-time status indicators, performance metrics, uptime tracking, alerts, and operator assignment.

Running Machine

Preview

CNC Lathe A1 #MCH-042

ERPlora Plant 1 — Bay 3

Running

Current Job

WO-2024-0912 — ERPlora Servo Shaft

134 / 200 units ETA: 3h 20m

67% complete Started 2h ago

98.2% OEE

1,240rpm Speed

72°C Temp

Jorge Martinez

CNC Operator

Shift A

<div class="machine-status">
  <div class="machine-status-header">
    <div class="machine-status-info">
      <h3 class="machine-status-name">
        CNC Lathe A1
        <span class="machine-status-id">#MCH-042</span>
      </h3>
      <div class="machine-status-location">ERPlora Plant 1 — Bay 3</div>
    </div>
    <div class="machine-status-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="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    </div>
  </div>
  <div class="machine-status-indicator machine-status-indicator-running">
    <span class="machine-status-indicator-dot"></span>
    Running
  </div>
  <div class="machine-status-job">
    <span class="machine-status-job-label">Current Job</span>
    <h4 class="machine-status-job-name">WO-2024-0912 — ERPlora Servo Shaft</h4>
    <div class="machine-status-job-details">
      <span>134 / 200 units</span>
      <span>ETA: 3h 20m</span>
    </div>
    <div class="machine-status-job-progress">
      <div class="machine-status-job-progress-bar">
        <div class="machine-status-job-progress-fill" style="width: 67%"></div>
      </div>
      <div class="machine-status-job-progress-label">
        <span>67% complete</span>
        <span>Started 2h ago</span>
      </div>
    </div>
  </div>
  <div class="machine-status-metrics">
    <div class="machine-status-metric machine-status-metric-success">
      <span class="machine-status-metric-value">98.2<span class="machine-status-metric-unit">%</span></span>
      <span class="machine-status-metric-label">OEE</span>
    </div>
    <div class="machine-status-metric">
      <span class="machine-status-metric-value">1,240<span class="machine-status-metric-unit">rpm</span></span>
      <span class="machine-status-metric-label">Speed</span>
    </div>
    <div class="machine-status-metric">
      <span class="machine-status-metric-value">72<span class="machine-status-metric-unit">&deg;C</span></span>
      <span class="machine-status-metric-label">Temp</span>
    </div>
  </div>
  <div class="machine-status-operator">
    <div class="machine-status-operator-avatar">JM</div>
    <div class="machine-status-operator-info">
      <div class="machine-status-operator-name">Jorge Martinez</div>
      <div class="machine-status-operator-role">CNC Operator</div>
    </div>
    <span class="machine-status-operator-shift">Shift A</span>
  </div>
  <div class="machine-status-footer">
    <span class="machine-status-last-update">Updated 30s ago</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-6 bg-base-100 border border-base-300 rounded-box hover:-translate-y-0.5 hover:shadow-lg transition-all">
  <div class="flex items-start justify-between gap-4">
    <div class="flex-1 min-w-0">
      <h3 class="text-lg font-semibold m-0 flex items-center gap-2">CNC Lathe A1 <span class="text-sm font-normal text-base-content/40">#MCH-042</span></h3>
      <div class="text-sm text-base-content/60 mt-1">ERPlora Plant 1 — Bay 3</div>
    </div>
    <div class="flex items-center justify-center shrink-0 w-12 h-12 bg-base-200 rounded-field text-primary">
      <svg class="w-6 h-6" 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"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    </div>
  </div>
  <span class="inline-flex items-center gap-1 text-sm font-medium rounded-full py-1 px-2 bg-success/10 text-success w-fit">
    <span class="relative w-3 h-3 rounded-full bg-success"><span class="absolute inset-0 rounded-full bg-success animate-ping"></span></span>
    Running
  </span>
  <div class="flex flex-col gap-1 p-4 bg-base-200 rounded-field">
    <span class="text-xs uppercase text-base-content/40 tracking-wide">Current Job</span>
    <h4 class="text-base font-semibold m-0">WO-2024-0912 — ERPlora Servo Shaft</h4>
    <div class="flex items-center flex-wrap text-sm gap-4 text-base-content/60">
      <span>134 / 200 units</span><span>ETA: 3h 20m</span>
    </div>
    <div class="mt-2">
      <div class="h-1.5 bg-base-100 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width: 67%"></div></div>
      <div class="flex justify-between text-xs text-base-content/40 mt-1"><span>67% complete</span><span>Started 2h ago</span></div>
    </div>
  </div>
  <div class="grid grid-cols-3 gap-2">
    <div class="flex flex-col items-center text-center p-2 bg-base-200 rounded-field"><span class="text-lg font-bold text-success tabular-nums">98.2<span class="text-xs font-normal text-base-content/60">%</span></span><span class="text-xs text-base-content/40 mt-1">OEE</span></div>
    <div class="flex flex-col items-center text-center p-2 bg-base-200 rounded-field"><span class="text-lg font-bold tabular-nums">1,240<span class="text-xs font-normal text-base-content/60">rpm</span></span><span class="text-xs text-base-content/40 mt-1">Speed</span></div>
    <div class="flex flex-col items-center text-center p-2 bg-base-200 rounded-field"><span class="text-lg font-bold tabular-nums">72<span class="text-xs font-normal text-base-content/60">&deg;C</span></span><span class="text-xs text-base-content/40 mt-1">Temp</span></div>
  </div>
  <div class="flex items-center gap-2 pt-2 border-t border-base-300">
    <div class="flex items-center justify-center shrink-0 w-8 h-8 bg-primary text-white text-sm font-semibold rounded-full">JM</div>
    <div class="flex-1 min-w-0"><div class="text-sm font-medium truncate">Jorge Martinez</div><div class="text-xs text-base-content/40">CNC Operator</div></div>
    <span class="text-xs px-1 py-0.5 bg-base-200 rounded-field text-base-content/60">Shift A</span>
  </div>
  <div class="flex items-center justify-between text-xs pt-2 border-t border-base-300 text-base-content/40"><span>Updated 30s ago</span></div>
</div>

Requires: tw.min.css

// Poll machine status
async function pollMachineStatus(machineId) {
  const res = await fetch('/api/machines/' + machineId + '/status');
  const data = await res.json();
  const el = document.querySelector('[data-machine="' + machineId + '"]');
  const indicator = el.querySelector('.machine-status-indicator');
  indicator.className = 'machine-status-indicator machine-status-indicator-' + data.status;
  indicator.querySelector('.machine-status-indicator-dot').className =
    'machine-status-indicator-dot';
  el.querySelector('.machine-status-last-update').textContent = 'Updated just now';
}
// setInterval(() => pollMachineStatus('MCH-042'), 30000);

Stopped & Maintenance States

Preview

Press B2

ERPlora Plant 2

Offline

0rpm Speed

22°C Temp

No operator assigned

Welder C4

ERPlora Plant 1

Maintenance

Scheduled maintenance — bearing replacement 2h left

Ana Rodriguez

Maintenance Tech

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <!-- Stopped / Offline -->
  <div class="machine-status" style="width: 280px;">
    <div class="machine-status-header">
      <div class="machine-status-info">
        <h3 class="machine-status-name">Press B2</h3>
        <div class="machine-status-location">ERPlora Plant 2</div>
      </div>
    </div>
    <div class="machine-status-indicator machine-status-indicator-offline">
      <span class="machine-status-indicator-dot"></span>
      Offline
    </div>
    <div class="machine-status-metrics">
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">0<span class="machine-status-metric-unit">rpm</span></span>
        <span class="machine-status-metric-label">Speed</span>
      </div>
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">22<span class="machine-status-metric-unit">&deg;C</span></span>
        <span class="machine-status-metric-label">Temp</span>
      </div>
    </div>
    <div class="machine-status-operator machine-status-operator-empty">No operator assigned</div>
  </div>

  <!-- Maintenance -->
  <div class="machine-status" style="width: 280px;">
    <div class="machine-status-header">
      <div class="machine-status-info">
        <h3 class="machine-status-name">Welder C4</h3>
        <div class="machine-status-location">ERPlora Plant 1</div>
      </div>
    </div>
    <div class="machine-status-indicator machine-status-indicator-maintenance">
      <span class="machine-status-indicator-dot"></span>
      Maintenance
    </div>
    <div class="machine-status-alert machine-status-alert-warning">
      <span class="machine-status-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
      <span class="machine-status-alert-text">Scheduled maintenance — bearing replacement</span>
      <span class="machine-status-alert-time">2h left</span>
    </div>
    <div class="machine-status-operator">
      <div class="machine-status-operator-avatar">AR</div>
      <div class="machine-status-operator-info">
        <div class="machine-status-operator-name">Ana Rodriguez</div>
        <div class="machine-status-operator-role">Maintenance Tech</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Use .machine-status-indicator-offline for stopped machines and
     .machine-status-indicator-maintenance with blinking dot for maintenance state. -->

Requires: tw.min.css

// No JS needed — status is controlled by CSS indicator classes

Error State with Alerts

Preview

Injection Molder D1 #MCH-107

ERPlora Plant 3 — Bay 1

Error — Stopped

Overtemperature fault — nozzle zone 3 5m ago

Hydraulic pressure low 12m ago

142°C Nozzle Temp

48bar Pressure

0rpm Screw Speed

<div class="machine-status" style="width: 320px;">
  <div class="machine-status-header">
    <div class="machine-status-info">
      <h3 class="machine-status-name">
        Injection Molder D1
        <span class="machine-status-id">#MCH-107</span>
      </h3>
      <div class="machine-status-location">ERPlora Plant 3 — Bay 1</div>
    </div>
    <div class="machine-status-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="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    </div>
  </div>
  <div class="machine-status-indicator machine-status-indicator-error">
    <span class="machine-status-indicator-dot"></span>
    Error — Stopped
  </div>
  <div class="machine-status-alerts">
    <div class="machine-status-alert machine-status-alert-error">
      <span class="machine-status-alert-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>
      <span class="machine-status-alert-text">Overtemperature fault — nozzle zone 3</span>
      <span class="machine-status-alert-time">5m ago</span>
    </div>
    <div class="machine-status-alert machine-status-alert-warning">
      <span class="machine-status-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
      <span class="machine-status-alert-text">Hydraulic pressure low</span>
      <span class="machine-status-alert-time">12m ago</span>
    </div>
  </div>
  <div class="machine-status-metrics">
    <div class="machine-status-metric machine-status-metric-danger">
      <span class="machine-status-metric-value">142<span class="machine-status-metric-unit">&deg;C</span></span>
      <span class="machine-status-metric-label">Nozzle Temp</span>
    </div>
    <div class="machine-status-metric machine-status-metric-warning">
      <span class="machine-status-metric-value">48<span class="machine-status-metric-unit">bar</span></span>
      <span class="machine-status-metric-label">Pressure</span>
    </div>
    <div class="machine-status-metric">
      <span class="machine-status-metric-value">0<span class="machine-status-metric-unit">rpm</span></span>
      <span class="machine-status-metric-label">Screw Speed</span>
    </div>
  </div>
  <div class="machine-status-footer">
    <span class="machine-status-last-update">Updated 5s ago</span>
    <div class="machine-status-actions">
      <button class="btn btn-sm btn-error btn-outline">Acknowledge</button>
      <button class="btn btn-sm">Details</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Use .machine-status-indicator-error for error state. The dot has a fast pulse animation.
     Combine with .machine-status-alerts for stacked alert banners. -->

Requires: tw.min.css

// Acknowledge an alert
document.querySelector('.machine-status-alert').addEventListener('click', (e) => {
  if (e.target.closest('button')) {
    e.target.closest('.machine-status-alert').remove();
  }
});

Machine Grid Layout

Preview

5 Running

2 Idle

1 Maintenance

1 Error

3 Offline

CNC Lathe A1

Running

98% OEE

72°C Temp

Press B2

Idle

0rpm Speed

22°C Temp

Welder C4

Maintenance

-- OEE

2h ETA

<div class="machine-status-bar" style="margin-bottom: 1rem;">
  <div class="machine-status-bar-item">
    <span class="machine-status-bar-dot machine-status-bar-dot-running"></span>
    <span class="machine-status-bar-count">5</span>
    <span class="machine-status-bar-label">Running</span>
  </div>
  <div class="machine-status-bar-item">
    <span class="machine-status-bar-dot machine-status-bar-dot-idle"></span>
    <span class="machine-status-bar-count">2</span>
    <span class="machine-status-bar-label">Idle</span>
  </div>
  <div class="machine-status-bar-item">
    <span class="machine-status-bar-dot machine-status-bar-dot-maintenance"></span>
    <span class="machine-status-bar-count">1</span>
    <span class="machine-status-bar-label">Maintenance</span>
  </div>
  <div class="machine-status-bar-item">
    <span class="machine-status-bar-dot machine-status-bar-dot-error"></span>
    <span class="machine-status-bar-count">1</span>
    <span class="machine-status-bar-label">Error</span>
  </div>
  <div class="machine-status-bar-item">
    <span class="machine-status-bar-dot machine-status-bar-dot-offline"></span>
    <span class="machine-status-bar-count">3</span>
    <span class="machine-status-bar-label">Offline</span>
  </div>
</div>

<div class="machine-grid machine-grid-3">
  <div class="machine-status machine-status-mini">
    <div class="machine-status-header">
      <div class="machine-status-info">
        <h3 class="machine-status-name">CNC Lathe A1</h3>
      </div>
    </div>
    <div class="machine-status-indicator machine-status-indicator-running">
      <span class="machine-status-indicator-dot"></span>
      Running
    </div>
    <div class="machine-status-metrics">
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">98<span class="machine-status-metric-unit">%</span></span>
        <span class="machine-status-metric-label">OEE</span>
      </div>
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">72<span class="machine-status-metric-unit">&deg;C</span></span>
        <span class="machine-status-metric-label">Temp</span>
      </div>
    </div>
  </div>
  <div class="machine-status machine-status-mini">
    <div class="machine-status-header">
      <div class="machine-status-info">
        <h3 class="machine-status-name">Press B2</h3>
      </div>
    </div>
    <div class="machine-status-indicator machine-status-indicator-idle">
      <span class="machine-status-indicator-dot"></span>
      Idle
    </div>
    <div class="machine-status-metrics">
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">0<span class="machine-status-metric-unit">rpm</span></span>
        <span class="machine-status-metric-label">Speed</span>
      </div>
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">22<span class="machine-status-metric-unit">&deg;C</span></span>
        <span class="machine-status-metric-label">Temp</span>
      </div>
    </div>
  </div>
  <div class="machine-status machine-status-mini">
    <div class="machine-status-header">
      <div class="machine-status-info">
        <h3 class="machine-status-name">Welder C4</h3>
      </div>
    </div>
    <div class="machine-status-indicator machine-status-indicator-maintenance">
      <span class="machine-status-indicator-dot"></span>
      Maintenance
    </div>
    <div class="machine-status-metrics">
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">--</span>
        <span class="machine-status-metric-label">OEE</span>
      </div>
      <div class="machine-status-metric">
        <span class="machine-status-metric-value">2h</span>
        <span class="machine-status-metric-label">ETA</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Use .machine-grid with column modifiers (.machine-grid-2, .machine-grid-3, .machine-grid-4, .machine-grid-auto)
     and .machine-status-mini for compact cards. The .machine-status-bar provides a summary overview strip. -->

Requires: tw.min.css

// No JS needed — grid layout is pure CSS.
// Use .machine-grid-auto for responsive auto-fit columns.

Classes Reference

Class	Description
`.machine-status`	Main container card with hover lift effect
`.machine-status-header`	Header with name, ID, location, and icon
`.machine-status-name`	Machine name heading
`.machine-status-id`	Machine ID label (subdued text)
`.machine-status-location`	Location text
`.machine-status-icon`	Machine icon container (48x48)
`.machine-status-indicator`	Status indicator pill
`.machine-status-indicator-running`	Running state (green with pulse dot)
`.machine-status-indicator-idle`	Idle state (primary/blue)
`.machine-status-indicator-maintenance`	Maintenance state (warning with blink)
`.machine-status-indicator-offline`	Offline state (muted)
`.machine-status-indicator-error`	Error state (red with fast pulse)
`.machine-status-job`	Current job / work order section
`.machine-status-metrics`	Auto-fit grid of metric cards
`.machine-status-metric`	Single metric card
`.machine-status-metric-success`	Green-colored metric value
`.machine-status-metric-warning`	Warning-colored metric value
`.machine-status-metric-danger`	Error-colored metric value
`.machine-status-alert`	Alert banner
`.machine-status-alert-warning`	Warning alert (yellow)
`.machine-status-alert-error`	Error alert (red)
`.machine-status-alert-info`	Info alert (blue)
`.machine-status-operator`	Operator section with avatar
`.machine-status-mini`	Compact mini variant
`.machine-status-compact`	Single-line horizontal compact variant
`.machine-status.glass`	Glass morphism variant
`.machine-grid`	Grid container for multiple machine cards
`.machine-grid-auto`	Auto-fit responsive grid (min 280px per card)
`.machine-grid-2`	2-column grid
`.machine-grid-3`	3-column grid
`.machine-grid-4`	4-column grid
`.machine-status-bar`	Horizontal status summary bar
`.machine-status-bar-dot-running`	Green dot for running count
`.machine-status-bar-dot-idle`	Blue dot for idle count
`.machine-status-bar-dot-maintenance`	Yellow dot for maintenance count
`.machine-status-bar-dot-error`	Red dot for error count
`.machine-status-bar-dot-offline`	Gray dot for offline count