TotalApp Docs

OEE Dashboard

Real-time Overall Equipment Effectiveness tracking with availability, performance, and quality metrics for manufacturing lines.

OEE Dashboard

The OEE (Overall Equipment Effectiveness) Dashboard gives manufacturing teams a real-time view of production line efficiency. It combines the three core OEE pillars — Availability, Performance, and Quality — into a single composite score, with per-line cards, circular gauges, mini bar charts, and a 7-day trend line so operators and managers can spot degradation before it becomes a stoppage.

What is OEE?

OEE = Availability × Performance × Quality. World-class manufacturers target ≥ 85%. The dashboard colour-codes every value — green (≥ 85%), amber (70–84%), red (< 70%) — so issues are immediately visible without reading numbers.

Plant-Wide KPIs

Four summary tiles at the top show average OEE, Availability, Performance, and Quality across all active lines, each with a colour-coded progress bar and a classification badge.

Circular Gauge

Each production-line card displays a circular SVG gauge for the composite OEE score alongside three mini horizontal bars for the individual pillars.

7-Day Trend Chart

An inline SVG line chart shows OEE history for the past 7 days with a reference grid at the 60, 70, 80, and 85 percent thresholds.

Day-on-Day Trend Arrow

A trend icon (↑ / – / ↓) below each chart shows whether OEE improved, held steady, or declined compared to the previous day, with a ±pp delta label.

Line Filter

A dropdown in the top toolbar narrows the card grid to a single production line. The plant-wide KPI tiles always reflect all lines regardless of the filter.

Refresh Button

Manually reload OEE history and production line data from the server. A skeleton loader covers the card grid while data is fetching — no spinner.

AI Assistant

A chat panel on the right edge reads the plant-wide averages and every line's OEE breakdown to generate executive summaries, root-cause explanations for anomalies, and quantified recommendations — it explains the numbers already on screen rather than editing any records.

Understanding the Three Pillars

Pillar Formula What it measures Common causes of loss
Availability Run Time ÷ Planned Production Time How much of the scheduled time the machine was actually running Unplanned downtime, changeovers, material shortages
Performance Actual Output ÷ Theoretical Max Output How fast the machine ran versus its design speed Slow cycles, micro-stops, operator waits
Quality Good Parts ÷ Total Parts Produced What percentage of output was defect-free on the first pass Startup rejects, process variation, wrong settings

OEE Rating Bands

The dashboard automatically labels each score with a classification badge. Labels are fully localised and display in English or Turkish depending on the active language setting — no page reload required.

World Class ≥ 85%  Good 70–84%  Average 60–69%  Poor < 60%

Quick Start

1. Open Manufacturing
2. Click OEE Dashboard
3. Skeleton resolves to data
4. Review plant KPIs
5. Filter to a line if needed
  1. Navigate to Manufacturing → OEE Dashboard from the sidebar or My Apps.
  2. The screen loads with a skeleton table while data is being fetched — the KPI tiles and line cards appear as soon as the OEE history and production line data finish loading (they load in parallel).
  3. The top row shows four plant-wide average tiles: OEE, Availability, Performance, Quality.
  4. Below that, each production line gets its own card with a circular gauge, mini bars, a production stats grid (Planned / Actual / Defects), and the 7-day trend chart.
  5. Use the line filter dropdown (top-right) to focus on a single line. Select "All Lines" to return to the full view.
  6. Click Refresh at any time to pull the latest data from the server.

UI Walkthrough

Header Row

The header contains the page title on the left and two controls on the right: a line filter dropdown and a Refresh button. The dropdown popup's OS-level colour scheme (light or dark) automatically follows the active app theme, so the native popup matches the rest of the UI regardless of which theme is active.

Plant-Wide KPI Tiles

Four tiles arranged in a 2-column (mobile) or 4-column (desktop) grid summarise the plant. Each tile shows:

  • Label — translated automatically (English / Turkish)
  • Value — large colour-coded percentage (green / amber / red)
  • Mini progress bar — fills to the percentage in the same colour
  • Classification badge — World Class / Good / Average / Poor (localised)

Tile styling respects the Screen Style setting (Settings → Appearance → Screen Style): Workstation mode uses dark glass cards; Enterprise mode uses white cards with a slate border and shadow.

Skeleton Loading State

When the dashboard first opens or after clicking Refresh, a skeleton table loader (<SkeletonTable rows={4} />) replaces the entire card area. This prevents layout shift and communicates that data is in flight — no inline spinner div is used.

Production Line Cards

Each card covers one production line and contains five zones:

Zone Content
Header Line name + location (left), OEE classification badge (right)
Gauge + Bars Circular SVG gauge for composite OEE; three horizontal mini bars for Availability, Performance, Quality — labels are localised
Stats Grid Three small tiles: Planned Production, Actual Production, Defects — localised labels, numeric values formatted with thousands separators
Trend Chart 7-day SVG line chart with reference dashed lines at 60%, 70%, 80%, 85%
Delta Row Trend icon (↑ emerald / — neutral / ↓ red, dual-tone for light/dark themes) + ±pp value vs. the previous day — label is localised

Trend Icon Colours

The ↑ / ↓ icons use dual-tone colour classes (text-emerald-600 dark:text-emerald-400 / text-red-600 dark:text-red-400) so they remain readable in both light and dark themes. The flat — icon uses text-text-muted (a design token) for theme-aware contrast.

Empty Filter State

If the selected line has no data records, a centred message is shown instead of an empty grid. The message text is localised.

AI Assistant

