Maintenance Schedules & Logs

Track asset service dates, spot overdue work, and review downtime trends in one browser page.

Overview

Maintenance Schedules & Logs is a single-page app for facilities and operations teams who need to record preventive maintenance, see what is overdue, and plan upcoming service without a separate CMMS. Log work in a form with auto-calculated next-due dates, filter and highlight at-risk assets, browse an upcoming calendar list, export to Excel, chart downtime and completion, and pick up where you left off with automatic browser save.

Key features

Summary cards

• Total assets — count of maintenance log entries tracked in the app.
• Overdue — assets whose next due date has passed.
• Due this week — non-completed items due within the next seven days.
• Completed (30d) — items marked completed with a last service date in the past 30 days.
• All four cards update when logs are added or deleted.

Record maintenance form

• Alpine.js form with asset selector, last service date, service interval (days), downtime hours, status, and notes.
• Next due auto-calculates as last service date plus interval and previews before you save.
• Save log adds a row to the grid and refreshes summaries, calendar list, and trend chart.

Completion & downtime trend

• Chart.js combined bar and line chart by asset.
• Bars show downtime hours per service event; green line marks completed status (0 or 1).
• Axis labels and grid lines adapt to light or dark theme.

Upcoming schedule (calendar list)

• List-based calendar grouped by month and year.
• Shows each asset’s next due date and computed status (Overdue, Due Soon, Scheduled).
• Overdue and due-soon rows use red and amber background highlights.

Filters and search

• Filter status dropdown: All, Overdue, Due Soon, Scheduled, or Completed.
• Search asset filters by asset name or notes text.
• Counter shows how many logs match the current filters.

Maintenance log grid

• AG Grid with Asset, Last Service, Next Due, Status, and Notes columns.
• Status is derived from next due date (overdue, due within 7 days, scheduled, or completed) with color-coded text.
• Overdue rows use a red row background; due-soon rows use amber.
• Delete removes a log entry; sortable, resizable columns.

Excel export

• Export Excel downloads `maintenance-logs.xlsx` with two sheets:
• Maintenance Logs — asset, dates, status, interval, downtime, and notes for every entry.
• Upcoming — non-completed assets sorted by next due date.

Theme

• Dark mode toggle in the header (☀️ / 🌙) using Tailwind `class` dark mode.
• AG Grid, calendar list, and Chart.js colors adapt when dark mode is on.
• Dark mode preference persists across page reloads.

Data & persistence

Sample data ships with six maintenance logs for CNC Mill #1, Conveyor Line A, HVAC Unit Roof, Forklift FL-03, Compressor C-2, and Packaging Robot. Edits auto-save to browser localStorage on every add or delete and restore on page reload; if no saved data exists, sample logs load by default. Excel export uses SheetJS workbooks for sharing schedules outside the browser.

Charts & reporting

Chart.js powers the downtime and completion trend chart. Four KPI summary cards summarize workload and risk. The list-based calendar groups upcoming service by month. SheetJS generates the downloadable Excel workbook with full logs and an upcoming schedule sheet.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

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