Village Roaster Portal
Design Tokens Calendar Preview Week by Role
Design Preview

Admin UI Mockups

Full-width, Homebase-density mockups built for structured feedback. Click any card to open the mockup. Each has a "Give feedback" widget — use it to capture reactions and paste the JSON back in chat.
Pure HTML/CSS — no framework — no API calls — open in any browser
Primary views
01 — Today
Today Dashboard
Landing page for the start of a manager's day. Stat cards (hours worked vs scheduled, tip pool, open clocks, OT risk), full-width roster right now, and AI inbox with actionable review items.
New AI inbox Roster status Stat cards
02 — Schedule
Schedule (Week View)
Full-width 7-day grid grouped by role/location. Dense shift cards with time, last name, location color. Hover cell = "+" affordance. Click shift = edit popover. Persistent stats bar (hours, wages, labor %). No side panel.
New + New shift Edit popover Stats bar
03 — Schedule
Schedule (Day View)
Homebase-style day view: employees across columns, hours down the Y-axis. Shift blocks absolutely-positioned proportionally. Red "now" line at current time. Click time cells to add shifts. Built with plain DOM, no library.
New Hour timeline Now-line Click-to-add
Staff views
BRISNEHAN
DURAN C. — expanded
GOMEZ
GOYETTE
HAMILTON
04 — Staff
Staff List
Dense employee table with filter tabs (Active/Leave/Terminated). Kraft tags for role, phone (tap-to-call), next shift, mini-sparkline hours, status. Click any row to expand inline — shows contact, hire date, period hours, attendance, notes.
New Expand inline Sparklines No avatars
05 — Staff
Employee Detail (Side Panel)
Alternative to inline expand: 390px slide-in panel from the right showing full employee record — contact, roles, period hours with 4-period bar chart, schedule, attendance history (last 10), manager-only notes, and documents.
New Slide-in panel Hours chart Manager notes
Settings
06 — Settings
Settings: Organization
Three inline-editable tables (Locations / Departments / Roles) plus a tag cloud for skills. Row-level edit/disable/delete. Add-row at bottom of each table. Settings sidebar for navigation across all settings categories including AI/MCP.
New Inline edit Tag cloud Settings nav

How to use these mockups

Each mockup is a self-contained HTML file. Open them in a browser — no server needed for most things. For the feedback "Copy JSON" button to work (clipboard access), serve with a local HTTP server:

npx http-server /home/eric/code/village-roaster-portal/design-preview -p 8080 -o

Then open http://localhost:8080 in your browser.

How to give feedback:

  1. Click Give feedback (copper button, bottom-right of every mockup)
  2. Rate the vibe 1–5, fill in what works / what's missing / what to change
  3. Click Copy JSON
  4. Paste the JSON into chat — the AI will parse it and act on it

These are pure HTML/CSS/JS — no framework, no API calls, no build step. Safe to open directly from the filesystem or a simple HTTP server.