Click the vertical AI Assistant tab on the right edge of the screen (or the Sparkles toggle) to open a chat panel over the dashboard. Because the OEE Dashboard is a chart/KPI screen rather than a record list, the assistant is scoped to dashboard-style capabilities only — it narrates and explains the aggregate numbers already rendered on screen, it does not edit any OEE entries or production lines:

  • Executive summary — a plain-language readout of plant-wide OEE standing, calling out the best and worst performing lines by name (e.g. "Average MTBF is 575h, above target, but Line A is the weakest at 397h").
  • Root cause & anomaly detection — when a line's OEE, Availability, Performance, or Quality trend has moved sharply, the assistant explains which sub-metric is driving it and names the affected line.
  • Recommendations — turns an observed weak spot into a concrete, quantified suggestion (e.g. adjusting a preventive-maintenance interval), grounded in the actual numbers shown on the dashboard.

Every reply can be saved with the Save as Report button, which stores it in My Reports under the title derived from your question and the current month/year. The panel respects the Writer Engine selected in Settings → Agentic (Local CLI, Hosted API, Local LLM, or Ollama) — Ollama and other local/in-browser engines run entirely on your own machine and never proxy through the server.

Settings That Affect This Screen

Setting Location Effect on OEE Dashboard
Screen Style Settings → Appearance Workstation: dark glass KPI tiles and line cards. Enterprise: white cards with slate borders and solid primary buttons.
Theme Settings → Appearance The line filter dropdown's OS popup automatically derives its colorScheme from the active theme. Light theme → light popup; Dark/Sleek theme → dark popup; Auto → follows system preference.
Language Settings → General All visible strings are fully localised (English / Turkish): KPI tile labels, pillar bar labels, stats grid labels, OEE classification badges, and the "vs. yesterday" trend delta label. No page reload required.

Data Model

OeeEntry

Field Type Description
id string Unique entry identifier
lineId string References a ProductionLine
date string (YYYY-MM-DD) Production date for this snapshot
oee number (0–100) Composite OEE percentage
availability number (0–100) Availability pillar percentage
performance number (0–100) Performance pillar percentage
quality number (0–100) Quality pillar percentage
plannedProduction number Planned units for the shift/day
actualProduction number Units actually produced
defects number Defective units rejected

ProductionLine

Field Type Description
id string Unique line identifier
name string Display name (e.g. "Line A – Assembly")
location string Physical location or plant section

The OEE history and production line data load in parallel to minimise load time. They are fetched once when the screen opens and again on every Refresh click.

Frequently Asked Questions

Why does the dropdown popup appear black in light mode?
It shouldn't — the line filter dropdown automatically follows the active app theme. If you see a black popup in Light mode, check Settings → Appearance and confirm the theme is set to Light (not Auto with a dark system preference active). The dropdown always matches whichever theme is currently active.
The KPI tiles show 0.0% for all metrics. Is data missing?
Yes — no OEE entries exist yet. The dashboard shows zeroes rather than an error. Add OEE records via the manufacturing data service or import historical records through the server API, then click Refresh to reload the view.
Why do some line cards not appear after filtering?
If a production line has no OEE history entries, it is excluded from the card grid even in "All Lines" mode — lines without a latest entry return null and are silently filtered out. Ensure OEE entries exist for the line and include the correct lineId.
The trend arrow shows – (flat) but OEE clearly changed. Why?
The flat indicator has a ±0.5 pp dead-band — changes smaller than 0.5 percentage points in either direction are treated as flat to prevent noise from triggering a trend signal. The arrow changes to ↑ or ↓ only when OEE moves more than 0.5 pp day-on-day.
Can I switch between Workstation and Enterprise card styles?
Yes. Go to Settings → Appearance → Screen Style and toggle between Workstation (dark glass) and Enterprise (white cards with slate border). The change takes effect immediately without a reload.
The page shows a skeleton but never resolves. What's wrong?
The skeleton appears while the two data fetches are in flight. If it never resolves, check browser DevTools for a failed network request to the manufacturing endpoints. Common causes: expired session token, server unreachable, or the tenant's data files are missing on the server.
How do I switch to Manufacturing Mode?
Click the mode badge in the top header and cycle through until MFG Mode appears, or go to Settings → App Modes and enable Manufacturing.
What do I need to prepare before creating a work order?
At least one Active BOM and one configured Production Line are required. Both are loaded dynamically into the dropdowns on the creation form.
Do all screens support both dark and light style?
Yes. All seven screens support a dual style that can be switched from Settings → Appearance → Screen Style.
Can the AI Assistant edit OEE entries or production lines?
No. The OEE Dashboard is a chart/KPI screen, so its AI Assistant is scoped to explaining the aggregate numbers already shown — executive summaries, root-cause analysis for anomalies, and quantified recommendations. It never edits, creates, or deletes OEE entries or production lines. Row-level editing assistants exist on list/table screens (e.g. Spare Parts, Work Orders) instead.

Tips & Best Practices

Daily Review Habit

Open the OEE Dashboard at the start of each shift and check the 7-day trend chart before production begins. A downward slope over three consecutive days is an early warning sign that warrants a maintenance check or process review — before an actual stoppage occurs.

Focus on the Weakest Pillar

If OEE is below target, look at the three mini bars first. The shortest bar is the bottleneck. Fixing Availability (downtime) requires a different action than fixing Quality (defect rate) — address the lowest pillar before optimising the other two.

Use the Reference Lines

The 7-day trend chart includes four dashed reference lines at 60%, 70%, 80%, and 85%. Use the 85% line as your World Class target. If the daily OEE line consistently touches or exceeds it, the line is performing at benchmark level.

Composite OEE Can Be Misleading

An OEE of 70% could result from Availability=100%, Performance=70%, Quality=100%, or from many other combinations. Always check the three pillars individually rather than acting on the composite number alone — the mini bars on each card exist precisely to prevent this mistake.