Cursor App Template #44 — Equipment Utilization Tracking

Equipment Utilization Tracking

Track asset hours, availability, efficiency, and utilization trends in one browser-based dashboard.

Overview

This app helps operations and maintenance teams monitor how production equipment is used. View assets in an AG Grid registry, log usage hours with auto-calculated efficiency metrics, filter by category or availability, and chart weekly utilization trends. Import and export data via Excel for reporting. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Equipment registry

  • AG Grid tracker — Columns for Asset, Hours Used, Availability, and Efficiency %. Color-coded availability (Available, In Use, Maintenance, Idle) and efficiency bands.
  • Sample fleet — Eight assets across machining, material handling, production, utilities, and fabrication categories.
  • Row selection — Click a row to pre-fill the logging form for that asset.

Usage logging

  • Alpine.js log form — Select asset, date, hours used, and optional notes.
  • Auto-calculated metrics — Live preview of new total hours, projected efficiency, and derived availability before you submit.
  • Recent usage log — Table of the latest logged entries.

Filters & summary

  • KPI cards — Total assets, average efficiency, total hours used, and assets in maintenance.
  • Filters — Search by asset name, filter by category, availability status, and minimum efficiency percentage.

Trends & reporting

  • Utilization trend chart — Chart.js line chart of weekly hours logged across the fleet.
  • Excel import/export — Download Assets, Usage Log, and Weekly Trend sheets; import `.xlsx` files to add data.

Data management

  • Add / delete assets — Manage the equipment registry from the header and grid.
  • localStorage — Assets, logs, trends, and selection persist across sessions.
  • Reset data — Restore sample dataset with confirmation.
  • Dark mode — Toggle light/dark theme; AG Grid and Chart.js adapt; preference is remembered.

Data & persistence

Sample data includes eight assets with varied utilization (0–100% efficiency), six usage log entries, and five weeks of trend data. All changes save to `localStorage` under `equipment-utilization-data`.

Charts & reporting

The line chart plots weekly total hours from logged usage. Excel export includes three sheets for assets, logs, and weekly trends.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.

Dark mode and localStorage

Equipment Utilization Tracking

Track asset hours, availability, efficiency, and utilization trends.

Total assets8
Avg efficiency65%
Total hours used2,691
In maintenance1

Log usage

New total hours: 436
Projected efficiency: 91%
Availability: In Use

Filters

Utilization trends (weekly hours)

Jun 16 · Jun 23 · Jun 30 · Jul 7 · Jul 14
Equipment registry8 shown
AssetCategoryHoursAvailEff%
CNC Mill #1Machining312In Use65%
CNC Mill #2Machining428In Use89%
Forklift BMaterial Handling0Maintenance0%

Recent usage log

DateAssetHoursNotes
2026-07-09Packaging Line7.5Order fulfillment
2026-07-09Forklift A4Warehouse move
2026-07-08CNC Mill #16Prototype run
💾 Saved to localStorage

Leave a Reply