Facility & Office Management

Manage rooms, track utilization, log maintenance, and simulate bookings in one browser-based dashboard.

Overview

This app helps workplace and facilities teams monitor office spaces without a separate CAFM system. Browse rooms in editable grids, simulate room bookings, see utilization KPIs and charts, and view a clickable floor-plan map. Maintenance tickets stay linked to spaces. Data persists locally in your browser, with Excel export for reporting. Everything runs in a single self-contained HTML page.

Key features

Space & maintenance grids

• Rooms & spaces grid — Name, floor, type, capacity, utilization %, and status (Available, Booked, In Use, Maintenance). Click a row to select a space.
• Maintenance log — Tickets linked to spaces with issue, priority, status, scheduled date, and assignee.
• Add space / log ticket — Create new rooms or maintenance entries from the grid headers.

Booking simulation

• Booking form — Pick a space, date, time range, and organizer; preview availability before booking.
• Conflict detection — Warns when a slot overlaps an existing booking or the space is under maintenance.
• Status tracking — Booking updates space status and utilization; today's bookings appear in a summary table.
• Selected space panel — Shows details for the currently selected room.

Utilization summary

• KPI cards — Total spaces, average utilization, bookings today, and open maintenance tickets.
• Utilization charts — Bar charts for average utilization by floor and by space type (Conference, Office, Lab, etc.).
• Color-coded utilization — Grid cells highlight high (≥75%), medium (≥50%), and low utilization.

Floor plan map

• Interactive placeholder — SVG floor plan with clickable room blocks colored by utilization; syncs with grid selection.

Reporting & data

• Excel export — Download Spaces, Maintenance, and Bookings sheets via SheetJS.
• localStorage — Spaces, maintenance, bookings, 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 spaces across three floors, four maintenance tickets, and three bookings for today. All changes save to `localStorage` under `facility-management-data`.

Charts & reporting

Two bar charts aggregate utilization by floor and by space type. Excel export includes all three data sets on separate sheets.

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.