Production Planning & Scheduling

Plan production runs, track capacity utilization, and visualize schedules by resource in one browser page.

Overview

Production Planning & Scheduling is a single-page app for operations and manufacturing teams who need to schedule jobs across production lines without rebuilding a spreadsheet. Add and edit jobs in a grid or form, see load summaries and per-resource cards, chart utilization, view a visual timeline, export to Excel, and pick up where you left off with automatic browser save.

Key features

Load summary cards

• Total planned qty — sum of planned units across all scheduled jobs.
• Avg utilization — average utilization % across all jobs.
• Active jobs — count of rows in the production schedule.
• Resources in use — number of distinct resources with at least one job.
• All four cards update instantly when jobs are added, edited, or deleted.

Resource group cards

• One card per active resource (Line A, Line B, Assembly) showing job count and planned units.
• Load badge and progress bar color-coded by utilization: green below 70%, amber 70–89%, red 90%+.
• Cards appear only for resources that have scheduled jobs.

Add production job form

• Alpine.js form with product name, resource selector, planned qty, capacity/day, start date, and end date.
• Add to schedule creates a new job and refreshes the grid, summaries, timeline, and chart.
• Utilization formula shown below the form: planned qty ÷ (capacity × working days).

Capacity utilization chart

• Chart.js bar chart titled Capacity utilization by resource.
• One bar per active resource showing average utilization % for jobs on that line.
• Bars color-coded green, amber, or red by load threshold; Y-axis capped at 120%.
• Axis labels and grid lines adapt to light or dark theme.

Production timeline

• Visual timeline with date range labels spanning the earliest start to latest end across all jobs.
• Each row shows product, resource, date span, and a CSS bar positioned by start/end dates.
• Bar width reflects job duration; label shows planned units inside the bar.

Production schedule grid

• AG Grid table with Product, Resource, Planned Qty, Capacity/day, Start Date, End Date, and Utilization % columns.
• Editable cells with single-click edit; resource column uses a dropdown editor.
• Utilization % column uses color-coded rendering (green, amber, red).
• Delete button per row removes a job from the schedule.
• Sortable, resizable columns; changes recalculate utilization and refresh all views.

Excel export

• Export Excel downloads `production-schedule.xlsx` with two sheets:
• Schedule — product, resource, planned qty, capacity/day, dates, and utilization % for each job.
• Resource Load — resource name, job count, planned qty, and average utilization %.

Theme

• Dark mode toggle in the header (☀️ / 🌙) using Tailwind `class` dark mode.
• AG Grid uses a custom dark theme; timeline bars and Chart.js colors adapt when dark mode is on.
• Dark mode preference persists across page reloads.

Data & persistence

Sample data ships with six production jobs across Line A, Line B, and Assembly (Widget Pro, Widget Lite, Gear Assembly, Motor Housing, Control Panel, and Sensor Module). Edits to the schedule auto-save to browser localStorage on every change and restore on page reload; if no saved data exists, sample jobs load by default. Excel export uses SheetJS workbooks for sharing schedules outside the browser.

Charts & reporting

Chart.js powers the capacity utilization bar chart aggregated by resource. Four KPI summary cards and per-resource group cards summarize planned volume and load. The CSS timeline provides a Gantt-style view of job spans. SheetJS generates the downloadable Excel workbook with schedule and resource load sheets.

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.