Book something first
As a ticket buyer, for a theater show. The box office sells the same seats in “Box office”.
- Pick a show at the top.
- Click a few seats, or let “Best seats” on the right pick them.
- Press “Book 2 seats” at the bottom.
As an employee, for the office. Car parks work the same way.
- Pick a day at the top.
- Click a free desk (green outline).
- Press “Book for …” and choose all day, morning or afternoon.
Customers
Employees
Box office & front desk
Staff who book for someone else: they pick the customer, and can move or cancel any booking.
Draw your own floor
What admins do before anyone can book, in “Edit layouts”. The editor puts “What to place” on the left and the settings on the right, so it needs a wide screen: 1920 × 1080 is ideal. On 1440 × 900, collapse the menu on the left with the arrow next to “Warp Floor demo”.
The empty 5F opens in the editor. Pick walls, doors, rooms or desk islands under “What to place” and click the plan. Save it, and it appears on the Office page.
The theater opens in the editor. Click a block of seats and drag the sliders for rows, seats, spacing, curve and rotation.
In the editor, choose “Floor plan” → “Choose a background…” and pick a PNG, SVG or a page of a PDF, then draw on top of it.
Open the office, select a desk island and save it as a template under “Floor plan”. Place it again from “Saved templates”, or start a new floor from it.
Run the places
What admins and managers see after the plans are in use.
Good to know
Press “How to use” above the plan. It shows how to move, book and edit on that plan.
Pick a language in the bar at the top. The plans, the editor and Filament switch; the names of the places come from the demo’s data.
Everyone who opens this demo is signed in as the same demo user, so you can buy like a customer, sell like the box office and edit like an admin. In your app, Filament policies decide who sees which page.
Every page is a Filament page with a floor() method, and the places and bookings are your own Eloquent models. “View code” on each page shows how it is set up.